Reprinted from: https://github.com/petehunt/react-howto, this is a learning path suggestion for the React framework by the author of React. Personally, I think it is a very good learning path.
How to Learn React?#
If you are a beginner in React (or frontend development), you may feel confused about this ecosystem for the following reasons:
- React has always targeted developers and frontend experts who like to try new things.
- The content open-sourced by Facebook is applied in their actual applications, so they do not pay attention to engineering requirements smaller than Facebook.
- The existing React guides vary in quality.
In this article, I will assume that you already have a basic understanding of developing web pages using HTML, CSS, and JavaScript.
Why listen to me?#
With so many conflicting suggestions about React, why should you listen to me?
Because I am one of the original members who built and open-sourced React at Facebook. Now that I have left Facebook and joined a startup company, I will not represent Facebook's standpoint.
How to Enter the React Ecosystem#
All software is built on top of a technology stack, and you need to have a deep understanding of the entire technology stack to build your application. Why does the React ecosystem always seem overwhelming? It is because it is often explained in the wrong order:
You should learn in the following order, instead of learning or skipping randomly:
You don't need to learn all of these before using React. You only need to move on to the next step when you encounter a problem that needs to be solved and requires further learning.
In addition, in the React community, there are some cutting-edge topics that are often mentioned. These topics are interesting but difficult to understand, so they are not as popular as the topics mentioned above, and most applications do not need to use them.
Learning React Itself#
There is a common misconception that you need to spend a lot of time on configuration tools before starting to learn React. In the official documentation, you can find a copy-paste HTML template. Just save it as an .html file, and you can start learning immediately. This step does not require any tools, and you don't need to learn how to use tools until you are proficient in the basics of React.
I still think the easiest way to learn React is through the official tutorial, the official tutorial.
Learning npm#
npm is a package management tool for Node.js and the most popular way for frontend engineers and designers to share JavaScript code. It includes a module system called CommonJS, which allows you to install command-line tools written in JavaScript. As background knowledge, you can read this article to understand the importance of CommonJS for browsers, and read CommonJS Spec Wiki to learn more about the CommonJS API.
In the React ecosystem, most reusable components, libraries, and tools follow the CommonJS module specification and can be installed using npm.
Learning JavaScript Bundlers#
For various technical reasons, CommonJS modules (i.e., everything in npm) cannot be used directly in browsers. You need a JavaScript bundler to package these modules into .js files so that you can include them in web pages using the <script> tag.
JavaScript bundlers include webpack and browserify. They are both good choices, but I personally prefer webpack because it has many features that simplify the development of large applications. Since the webpack documentation can be confusing, I have also written two articles: plug-and-play template for getting started and a how-to guide for webpack for more complex use cases.
One thing to remember is that CommonJS uses the require() function to import modules, so many people are confused and think that they need to import require.js into their projects. For several technical reasons, I recommend avoiding the use of require.js in the React ecosystem. It is not popular.
Learning ES6#
In addition to JSX (which you will learn in the React tutorial), you may notice some interesting syntax in React examples. This is called ECMAScript 6 (ES6), the latest version of JavaScript. Since ES6 is relatively new and may not be supported by all browsers, don't worry, your bundler will automatically convert it to compatible code with the appropriate configuration.
If you just want to use React to get things done, you can skip learning ES6 or learn it later.
You may see some discussions suggesting that it is better to use ES6 classes to create React components. This is not true. Most people (including Facebook) still use React.createClass().
Learning Routing#
"Single-page applications" are a hot topic in technology. When a web page finishes loading, JavaScript updates the page and changes the address bar when the user clicks on a link or button, but the web page does not refresh. The management of the address bar is done through routing.
Currently, the most popular routing solution in the React ecosystem is react-router. If you are creating a single-page application, why not use it?
If you are not creating a single-page application, please do not use routing. In any case, most projects start with small components in a large application.
Learning Inline Styles#
Before React, many people reused complex CSS stylesheets using preprocessors like SASS. Since React makes it easy to reuse components, your stylesheets may not be as complex. Many people in the community (including me) are trying to completely abandon stylesheets.
For several reasons, this is actually a crazy idea. It makes media queries more difficult and may have performance limitations. When you start using React, just write CSS as you normally would.
Once you get the hang of developing with React, you can focus on alternative techniques. One popular technique is BEM. I recommend gradually phasing out CSS preprocessors because React gives you a more powerful way to reuse styles (by reusing components), and JavaScript bundlers can generate more efficient stylesheets for you (I have given a talk about this at OSCON). With all that said, React works well with CSS preprocessors, just like other JavaScript libraries.
Another option is CSS Modules, or more specifically, react-css-modules. With CSS Modules, you still write CSS (or SASS/LESS/Stylus), but you can manage and organize CSS files like you do with inline styles in React. You don't need to worry about managing class names using methods like BEM because the module system takes care of it.
Learning Server-Side Rendering#
Server-side rendering is often referred to as "universal apps" or "isomorphic apps." This means that you can render static HTML using React components on the server. This can improve the performance of initial loading because users don't have to wait for JavaScript to download before seeing the initial interface, and React can reuse the HTML rendered on the server without the need for client-side regeneration.
If you find that the initial rendering is too slow or want to improve the ranking of your website on search engines, you need server-side rendering. Although Google now indexes client-side rendering, as of January 2016, it has been proven to have a negative impact on rankings, possibly due to performance issues with client-side rendering.
Server-side rendering also requires the assistance of many tools because React components are not written with server-side rendering in mind. You should build your application first and then consider server-side rendering. Don't worry, you don't need to rewrite all your components to support it.
Learning Flux#
You may have heard of Flux, but there is a lot of misinformation about it.
Many people start building applications and think they need to use Flux to define their data models. This is incorrect. Flux should be introduced after a large number of components have been built.
React components have a hierarchical relationship. In many cases, your data model also follows this hierarchy. In this case, Flux will not be of much help. However, there are times when your data model does not have a hierarchy, such as when your React components start accepting unrelated props, or when a small number of components start becoming complex. That's when you might want to consider Flux.
You will know when you need to use Flux. If you are unsure whether you need it, you don't need it.
If you decide to use Flux, the most popular and well-documented Flux library now is Redux. There are also many other options that you may be interested in trying, but my recommendation is to stick with the most popular Redux.
Learning Immutable.js#
Immutable.js provides a set of data structures to help solve certain performance issues when building React applications. It is a great library that you may use extensively as your application develops, but it is completely unnecessary until you become aware of performance issues.
Learning Relay, Falcor, etc.#
These technologies can help reduce the number of AJAX requests. They are still very cutting-edge, so if you don't have a problem with too many AJAX requests, you don't need to use Relay or Falcor.