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
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.
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.
Other important development skills
After learning the basics of web development, you need to focus on some other concepts and tools.
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.
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.
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.
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.
Following is the list of build tools, package managers, and task runners that you should be familiar with.
⇒ Node Package Manager (NPM) or yarn
⇒ 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.
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
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.
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
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 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.
⇒ Redux saga
⇒ Redux observable
⇒ Helpers (rematch and reselect)
Moreover, you should also learn the react-redux hooks such useDispatch and useSelector.
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 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.
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
⇒ Error boundaries
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.
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.
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.
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.
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.
Learning React is one thing and using it to develop something is another. Once your React concepts are cleared, you need to practice React.
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.
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.
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 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
⇒ Mobile development
- React native
⇒ Desktop development
- React native windows
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.