DEV Community

Cover image for How To Learn React in 2021: The 7 Skills You Need To Know
Reed Barger
Reed Barger

Posted on • Updated on • Originally published at

How To Learn React in 2021: The 7 Skills You Need To Know

You want to learn React—the most in-demand JavaScript library in the world. But what steps do you need to take to get there? Let's walk through the seven skills you should learn to become a professional React developer.

As you're piecing together your React learning path, it's easy to feel overwhelmed and say, "It's impossible to learn it all. There are too many things I need to learn!"

To be successful with React, don't attempt to learn everything. Focus on learning the right things.

Let's break down the seven key skills that you need to focus on to build impressive applications and become an in-demand React developer:

Want the complete guide to become a React pro? Take the 3-day React email course

Step 1: Become confident with the core fundamentals of HTML, CSS, and JavaScript

The first step in learning React is actually somewhat of a step backwards.

The building blocks of the web and every single webpage are HTML, CSS, and JavaScript. Any good React developer should know how to use them. React builds upon them to help you create apps that run on the web.

If you’ve built something with HTML, CSS and JavaScript already, you’re in a good place. For example, if you’ve built a complete landing page or a small website.

Out of the three technologies, React is most connected with JavaScript. React is JavaScript, with some added features. For that reason, you’ll need to have solid JavaScript skills.

What JavaScript concepts should you know for React?

  • Basic data structures: variables, objects, and arrays
  • Array methods and working with array data: .map(), .filter(), and .reduce()
  • Be very familiar with functions and a little bit with classes
  • Asynchronous JavaScript: promises, making HTTP requests with Fetch API, async/await syntax can help
  • The DOM: learn to create, select and modify HTML elements as well as their attributes
  • Object and array destructuring are helpful for working with data

Many developers claim that you should know "ES6/ES7/ES8/ESNext JavaScript" (in other words, the latest JavaScript features) to better learn React. Knowing more JavaScript can help, but new features can also serve as a distraction for new learners.

First, become confident with the JavaScript concepts I've listed above by building some small projects that require JavaScript. After that, you can take a look at some newer features of the language.

Step 2: Learn React fundamentals and React hooks

Once you’re confident with JavaScript, you’re ready to learn React and its core concepts.

These fundamentals are all React-specific and they exist to help us build applications with React, using patterns that JavaScript itself does not have.

What React fundamentals do you need to know?

  • How to structure JSX elements (and how it differs from plain HTML)
  • How to render (show) JSX elements and how to show or hide elements based on certain conditions
  • How to split JSX into components and how to reuse and organize those components to make our app interface.
  • How to pass data (+ JSX elements and components) to components using props and when to do so
  • How to store and update data within components using state and how to "lift state up" to other components
  • How to use event data in React and handle events from onClick, onChange, and onSubmit events (i.e. events from buttons, inputs, and forms)

As a 7-year old library, React’s features have changed overtime. A question I’m often asked is what should you learn first: the old or the new syntax? At the end of 2018, React received a large update that included features called React Hooks.

Hooks were a great improvement. They made React apps simpler, more powerful, and allow us to write less code. What’s important for you to know is the five core React hooks.

What five React Hooks do you need to know most of all?

  • useState: to store and manage data within individual components
  • useEffect: to perform actions like HTTP requests or working with a browser API
  • useRef: to reference JSX elements
  • useContext: to access data from React Context to share data among components more easily [than passing props]
  • useReducer: to store and manage data across multiple components

There are more hooks than these 5, but the others are not needed as often. So yes, you should learn the latest React features. Jump into using hooks right away. They will be the basis of every React app you make.

Step 3: Learn to fetch data from both REST and GraphQL APIs

A React app is the frontend of a complete application. In every application, you will likely have both a React frontend, which the user interacts with as well as a backend that our React code interacts with. The backend is where we get our data from and do other things like authenticate our users.

There are two ways of working with data from a backend. The standard way of getting data is from what’s called a REST API. REST APIs **are the most common form of API. And the newer way is from what’s called a **GraphQL API.

