How to Learn React in 2021

As a founder of HolyWeb, I do 20-30 interviews with developers weekly to hire them for our clients. Our core technology stack is React.js, Redux / Effector, Razzle. Let’s talk about some tools and key skills sets that a React developer should have to keep up with the industry to crack a job interview.

JavaScript First

React is built on JavaScript, so there is no escaping from learning how to code in JavaScript.

Very often, developers ask questions which show that they don't know the basics of JavaScript, while questions about the React ecosystem are much less frequent. Therefore, your best bet is to deepen your JavaScript knowledge before you go back to React.

Using State Manager

In React.js, there is no built-in StateManager. Redux library has been used for a long time as a standard, but its performance is not great. There is a lot of boilerplate code to write to have a complete setup and there are no controls for async behaviour and “side effects”.

Thank God, the State Manager population has grown ever since. The Redux team learned their lessons and launched the Redux Toolkit library that generated widespread acclaim from frontend developers.

Redux Toolkit is a library on top of Redux. Redux Toolkit allows you to achieve the same goals as Redux, but with Redux Toolkit, you will have to write much less code than with Redux. In addition, the Redux Toolkit uses Immer.js internally, therefore you don’t need to think about data immutability, i.e., destructure, creating new state objects in the reducers each time.

Another rather promising library is MobX. The business logic of MobX is different from Redux. And then there is Effector, which was created by some guys from one of the CIS countries. 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 Effector.

React Hooks

React Hooks were released in React 16.8 version, and they are here to stay. If it's the first time you hear about Hooks, check the official react site for more info.

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 ones.

React Hooks might be the question that make-or-break your interview result, even if all the information can be found on the website. Before using hooks for real projects, take a closer look at them to see how they work. As you practice essential skills, you can build a deeper understanding of the technology.

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

When the hooks first appeared, we at HolyWeb experimented on them, wrote new components just to check what would come of it. When everything worked out well, we used them further, adding new features. If you haven't used React Hooks yet, I would recommend trying it out. It can be a fast and easy tool to describe the necessary logic, making the code cleaner and easier to read.

When people start, they often ask, “Does using hooks mean I have to rewrite the whole project?” I would not say that performance may increase or fall significantly if you rewrite it. If you find the hooks useful, try to write some new features of your project on them. You may have time to rewrite the old pieces later.

The example below shows you how to use the hooks.

Let's start with creating 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>
 );
}

As you can see, the code on the hooks is cleaner and more readable.

Server-Side Rendering

There are several popular SSR solutions available now. In our first SSR-based projects, we had a customized solution. However, we are moving to ready-made ones as we learn more about SSR. Each of them has its pros and cons. For instance, in one of our ongoing projects, we use Razzle, and in 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 you need to be using Node.js as the server environment. The fact that Next.js tells you what architecture to use and how to build applications can be a bit of a downside, but it’s rather a matter of personal preferences.

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

If you have made up your mind to use SSR, don’t miss the following products. They offer everything you need to get the most hands-on experience:

Most Common Mistakes When Learning React

Skipping the lines and not reading long documentation is one of the biggest mistakes you could make as a developer. For example, one of our developers admitted that he did not read the documentation carefully enough and started using useCallback everywhere when it was not necessary to do so. It was only later that he realized this after he started rereading the specs.

  1. In many threads, people ask questions that have already been answered in the guidelines/specs. Make sure to read them carefully, the devil really is in the detail.
  2. In addition to the library itself, it would be great to know HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. You never know what comes in handy when you land a job.
  3. It’s all about how fast you learn. You need to constantly be mastering new competencies including soft skills, instead of relying on the skills you already have under your belt.

Do you have what it takes? Share your experience in the comments and join the discussion.