Knowledge of JavaScript

React is built on the basis of JavaScript. First of all, people who want to learn React need to understand how well they know JavaScript itself.

Very often, developers ask questions that show that they don't know the basics of JavaScript. While questions about the React ecosystem arise much less frequently. Therefore, first of all, we recommend that you deepen your knowledge of JavaScript, and then return to React.

Using State Manager

In React.js there is no built-in StateManager. As a standard, the Redux library has been used for a long time, but it does not perform this role very well — when working with it, you have to write a lot of boilerplate code, there are no controls for asynchronous behavior and side effects.

So other State Managers began to appear. The Redux developers took into account their shortcomings and presented the Redux Toolkit library, which was well received by the frontend developers.

Redux Toolkit-a library on top of Redux. It allows you to achieve the same thing as Redux, but with Redux Toolkit you will have to write much less code than with Redux. In addition, the Redux Toolkit uses internally Immer.js Therefore, you do not need to think about data immutability, i.e. use destructurization, creating new state objects in the reducers each time.

Another rather promising library is MobX. The business logic of MobX is different from Redux. Do not forget about Effector, which was created by people from the CIS.

To date, these three State Managers are the most popular. All three libraries do their job very well, but we usually use either the Redux Toolkit or the Effector.

React Hooks

React Hooks came to visit us with the 16.8 version and will stay with us for a long time. If you are hearing about them now for the first time, then you should first read them in the official React documentation.

Hooks are just another way to describe the logic of your components. It allows you to add some features to functional components that were previously unique to class components.

Most people at the interview are floating on questions about hooks, although all the information is in the documentation. Anyone who wants to develop, you definitely need to at least see how they work, and with experience, you can understand the technology more deeply.

There are some restrictions on the use of hooks that distinguish them from normal functions. First of all, they can not be used in class components. Hooks cannot be called inside loops or conditions. This restriction is imposed by React itself in order to be able to track which hooks were called.

When the hooks first appeared, we at Holyweb experimented on them, wrote new components, and saw what would come of it. When everything worked out well, we used them further, wrote new features on them. For those who haven't used React Hooks yet, I would recommend trying it out — they make it very easy to describe the necessary logic, they make the code cleaner and more understandable.

Many people are concerned about the question of whether to rewrite the project in a new way because there are hooks. I would not say that performance will increase or fall significantly from such actions. If you like the hooks, then write new features of your project on them. You will always have time to rewrite the old pieces.

Let's look at the examples on the hooks.

Let's make a simple Counter.

Here is the code using the class component:

class App extends React.Component {
 state = {
   counter: 0
 };
 onIncrement = () => {
   this.setState((state) => {
     return {
       counter: state.counter + 1
     }
   });
 };
 onDecriment = () => {
   this.setState((state) => {
     return {
       counter: state.counter - 1
     }
   });
 };
 render() {
   return (
     <div>
       <button onClick={this.onIncrement}>+</button>
       <button onClick={this.onDecriment}>-</button>
       <div>Counter: {this.state.counter}</div>
     </div>
   );
 }
}

And here is the code using the functional component and hooks:

function App () {
 const [counter, toggleCounter] = React.useState(0)
 const onIncrement = () => {
   toggleCounter(counter => counter + 1)
 }
 const onDecriment = () => {
   toggleCounter(counter => counter - 1)
 }
 return (
   <div>
     <button onClick={onIncrement}>+</button>
     <button onClick={onDecriment}>-</button>
     <div>Counter: {counter}</div>
   </div>
 );
}

You can make sure that the code on the hooks is cleaner and clearer.

Server-Side Rendering

Now there are several popular SSR solutions. On our first projects, where we used SSR, we had a completely custom solution. Over time, we began to study and use ready-made solutions. Each of them has its pros and cons. For example, on one of the current projects, we use Razzle, and on the other — Next.js.

Next.js is a popular lightweight framework for static and server-side applications that use React. It includes ready-made styling and routing solutions and assumes that you are using Node.js as the server environment. What Next doesn't quite like is that in some cases it dictates the architecture and how to build applications. But this is a matter of taste and personal preferences.

Razzle is a server-side rendering framework that is more flexible than Next.js but does not require mandatory configuration.

If you are seriously thinking about SSR, we recommend that you carefully study the following products and try to get the most practical experience:

• js (React-based);
• js (Vue-based);
• Gatsby (React-based);
• Gridsome (Vue-based).

Common mistakes in learning React

The main mistake of most developers is the inattentive reading of the documentation. For example, one of our developers admitted that he did not read the documentation well and started using useCallback everywhere when it was not necessary to do so. Only later did he realize this when he started rereading the documentation.

The questions that people ask in chats and profile communities are often already answered in the documentation — you just need to read it carefully.

In addition to the library itself, the specialist must have knowledge of such technologies like HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. Skills with other tools may also come in handy, but this depends on the vacancy.

But the main thing is not the hard skills that a person has already mastered, but how well he can learn. If the developer has this skill, it will not be difficult for him to prepare for the interview, come to the company and learn everything that is necessary in the course of work.

Original post in Russian