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
The first step in learning React is actually somewhat of a step backwards.
- 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
- 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
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.
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.
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.
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.
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)
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.
React is hard. You shouldn't have to figure it out yourself.
I've put everything I know about React into a single course, to help you reach your goals in record time:
It’s the one course I wish I had when I started learning React.
Click below to try the React Bootcamp for yourself: