How to learn react--[turn]

If you're a React (or front-end) novice, you might be confused about the biosphere for the following reasons:

• React's target group has always been a developer and front-end expert who likes to try new things.
• Facebook is only open source for what they're actually using, so they're not paying attention to engineering needs that are smaller than Facebook.
• The existing REACT guidelines are not level-aligned.

In this article, I'll assume that you already have the basics of using HTML, CSS, and JavaScript to develop Web pages.

Why are you listening to me?

About React, now there are a lot of conflicting suggestions, why listen to me?

Because I was one of the first members of the Facebook build and open source React. Now that I've left Facebook and joined a start-up company, I'm not going to stand on Facebook.

How to step into the React eco-circle

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 the React ecosystem seems to always make people feel stressed, because it is always interpreted in the wrong order:

Instead of skipping or learning at the same time , you should study in the following order:

• React
• npm
• JavaScript "Packaging Tools"
• ES6
• Routing
• Flux

you don't have to learn all this before you use React. Just go to the next step when you have a problem to solve.

In addition, there are some frontier topics that are often mentioned in the React community, the following topics are interesting but difficult to understand, so they are far less popular than the above themes, and most applications do not need them.

• inline style
• Server-Side Rendering
• Immutable.js
• Relay, Falcor, etc.

Learning React itself

One common misconception is that you need to spend a lot of time on the Configuration tool before you start learning React. In the official documentation, you can find the Copy-paste HTML template. Just save as a .html file and you can start learning right away. This step does not require any tools and you do not need to use additional learning tools until you can master the React Foundation.

I still feel that the easiest way to learn React is through the official tutorial the official tutorial.

Learn npm

npmis the node. JS Package Management tool and is the most popular way for front-end engineers and designers to share JavaScript code. It includes a CommonJS module system named, which allows you to install JavaScript-written command-line tools. As a background, read this article to learn about CommonJS the importance of the browser, read the Commonjs Spec Wiki to learn about the CommonJS API More content

In the React ecosystem, most reusable components, libraries, and tools follow CommonJS module specifications that can be npm installed.

Learn JavaScript Packaging tools

For a number of technical reasons, the CommonJS module ( npm that is, everything in it) cannot be used directly into the browser. You need a JavaScript "pack tool (Bundler)" to package these modules into .js files so that you can <script> tags to introduce them.

JavaScript packaging tools include Yes webpack and browserify . They are good choices, but I personally prefer webpack it because it has many features that simplify large-scale application development. Given the webpack documentation may be confusing, I wrote two articles: PLUG-AND-PL Ay template for getting started and how-to guide for Webpack for more complex use cases.

One thing to keep in mind: CommonJS using require() functions to introduce modules, many people are confused and think they need to be imported require.js into the project. For a number of technical reasons, I recommend that you avoid using require.js it. It is not popular in the React biosphere.

Learning ES6

Outside of JSX (which you'll learn in React tutorial), you might notice some interesting syntax in the React example. This is known as ECMASCRIPT6 and is the latest version of JavaScript. Since ES6 is new, you may not have learned that the browser may not be compatible yet, but don't worry, with the right configuration, your packaging tool will automatically convert you to compatible code.

If you only want to use React to get things done, you can skip ES6 's study, or stay until later to learn.

Learning Routing (routing)

"Single page Application" is a hot topic of technology nowadays. When the page is loaded and the user clicks on the link or button, JavaScript updates the page and changes the address bar, but the page does not refresh. The management of the address bar is done through routing (router) .

Currently the most popular routing solution for the React ecosystem is react-router. If you're creating a single-page app, what's the reason not to use it?

If you are not creating a single-page app, do not use routing. In any case, most projects start with widgets from large applications.

Learn Inline styles

Before the advent of React, many people reused complex CSS stylesheets through a preprocessor like SASS. Since React makes it easy to develop reusable components, your stylesheet can become less complex. Many people in the community (including me) are trying to completely abandon the stylesheet.

For some reason, this is quite a crazy idea. This makes media queries more difficult, and this technology can have performance limitations. quries when you start using React, just write it in the way you normally use it.

Once you have found the feeling of developing with React, you can focus on the technologies that can be used as alternatives. One of the popular technologies is BEM. I recommend that you gradually deactivate the CSS preprocessor, because React gives you a much more powerful way to reuse styles (by reusing components), and the JavaScript packaging tool can generate more efficient stylesheets for you (I once spoke about this on OSCON). That's all, anyway. React, like any other JavaScript library, works well with the CSS preprocessor.

Learn server-side rendering

Server-side rendering is often referred to as "universal" or "isomorphic" JS. This means that you can render static HTML on the server side with the React component. This can improve the performance of the initialization load, because users do not have to wait until the JS download to see the initial interface, and React can reuse the server-side rendered HTML, no need to regenerate the client.

If you find the first screen rendering too slow, or want to improve the site in search engine ranking, you need server-side rendering. Although Google now indexes client-rendered content, as of January 2016, this has been proven to have a negative impact on the rankings, possibly due to performance problems with client-side rendering.

Server-side rendering also requires the assistance of many tools, since it is clear that the React component is not written in the context of server-side rendering, you should build your application before you care about server-side rendering. You don't have to worry about rewriting all the components to support it.

Learn Flux

You may have heard of flux, but there is a lot of error information about flux.

When many people sit down and just start building applications, they think they need to use Flux to define their data models. It is not right to use flux in this way, and flux should be introduced only after a large number of components have been established.

There is a hierarchical relationship between React components. In many cases, your data model also follows this level. In this case, Flux will not help you very much. Sometimes, however, your data model has no hierarchy, and you may need to look at Flux when your React component begins to accept no correlation props , or when a small number of components begin to become complex.

You will know when to use Flux. If you're not sure if you need to use it, you don't need it.

If you decide to use flux, now the most popular, document-wide flux library is Redux. Of course there are many other options that you might be interested in trying to use, but my advice is that only the most popular one is enough.

Learning Immutable.js

Immutable.js provides a series of data structures to help address some of the performance issues when constructing React applications. This is a great library and you may be using it extensively in the process of application development, but it is completely unnecessary until you are aware of performance issues.

Learn Relay, Falcor, etc.

These techniques can help you reduce the number of AJAX requests, which 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.

(English original: Https://github.com/petehunt/react-howto; reprinted from: HTTPS://GITHUB.COM/PETEHUNT/REACT-HOWTO/BLOB/MASTER/README-ZH.MD)

How to learn react--[turn]