You’ll encounter both types of API in your work, so become familiar with using React to interact with both.

Step 4: Learn to style your React apps with a component library or utility class library

Every React app needs styling for its appearance. One choice is to use plain CSS. You can write your own styles and put them in a separate style sheet.

But besides CSS, many React developers use what’s known as a component library for easier styling. A component library gives us reusable components that have their own pre-made styles. The most popular component library for React is Material UI. There are many others you can choose from.

Developers also use tools that provide pre-made class names, called utility class libraries. Unlike a component library, a utility class library comes with pre-made classes to style your elements. You can style your app by applying classnames to each element. This removes the need to write any styles yourself. The most popular utility class library is Tailwind CSS.

You’ll encounter both of these as a developer, so become familiar with both a component library and a utility class library.

Step 5: Manage state in React with React context

What is state management? It’s the process of deciding where to locate data and how to work with it across our app. To manage state across your app’s components, use React Context.

React Context is a tool that’s built into the core React library and allows us to pass data across our app's components without using props. It helps us solve the problem of prop-drilling which involves passing props (data) down to components that are deeply nested into one another. With React Context, we place a value on the context we create and then access it using the useContext() React hook.

What about Redux? Redux is a popular library for managing state in React apps. It is a far more complex tool than you need for most apps you’ll build. While Redux is still relied upon for very large applications, React Context will be enough for any app you make.

Plus you can get many benefits of Redux, by combining React Hooks and React Context. This is a great advantage as compared to learning an extra library.

Step 6: Learn a React router. In particular, react-router-dom

What is a router? Any website we visit has many pages we can browse by going forward or backward in our browser’s history. To create these different pages or routes in React, we need need to use what’s called a router. React itself does not come with its own router, so we’re going to need to use a third party library, one called react-router-dom.

react-router-dom is necessary for creating pages in our app, as well as navigating the user around each page. It lets us create links to different pages of our app and navigate them or redirect them to other pages if we need.

What features of react-router-dom do you need to know?

  • How to create app routes using the , , and components
  • How to navigate users to different pages using the component and programmatically using the useHistory() hook
  • How to create dynamic routes using the path prop (i.e. ) and get the path's value using the useParams() hook
  • How to redirect users from protected content using the component (see number 7)

Step 7: Learn patterns for authentication in React

Authenticated users are people who have signed in to use our app. And we want to give those users access to different things. For that reason, authentication goes hand in hand with routing. This is because authenticated users should be able to see certain pages that unauthenticated users cannot.

What do you need to know about authentication as a React developer? There is one main thing. You should learn how to show certain content to authenticated users and hide that content from unauthenticated ones.

In review, these are all the core skills you need to have as a React developer, capable of building complete applications and working as a hired frontend developer.

Beyond these 7 skills, note that there are many that can deepen your understanding as a developer. For example, learning more about browsers, HTTP, and APIs, to name a few. But if you follow all these steps, you’ll have a solid understanding of React and be able to build applications of any scale.

Enjoy this post? Join The React Bootcamp

The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.

Gain the insider information hundreds of developers have already used to master React, find their dream jobs, and take control of their future:

The React Bootcamp
Click here to be notified when it opens

Discussion (6)

empz profile image
Emiliano Parizzi

Step 5: Do not go for Redux just because is popular. In 2021 we have way better options for server data (which is very different than UI state). Use react-query or swr for remote data. It's way simpler and better than Redux.
For UI state, local setState + context (abstracted inside a custom hook) is usually enough for most apps.

johnkazer profile image
John Kazer

Thanks for highlighting the key issues.

Step 2 is huge. Can you point us to a resource on component design thinking? This for me is the biggest barrier to engaging with react.

rahuldevashish profile image
Rahul Devashish

Well explained. Thank you Barger

brandonbawe profile image
Brandon Bawe

Great post!! I have subscribe for the email course. I hope it will be worthwhile.

beginnercoder17 profile image
BeginnerCoder17 • Edited on

I saw this on FCC lol

codr profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Ilya Nevolin

Great post! But know that it's not mandatory to use React/Vue/Angular as I explain here.