Learning React in 2021/2022

Learning React in 2021/2022

Learning React in 2021/2022
October 3, 2021

Introduction

Today, React.js is one of the most popular and widely used front-end web technology. It is a JavaScript library used to build user interfaces. There are several reasons why React is preferred over other frontend frameworks. These include high performance, easy to learn and use, flexibility, and strong community support. 

Learning React in 2021/2022 is a great decision. React’s popularity is increasing year by year. React is comparatively easier to learn but to become a professional and successful React developer, you need to learn more than React. In simple words, only React is not enough. 

To become a professional React frontend developer, you need to follow a proper roadmap. In this article, we will create a roadmap for React developers to learn React from starting in 2021/2022.

Basics of web development

Before jumping to React, every React developer needs to understand the basics of web development properly. HTML, CSS, and JavaScript are the core technologies of the World Wide Web (WWW) and if you have even a pinch of web development knowledge, you may know what these terms are. 

HTML

The very first term you need to understand is HTML. Hypertext Markup Sheet, commonly known as HTML, is considered the skeleton or the basic structure of a web application. 

Out of all the three core technologies, HTML is the easiest to learn. HTML5 is the last major version of HTML. So to start your career as a React developer in 2021/2022, learn HTML5

CSS

HTML only creates a structure but modern websites are attractive and appealing. Cascading Style Sheets, commonly known as CSS describes the presentation of an HTML document.

Modern websites are incomplete without CSS because no one wants a dull, unappealing website. So CSS is one of the most essential skills of a React developer. But unfortunately, many beginners skip CSS without learning it properly. 

CSS is vast. You need to grab its basics properly. Moreover, you need to learn CSS concepts such as grid system, flexbox, and very importantly, how to make a responsive website. 

JavaScript

JavaScript is probably the most important and toughest of all three core technologies. Most of the websites are using JavaScript, thus making it the primary language of modern front-end web development. 

React uses JSX, which is an extension of JavaScript. So, learning JavaScript should be your top priority before jumping to React.

First, you need to learn the basic programming concepts. Then, you need to learn the modern features of JavaScript. The language has changed a lot over the years. The ES6 and upper versions have introduced new features. Make sure you understand all those major modern features of JavaScript

Other important development skills

After learning the basics of web development, you need to focus on some other concepts and tools. 

DSA

A professional developer doesn’t matter frontend or backend is always expected to understand the DSA,  meaning, data structures, and algorithms

Building something is one thing and building something with better efficiency is another. Having the knowledge of DSA ensures that you know how to develop efficiently. 

GIT

When you become a professional React developer, you won’t be working alone. You would need to record what you are doing, so you and your teammates can track your work. 

GIT is the most popular version control system and every professional developer should know how to use GIT

Terminal

Using a terminal is not a big deal but you should be familiar with it and how to use its commands. 

Starting with React

When your basics are clear and you understand GIT and other necessary development skills, then it is time to move to React.js.

Understand React 

Never jump directly to the coding part, first understand what React exactly is. Try to understand how React works behind the scenes and why in the first place people are using React. Try to understand virtual DOM and one-way data binding. 

Build tools 

Following is the list of build tools, package managers, and task runners that you should be familiar with.

Node Package Manager (NPM) or yarn

Webpack

npm scripts

React CLI, JSX, and components 

After understanding React and build tools, learn how to create a React app using react CLI. Then, the most important part is JSX. You need to learn what JSX is and how to create components using it. React has two types of components - class and functional. Learn both! 

State and props 

A React component is made up of state and props. The state is controlled within the component while props are passed from a parent component to a child component. When you are going to work on a real-time project, you are probably going to use the state and props more than anything else. So it is very important to learn these concepts properly.

Lifecycle methods 

React provides several in-built lifecycle methods such as componentDidMount, componentDidUpdate, and shouldComponentUpdate. These methods are supported only in class components but still, you should be familiar with them

Routing 

A web application is incomplete without routing. In React, the React router library is generally used for routing. Understand the basics of routing and how to implement it in a React application.

Advanced React concepts

After clearing the basic concepts, jump to the advanced React concepts. The following are very important because modern React applications are not complete without them. So give them extra attention. 

React hooks 

Earlier, React was almost class-based because state and lifecycle methods were not supported by functional components. But since the introduction of React hooks, everything is changing. 

Functional components are being preferred over class components because of React hooks. So a React developer in 2021/2022 needs to learn and understand React hooks. 

Some of the commonly used React hooks you should learn properly are

useState

useEffect

useContext

useReducer

State management

State in React should be managed efficiently. In React, the state can be managed in a class component using the setState() method and in functional components using the useState() hook. Understand both of these state management ways properly. Another way is using the context API.

