Reprinted from: https://github.com/petehunt/react-howto, this is a learning path recommendation for the React framework by the open-source author of React. Personally, I feel that this 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 have varying levels of quality.
In this article, I will assume that you already have a basic understanding of developing web pages using HTML, CSS, and JavaScript.
Why should you listen to me?#
With regard to React, there are already a large number of conflicting recommendations, so 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 take a biased stance on behalf of Facebook.
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 in order to build your application. Why does the React ecosystem's tools always seem overwhelming? It is because they are always explained in the wrong order:
You should learn in the following order, rather than learning or jumping around simultaneously:
You do not need to learn all of these before using React. You only need to enter the next step of learning when you encounter a problem that needs to be solved.
In addition, in the React community, there are some cutting-edge topics that are frequently mentioned. These topics are interesting but difficult to understand, so they are not as popular as the above topics. Most applications do not need to use these topics.
Learning React Itself#
There is a common misconception that you need to spend a lot of time on configuring 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 do not need to learn how to use tools until you are proficient in the basics of React.
I still think that 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 it is 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 <script> tags.
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 various 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), which is the latest version of JavaScript. Since ES6 is relatively new, you may not have learned it yet, and browsers may not be fully compatible with it. But don't worry, with the appropriate configuration, your bundler will automatically convert it into compatible code.
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 saying 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 is loaded, 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 large applications.
Learning Inline Styles#
Before React appeared, many people reused complex CSS stylesheets using preprocessors like SASS. Since React makes it easy to reuse components, your stylesheets can become less complex. Many people in the community (including me) are trying to completely abandon stylesheets.
For some reasons, this is actually a quite 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 before). With all that being 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 BEM-like methods because the module system takes care of it at the lower level.
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 JS to download before seeing the initial interface, and React can reuse the HTML rendered on the server without the need for client-side re-rendering.
If you find that the initial rendering speed 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 rendered content, 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 obviously 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 Flux.
Many people start building applications and think they need to use Flux to define their data models. This is not correct. Flux should be introduced only 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. But sometimes, when your data model does not have a hierarchy, or when your React components start accepting unrelated props, or when a small number of components start becoming complex, you may need to consider Flux.
You will know when you need to use Flux. If you are not sure 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. Of course, there are many other choices, and you may be interested in trying them, 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, and you may use it 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.