初学react实现路由跳转_如何学习React —从初学者到高级的路线图

初学react实现路由跳转

Hey folks!

嘿伙计！

This guide is for people who are starting with React. I have carefully curated the best videos and articles in each section to make it easier for learning.

本指南适用于使用React的人。 我精心策划了每个部分中最好的视频和文章，以使学习更轻松。

Note: I’m not associated with any of the websites mentioned below. It’s purely my view.

注意：我没有与以下提到的任何网站关联。 纯粹是我的看法。

先决条件 (Prerequisites)

1. Basic knowledge of HTML, CSS, and JavaScript.
   HTML，CSS和JavaScript的基本知识。

2. Basic understanding of ES6 features. Here’s my article explaining some of the ES6 features.

   基本了解ES6功能。 这是我的文章，介绍了一些ES6功能。

   To get started you should at least know the following features:

   首先，您至少应该了解以下功能：

   1. Let

   1.让

   2. Const

   2. const

   3. Arrow functions

   3.箭头功能

   4. Imports and Exports

   4.进出口

   5. Classes

   5.班级

3. Basic understanding of how to use npm.

   基本了解如何使用npm 。

入门 (Getting started)

You can use online code editors to practice, or you can use Create React App.

您可以使用在线代码编辑器进行练习，也可以使用Create React App 。

I have setup a development environment in JSFiddle and in Codepen.

我已经在JSFiddle和Codepen中设置了开发环境。

To grasp all the fundamentals of React, you can start with the following tutorials:

为了掌握React的所有基础知识，您可以从以下教程开始：

React official documentation by React

React的官方文档

Beginners guide to React by Kent C. Dodds

Kent C. Dodds撰写的React入门指南

Fundamentals of React by Samer Buna

Samer Buna 的React基础

By now, you should have a basic idea of the fundamentals of React. It’s enough to start developing simple web apps in React.

到目前为止，您应该对React的基础知识有一个基本的了解。 在React中开始开发简单的Web应用程序就足够了。

Now, take a look at the React official tutorial:

现在，看一下React官方教程：

React Official tutorial by React

React React的官方教程

It’s a well-written article covering the fundamentals of React. And it also explains the specific topics very clearly.

这是一篇写得很好的文章，涵盖了React的基础知识。 并且它也非常清楚地解释了特定主题。

Last but not least, learn how to connect to APIs with React apps:

最后但并非最不重要的一点是，了解如何使用React应用程序连接到API：

Fetching API with React.js by Ethan Jarrell

用Ethan Jarrell的 React.js获取API

开始建立一些项目 (Start building some projects)

1. Simple todo-app
   简单的待办事项
2. Simple calculator app
   简单的计算器应用程序
3. Build a shopping cart
   建立购物车
4. Display GitHub’s user stats using GitHub API
   使用GitHub API显示GitHub的用户统计信息

React路由器 (React Router)

React Router helps you create routes to your single page applications. It’s very powerful and easy to use with your React application.

React Router帮助您创建到单页应用程序的路由。 它非常强大并且易于与React应用程序一起使用。

To get started:

开始：

React Router tutorial by Paul Sherman

Paul Sherman的《 React Router》教程

React Router and intro to SPA by Learn Code Academy

学习路由器学院的React Router并介绍SPA

Routing React apps by Scotch.io

通过Scotch.io 路由React应用

These articles are more than enough for you to get started with React routing.

这些文章足以让您开始使用React路由。

专案 (Projects)

1. A simple CURD application
   一个简单的CURD应用程序
2. Hacker News clone
   黑客新闻克隆

If you are really interested in learning much about Router, check out the following guide:

如果您真的对学习路由器感兴趣，请查看以下指南：

React Router complete guide by React Training

React Training提供的React Router完整指南

Webpack (Webpack)

Webpack is a famous JavaScript module bundler. Webpack helps you to maintain dependencies as static files for your project so developers don’t have to do it.

Webpack是著名JavaScript模块捆绑器。 Webpack可以帮助您将依赖项保持为项目的静态文件，因此开发人员不必这样做。

Webpack also comes with loaders. Loaders help run specific tasks around your project.

Webpack还带有加载程序。 加载程序可帮助您在项目中运行特定任务。

To learn much more about Webpack, follow the following tutorials.

要了解有关Webpack的更多信息，请遵循以下教程。

When and why to use Webpack by Andrew Ray

何时以及为何使用 Andrew Ray的Webpack

Webpack tutorial by Learn Code Academy

学习代码学院的Webpack教程

To setup your local React environment using Webpack, you can refer to the following GitHub repo:

要使用Webpack设置本地React环境，可以参考以下GitHub存储库：

React SPA template by Hanif Roshan

Hanif Roshan的React SPA模板

I think the above tutorials are enough to get started with Webpack. However, to get in-depth knowledge you can refer to the following guides:

我认为以上教程足以开始使用Webpack。 但是，要获得深入的知识，可以参考以下指南：

Webpack introduction by SurviveJS

SurviveJS的Webpack简介

Webpack official docs

Webpack官方文档

服务器渲染 (Server rendering)

Server rendering is one of the coolest features in React. It can be used with any of the back-end technologies.

服务器渲染是React中最酷的功能之一。 它可以与任何后端技术一起使用。

Server Side Rendering (SSR) in React helps you to create components in the server and render that as HTML in your browser. And when all the JavaScript modules are downloaded in the browser, React takes the stage. Simple!

React中的服务器端渲染(SSR)可以帮助您在服务器中创建组件并将其作为HTML呈现在浏览器中。 当所有JavaScript模块都下载到浏览器中时，React进入了舞台。 简单！

First of all, take a look at the React-DOM API:

首先，看一下React-DOM API：

React-DOM API by React

React的React-DOM API

And follow the below tutorials to get in-depth knowledge:

并按照以下教程获得深入的知识：

React server rendering by Tyler McGinnis

Tyler McGinnis的React服务器渲染

React router server rendering by Roilan Salinas

Roilan Salinas的 React路由器服务器渲染

React Server side rendering guide by Dennis Brotzky

Dennis Brotzky撰写的 React Server端渲染指南

Redux (Redux)

Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux :)

Redux是一个JavaScript库，用于维护应用程序状态。 在构建复杂的应用程序时，它将增加开销来管理组件之间的状态。 Redux帮助您将所有状态存储在一个源中。 当然，React与Redux配合良好：)

To get started:

开始：

Redux tutorial by Learn Code Academy

Redux教程 通过学习代码学院

Redux tutorial for beginners by Valentino Gagliardi

Valentino Gagliardi的初学者Redux教程

React Redux by CSS Tricks

React Redux通过CSS Tricks

These tutorials are more than enough to getting started with Redux. However, I cannot resist mentioning the below tutorial too. It’s worth it :)

这些教程对于Redux入门来说已经足够了。 但是，我也无法抗拒提及以下教程。 这很值得 ：)

Getting started with Redux by Dan Abramov

Dan Abramov的Redux入门

翻译自: https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/

初学react实现路由跳转