But as the application grows, it becomes difficult to manage the state. So the third-party libraries such as redux and mobx are used for state management. 

Redux

Redux is the most popular state management library. Every React developer is expected to know what redux is and how it is used with React. So learn what is redux and how to implement it. 

As mentioned above, a React developer needs to have knowledge of redux. But redux itself is a JavaScript library. So there are many concepts that a react developer should be familiar with. Following is the list of some of the important concepts that you should learn.

Redux-thunk

Redux saga

Redux observable

⇒ Helpers (rematch and reselect)

Moreover, you should also learn the react-redux hooks such useDispatch and useSelector

HTTP requests 

In React, HTTP requests are handled using the fetch API or Axios. While the fetch API is in-built, Axios is a third-party library. Though Axios is used more commonly in React for handling HTTP requests, you should be familiar with the fetch API as well.

 

Forms 

Forms are commonly used on the web for registrations, login, feedback, etc. They should be attractive and better performing. In React, creating a basic working form is easy but when the forms are huge, it becomes tough to create and maintain them. So form helpers are created for React developers. 

The most popular form helper is formik. It is basically a JavaScript library. Another commonly used form help is the redux form. It is also a JavaScript library that manages the state of a form in React. So it is recommended to learn at least one or both of them.

Other important concepts 

Following is the list of other concepts that you should pay attention to. 

⇒ Render props

⇒ Higher-order components

⇒ Lifting the state up

⇒ Custom hooks

⇒ Lists and keys

⇒ Refs

⇒ Error boundaries

Styling

As mentioned earlier in this article. no website is complete without CSS. After learning the basics of CSS, you need to learn additional libraries and concepts to become a professional React frontend developer. 

It is always expected from a React developer to have knowledge of at least one CSS framework. Bootstrap is one of the most popular CSS frameworks. Apart from Bootstrap, a React developer should also be familiar with UI libraries such as MUI (previously Material-UI) and Prime React

Other important concepts related to styling are CSS preprocessors such as Sass. Also, “styled-components” is an emerging way of using CSS in JavaScript

Testing

As a developer, you might not be expected to be a testing expert but in the modern developer, a developer should be familiar with how the testing is done. 

Unit testing

Out of all the different types of testing, a React developer is expected to understand unit testing properly. You should be familiar with at least one of the React unit testing libraries. Some of the popular unit testing libraries are Jest, Enzyme, React Testing Library, and Mocha.

E2E testing 

End to End testing is another important type of testing that a React developer should be familiar with. Selenium is the most popular E2E testing framework. 

Integration testing 

Knowledge of integration testing is always a plus point. If you have time, try to learn at least one integration testing library. Karma is the most popular integration testing library with React.

Practice

Learning React is one thing and using it to develop something is another. Once your React concepts are cleared, you need to practice React

Starting

Start by designing a simple React application. For example, create a form in which a user can input different values. Once the button is clicked, the values are displayed below. Another simple project is a calculator or a counter. 

Go with hooks and other concepts

Next, try to create an application by using hooks. React hooks are very important. So try to use as many hooks as you can. 

Try to use routing, different styles, and form helpers. Moreover, also try to write testing using any of the testing libraries.

Implement redux

As mentioned earlier, Redux is an essential part of React. Create an application and implement redux in it. You can think of an application with multiple components sharing one state. So use Redux to share the state among these components. 

Go big

Once your learning is done and you have practiced enough, try to create something big using React and Redux such as an e-commerce website. Observe the websites such as Amazon to take an idea and then start building your big React application. Try to implement every concept you learned during your React journey. 

After React

After you are done with React, you can move further if you want. Though this section is not compulsory, it will be great for your career. 

Following is the list of technologies that a React developer can go for once he/she is done with React.

⇒ Server-side rendering

  1. Next.js
  2. After.js

⇒ Mobile development

  1. React native
  2. Cordova

⇒ Desktop development

  1. Electron
  2. React native windows

Final thoughts

React journey is not going to be short or easy. There is so much in React. So that's why we created a roadmap for React beginners. 

Learning React will take time. You need to clear your basics before jumping to React and when you are in React, you need to understand the React basics before jumping to advanced topics. 

Practice is the key to success. So after learning React, practice as much as you can. Create different projects and use everything you learned. 

Once you are done with React, go for other platforms such as mobile or desktop development. You can also choose server-side rendering technologies such as Next.js. 


Happy learning! 

Posted on:

October 3, 2021

in

Programming

category.

Related posts

From blog

View Blog

Do you have a project in mind

Let's achieve success together