Categories
Roadmaps

React Frontend Developer Roadmap

A lot of people these days are trying to learn React due to its popularity and a lot of companies are looking for React Developers. It’s also a great solution to easily develop modern front-end web applications as it’s all based on JavaScript. So if you have good knowledge of JavaScript and ES6+ features, learning React can be much easier for you.

Which is they the intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused.

So let’s get right into it.

Basics

Web fundamentals

Before moving towards learning any skills. You should know a little bit about web fundamentals such as HTTP, HTTPS, FTP, browsers, DNS and domain names, hosting, and so on. Just have an idea of how the web works in general.

Learning HTML

Html is essential to get started in frontend development, knowing what is a tag, element, attribute, what kind of events there are in the HTML element is helpful, especially, it helps you easily understand documentations.

Some of the must-know elements: h1-h6, p, b, img, video, i, span, div, form, input, select, a, header, main, footer, section .

  • How form works, understanding of action, and method.
  • What are the attributes, and corresponding attributes of each element.

CSS

How styling works, how to link CSS to HTML, what are selectors. Different types of selectors, — tag name, class, id. Inline, internal, external styling.

Must know properties: display, font-size, font-weight, position, cursor, line-height, margin, padding, border, transition, color, background, background-color, width, height, justify-content, align-items, overflow, min(max)-height, min(max)-width, border-radius, outline,

  • Understanding of how flex works, writing animation keyframes, media queries. Block vs inline elements.
  • What is pseudo-classes, different types of them: :hover, :focus, :link, :visited, :active, :first-child, :disabled, :last-child, :nth-child(n)
  • Pseudo-elements: ::after, ::before

JavaScript

JavaScript is different than HTML and CSS, it requires more logic. You should know, how to link JS file to HTML, how JS code works.

Here are some JavaScript features that you need to know before learning React:

  • Variables
  • let and const.
  • Loops
  • Conditional Operators
  • Functions
  • Methods
  • Arrow functions.
  • The destructuring assignment.
  • Higher-order functions, especially map, filter, and reduce.
  • ES6 Classes.
  • ES6 Modules.
  • The spread operator.
  • The ternary operator.

Intermediate

Learn NPM

You will also need to learn about some NPM basics that will allow you to install, update, and configure programs in the terminal for your React projects. So NPM is also recommended because you will need to use it on the React CLI.

You can also learn a web bundler such as Webpack or Parcel, but it’s optional because React has a tool called Create-React-App which already uses Webpack by default so you don’t have to use it on your own.

React

Now that you have learned and practiced all the basics that you need, it’s time to start with React. Try to have an understanding of how React works, things like the virtual DOM, and so on.

So you will have to learn the React basics first such as

  • JSX
  • Props
  • State
  • Lists and keys
  • Conditional rendering
  • Difference between Functional component vs Class component
  • State vs props
  • Lifecycle methods

JavaScript

At this point, you should know how to make API calls, how asynchronous code works. You should also know how JS works in the background, what are event loops.

  • Promises vs Callbacks
  • API calls with Axios
  • Closure
  • Context
  • Difference between var, let, and const
  • How object reference works

Advanced

React hooks

React hooks allow you to add awesome features and functionality to your functional components. There are a lot of hooks that you can use in React, here are some of them:

  • useState
  • useEffect
  • useRef
  • useReducer
  • useMemo
  • useContext, and so on.

You can also make your own custom hooks, so you need to learn about that too. Also, don’t forget to make some small projects while learning. That’s very important if you don’t want to fall into tutorial hell.

State management

State management is very important in React. You need to learn how to manage the complex state in your React applications.

In this situation, you will have to learn one of these state management tools:

  • State/ context API.
  • Redux.
  • MobX.

I would suggest Redux as there are a lot of courses that teach you about it and it’s very popular in the React community.

Form Helpers

In order to manage your forms state in React, you will need to use a form helper.

Here are some form helpers that you can use:

  • React hook form.
  • Formik.
  • Final form.

Type Checkers

JavaScript is a loosely typed language which means that it does not require a variable to be defined. As your application grows, you may find yourself dealing with type-related bugs. That’s why it’s good to use a type checker.

Here are some type checkers that you can use with React:

  • PropTypes.
  • TypeScript.
  • Flow.

React Routing

Routing is an important feature in any React application. It allows you to navigate in your single page application without refreshing the page, so it’s very useful and you should learn about it.

You can learn one of these React routers:

  • React Router.
  • Reach router.

There are a lot of courses and tutorials where you can learn about routing.

What more?

As you can see, there is a lot to learn as a React developer. We didn’t cover everything, but we took a look at the important tools that you need to know. However, I would always advise you to practice as much as you can because it’s the only way to become a good developer. It doesn’t matter how much you know if you don’t build your own projects.