In this guide, I'm going to show you the most valuable resources and tips that I believe will help you learn React faster. You'll also save a lot of precious time and energy in the process.
- Arrays (and the .map() function)
- Functions and arrow functions
- Scopes and closures
- Promises and async-await syntax.
- Basic error handling
You will encounter and learn more React concepts as you start building your own projects and looking at the code of others.
Looking for a Tutorial? Use the New React Docs
When you first begin your React learning path, your first question will likely be: "where do I learn all the React-related information I need?" You might be asking whether you should watch courses on YouTube or purchase a course on Udemy.
While there are great and extensive React courses across many different sites, the first and primary site you should rely on is the official React documentation site: reactjs.org.
What's very special about learning React in 2023 versus learning it in previous years is that in the past year, the React documentation that has been completely updated and improved. It is entirely up-to-date with the current React version, has tons of practical examples, and even interactive code sandboxes so that you can start learning react in the browser without having to create projects on your own machine.
If you ever want to spin up a new React project, you can do it very quickly in the browser using the link react.new. This will create a CodeSandbox with a complete React application with which you can mess around. It's much faster and easier to do that creating a project on your own computer.
You can find the new React documentation at beta.reactjs.org. In due time, you will be able to find it simply on reactjs.org.
Another big reason to use the new React documentation is that it is very beginner-friendly and will, in my opinion, allow you to learn concepts much faster than you would otherwise. If you have been intimidated to reading technical documentation in the past, I think you will be pleasantly surprised.
You Don't Need to Learn Class Components
If you are wondering whether you need to learn class components in 2023, you do not.
Class components are still a part of React and they are still used in production code in a number of instances (such as error boundaries). But just be aware that you do not need to learn them in order to be skilled at React.
In fact, I've rarely encountered them unless I'm looking at an older code base. Most of them have been migrated over to function components and React hooks already.
Do Yourself a Favor and Learn React Query
Any serious application requires data. Often the data that you need will exist outside your application, so you will need a strategy to fetch it and use in your project.
When you get to the point of fetching data I would highly recommend that you learn a library called React Query.
You can install React Query through the npm package @tanstack/react-query.
React Query has become the go-to library for fetching and managing external data in React applications.
What's the benefit of using React Query? On top of being a library so many React developers and companies are now familiar with and rely upon, it will benefit you greatly to learn React Query because it is arguably the most powerful way for you to fetch and manage external data in your React applications.
The greatest benefit of using React Query comes from that fact that is gives you a cache (a store) that lets you hold on to the result of each query, so you can "save" the data that you've fetched. Plus it has many tools to update that cache exactly the way you want.
It also features relevant information about the status of every query you make such as whether it is loading or it resulted in an error.
I would learn React Query after you are comfortable manually fetching data using tools like the Fetch API or Axios with the useEffect hook. Once you are, you will see the benefit of using React Query across all of your React projects.
You Don't Need to Learn Redux
If you've tried to learn React in years past, you might have gotten the impression that to learn React, you ultimately had to learn another library called Redux.
Redux is a library that helps us manage state in our React applications. You can think of state as any data that might change in a React app. Redux enables us to manage one piece of state (like, is our user logged in) across every part of our React application.
Redux is no longer required to learn like it was in years past. The first reason for this is the release of the React Context API. In many cases, React developers used Redux to just pass data around their application's components. This is a job that React Context can do for us.
Additionally, if you need to change or update state in many different parts of your app (which is a different requirement that simply reading your state), there are many competitors to Redux. Unlike Redux, these libraries do not require that you learn new concepts, such as reducers, actions, and so on.
Some of these newer, "lighter" state management libraries include:
Once you get past the basics of React and begin building slightly larger applications beyond the standard todo app, you will understand the need for having a state management library. Redux is still a great library, but first look to a library with a simpler API such as Zustand.
Don't Necessarily Reach for Create React App
Once you are at the point of creating a React project on your own that lives on your computer, know that there are many ways of doing this.
Web development in general is moving more and more online – not every React project has to be made on your computer. In many cases you can spin up a brand new project in the browser using tools like CodeSandbox or StackBlitz entirely free of charge.
There will be a point, however, where you will need or want to create a React project on your local machine. It is easy to reach for a tool like Create React App, which allows you to make a React project by running a single command.
Create React App is still a great tool to make React projects. Just like with Redux, new alternatives have emerged give you all the conveniences of Create React, but in a smaller, often faster package.
The benefit of using Vite the over Create React App is that it gives you a much faster development server.
To develop and make changes to your app, it must run on a development server. Create React Appl, by comparison, can take a relatively long time to start up and respond to changes in code that you make (this is called hot reloading). Vite provides a much faster experience in addition to requiring far fewer dependencies.
Another great alternative to Create React App is Next.js. Next is technically a React framework, which comes with many conveniences to make development a lot easier. It comes with its own router and data fetching tools, to name a couple.
The benefit of using a framework like Next.js is that you simply have to make fewer decisions when it comes to building your project. You need to pick far fewer dependencies upon which your project relies. Most everything that you need to build your React app comes built in to Next.js
With that being said, Next operates quite differently than normal React projects due to the fact that it's server-rendered by default. This can comes with its own problems and potential pitfalls to avoid. But if you're interested in building serious, production-ready React projects, Next is arguably the best choice.
Want the All-in-one Way to Learn React?
If you want to jump in to learning React, you might not know what to do next, even after this article. And that's totally understandable.
React is a real challenge, which is why I've made a complete resource to help make learning React easy – the React Bootcamp. It will give you all the React training you need to become an effective React developer in just a matter of weeks, not months.
Just click the link below to get started. Enjoy!