How to ReactJS
For a beginner, the ecosystem around React (as well as the frontend as a whole) may seem confusing. There are several reasons for this.
Hereinafter, I assume that you are already familiar with HTML, CSS and JavaScript.
')
There are many conflicting tips on React. Why listen to me?
I worked on the Facebook team, which developed and published React. Now I work not on Facebook, but in a small startup, so I can speak from the point of view of my current position, and not Facebook.
All software is built on a specific technology stack, and you need to understand this stack in order to create an application. The main reason why the React ecosystem seems insurmountable is because it is constantly explained in the wrong order.
You must study in this order, not missing anything and not learning two things in parallel :
You don't need it all to be productive with React. Proceed to the next step if you have a problem that it solves.
Also, there are several themes in the React community that are “super-modern practices” (“bleeding edge”). These topics are interesting, but it's difficult to understand them, they are less popular than the topics above, and are not needed to develop most applications:
There is a misconception that to start working with React, you need a huge toolkit. But it is not. In the official documentation you will find a copy-paste HTML template , which is sufficient to save in the
I also think that the easiest way to learn React is the official tutorial .
Study
Most of the components, libraries, and tools in the React ecosystem are available as
For a certain number of technical reasons, using
Examples of JavaScript collectors are
Worth remembering:
In addition to JSX (which you learned in the React tutorial), you might have noticed some funny syntax in the examples. This is called ES6, the latest version of JavaScript, which you may still be unfamiliar with. Due to the novelty, ES6 is not yet fully accessible in browsers, but your collector may translate it into supported JavaScript after a certain setting.
You do not need to know ES6 to develop at React , you can learn it along the way.
You could also hear talk about how ES6 classes are the preferred way to create React components. This is not true. Most people (including Facebook) use
“Single-page applications” (Single-page applications or SPA) is a modern fashion. These are web pages that are loaded once, and when a user clicks on a link or button, the JavaScript running on the page updates the address bar and content without reloading the entire page. The address bar is managed by the router .
The most popular router in the React react-router ecosystem. If you are developing a one-page application, use it, unless you have a good reason not to.
Do not use a router unless you are creating a single-page application . Most projects still start with small components within the existing large application.
Most likely, you heard about Flux. About him there is * a ton * of misinformation on the network.
A lot of people are trying to determine the data model and believe that for this they need to use Flux. This is the wrong way to embed Flux into your project. Flux should only be added after most components have been created.
Components React'a collected in a hierarchy. In most cases, your data model will also follow this hierarchy. In these situations, Flux does not bring much benefit. Sometimes, however, your data model is not hierarchical. If your React components get
You will understand when you need Flux. If you are not sure that you need him, then you do not need him.
If you decide to use Flux, the most popular and documented Flux library is Redux . There are also * many * alternatives, maybe you are tempted to try them, but my advice is to use the most popular one.
Pre-React, most people used SASS CSS preprocessors to reuse styles. React makes writing reusable components easy, also simplifying writing styles. Many of the community (including me) are experimenting to completely get rid of CSS.
For a number of reasons, this is a relatively crazy idea. It complicates writing media queries, and perhaps there are certain performance limitations. If you have just started working with React, write css-styles as you are used to.
As soon as you feel how React works, pay attention to alternative techniques. One of the most popular is BEM . I would recommend getting rid of the CSS preprocessor, since React provides a more flexible way to reuse styles (through reusing components) and your JavaScript collector can generate much more efficient style sheets for you ( OSCON report on this topic ). At the same time, React, like any other JavaScript library, can work just as well with any CSS preprocessor.
Server rendering is often called “universal” or “isomorphic” JS. This means that you can take your React components and render them to static HTML on the server. This speeds up the initial loading of the page, since the user does not need to wait until the entire JS is downloaded to see the UI, and React, in turn, can reuse the HTML generated on the server without rendering anything on the client again.
You will need server rendering if you think that the primary rendering of the page is too slow or to improve search engine rankings. Yes, Google indexes content rendered on the client, but as of January 2016, each dimension showed that it had a negative effect on ranking, potentially due to render performance.
Also, server rendering requires a large number of tools for the "correct" implementation. Since support for React components written without thinking about server rendering is generally transparent, it is recommended that you first write the application and then think about it. You will not have to rewrite all your components in case of a transition decision.
Immutable.js provides a set of data structures that help solve certain performance problems in React applications. This is an excellent library, and most likely you will often use it as your application grows, but it is absolutely not a requirement until you encounter performance problems.
These technologies help reduce the number of AJAX requests. They are still relatively experimental, so if you have no problems with too many AJAX requests, you do not need Relay or Falcor.
UPD. Slightly cleaned the translation of the first paragraph, thanks to vtambourine for editing
UPD2. Many minor grammatical corrections, thanks wiygn
- Initially, React was aimed at experts and early followers.
- Facebook opens the source code of only those products that it uses itself, i.e., not aimed at projects-less-than-Facebook
- A huge number of guides on React completely different complexity
Hereinafter, I assume that you are already familiar with HTML, CSS and JavaScript.
')
Why listen to me?
There are many conflicting tips on React. Why listen to me?
I worked on the Facebook team, which developed and published React. Now I work not on Facebook, but in a small startup, so I can speak from the point of view of my current position, and not Facebook.
How to approach the React ecosystem
All software is built on a specific technology stack, and you need to understand this stack in order to create an application. The main reason why the React ecosystem seems insurmountable is because it is constantly explained in the wrong order.
You must study in this order, not missing anything and not learning two things in parallel :
You don't need it all to be productive with React. Proceed to the next step if you have a problem that it solves.
Also, there are several themes in the React community that are “super-modern practices” (“bleeding edge”). These topics are interesting, but it's difficult to understand them, they are less popular than the topics above, and are not needed to develop most applications:
Examining React itself
There is a misconception that to start working with React, you need a huge toolkit. But it is not. In the official documentation you will find a copy-paste HTML template , which is sufficient to save in the
.html file and start working immediately. For this step, no toolkit is needed, and you should not be taken for it until you feel comfortable with the basics of React.I also think that the easiest way to learn React is the official tutorial .
Study npm
npm is the Node.js package manager and the most popular way for front-end developers and designers to share JavaScript code. It includes the CommonJS modular system and allows you to install command-line tools written by JavaScript. Read this article to understand why and how CommonJS used, or the CommonJS Spec Wiki for more information about the CommonJS API.Most of the components, libraries, and tools in the React ecosystem are available as
CommonJS modules and installed using npm .Exploring JavaScript Collectors
For a certain number of technical reasons, using
CommonJS modules (that is, just npm ) is not natively possible in the browser. You will need a JavaScript “bundler” to build these modules into .js files, which can then be included in the page with the <script> .Examples of JavaScript collectors are
webpack and browserify . Both of them are a good choice, but I prefer the webpack , as it has a specific set of features that simplify the development of large applications. Since the documentation may seem confusing, I have a quick start template , and I wrote a how-to guide on the webpack for more complex cases.Worth remembering:
CommonJS uses the require() function to import modules, which is why some users start thinking that this is something related to the require.js library. For a certain number of technical reasons, I advise avoiding require.js . This selection is not popular in React environment.ES6 study
In addition to JSX (which you learned in the React tutorial), you might have noticed some funny syntax in the examples. This is called ES6, the latest version of JavaScript, which you may still be unfamiliar with. Due to the novelty, ES6 is not yet fully accessible in browsers, but your collector may translate it into supported JavaScript after a certain setting.
You do not need to know ES6 to develop at React , you can learn it along the way.
You could also hear talk about how ES6 classes are the preferred way to create React components. This is not true. Most people (including Facebook) use
React.createClass() .Learning routing
“Single-page applications” (Single-page applications or SPA) is a modern fashion. These are web pages that are loaded once, and when a user clicks on a link or button, the JavaScript running on the page updates the address bar and content without reloading the entire page. The address bar is managed by the router .
The most popular router in the React react-router ecosystem. If you are developing a one-page application, use it, unless you have a good reason not to.
Do not use a router unless you are creating a single-page application . Most projects still start with small components within the existing large application.
Study flux
Most likely, you heard about Flux. About him there is * a ton * of misinformation on the network.
A lot of people are trying to determine the data model and believe that for this they need to use Flux. This is the wrong way to embed Flux into your project. Flux should only be added after most components have been created.
Components React'a collected in a hierarchy. In most cases, your data model will also follow this hierarchy. In these situations, Flux does not bring much benefit. Sometimes, however, your data model is not hierarchical. If your React components get
props that seem to be "external", or you have a number of components that are starting to become very complex, you may want to take a closer look at Flux.You will understand when you need Flux. If you are not sure that you need him, then you do not need him.
If you decide to use Flux, the most popular and documented Flux library is Redux . There are also * many * alternatives, maybe you are tempted to try them, but my advice is to use the most popular one.
Studying Inline Styles
Pre-React, most people used SASS CSS preprocessors to reuse styles. React makes writing reusable components easy, also simplifying writing styles. Many of the community (including me) are experimenting to completely get rid of CSS.
For a number of reasons, this is a relatively crazy idea. It complicates writing media queries, and perhaps there are certain performance limitations. If you have just started working with React, write css-styles as you are used to.
As soon as you feel how React works, pay attention to alternative techniques. One of the most popular is BEM . I would recommend getting rid of the CSS preprocessor, since React provides a more flexible way to reuse styles (through reusing components) and your JavaScript collector can generate much more efficient style sheets for you ( OSCON report on this topic ). At the same time, React, like any other JavaScript library, can work just as well with any CSS preprocessor.
Exploring the server side render
Server rendering is often called “universal” or “isomorphic” JS. This means that you can take your React components and render them to static HTML on the server. This speeds up the initial loading of the page, since the user does not need to wait until the entire JS is downloaded to see the UI, and React, in turn, can reuse the HTML generated on the server without rendering anything on the client again.
You will need server rendering if you think that the primary rendering of the page is too slow or to improve search engine rankings. Yes, Google indexes content rendered on the client, but as of January 2016, each dimension showed that it had a negative effect on ranking, potentially due to render performance.
Also, server rendering requires a large number of tools for the "correct" implementation. Since support for React components written without thinking about server rendering is generally transparent, it is recommended that you first write the application and then think about it. You will not have to rewrite all your components in case of a transition decision.
Learning Immutable.js
Immutable.js provides a set of data structures that help solve certain performance problems in React applications. This is an excellent library, and most likely you will often use it as your application grows, but it is absolutely not a requirement until you encounter performance problems.
Exploring Relay, Falcor, etc.
These technologies help reduce the number of AJAX requests. They are still relatively experimental, so if you have no problems with too many AJAX requests, you do not need Relay or Falcor.
UPD. Slightly cleaned the translation of the first paragraph, thanks to vtambourine for editing
UPD2. Many minor grammatical corrections, thanks wiygn
Source: https://habr.com/ru/post/275227/
All Articles