Web Development is a fascinating area to explore, learn about, and understand.
As a learner, you have many
frameworks that can help you develop projects for the web. It may even become tricky to pick one and get started at times.
But when it comes to learning
ReactJS, it shouldn't be a difficult decision to make.
React Native is equally popular among mobile application developers.
In this article, we will look at a complete roadmap to learn ReactJS. If you are thinking of starting ReactJS and looking to get a step-by-step approach, this article is for you. Also, if you are a ReactJS developer who is wondering what advanced topics to tackle next, give this article a read.
Why do you need a roadmap to learn React?
Good question. Think about it this way. You are in an unknown city, and you have to travel from one place to another. What you need most is a map or guide to help with your travels.
Learning something new doesn't have to be very different. If you have a map or guide that lets you know "if you first learn A, next attempt to learn B. Then you will find C much easier", things will be much smoother for you.
It may also help you decide on alternative routes, how far to go at a stretch, and when to pause.
In this guide, we will break things down into phases and build the roadmap to learn ReactJS. You will also find resources to look into (optionally) as we explore the roadmap further.
👀 Keep in mind that you may feel a bit overwhelmed looking at this roadmap the first time. But don't worry. It is not as challenging as it looks. I have also specified some resources to help you learn at an incredible pace.
I have created this roadmap based on my 6+ years of working experience with ReactJS. So in case you disagree with certain things, I am okay with that.
As ReactJS is very popular, you may find some resemblance here with many other suggested roadmaps out there. But, they aren't exactly the same.
Breaking the roadmap down into phases
We will break the entire roadmap into four phases. They will be:
- What to learn before React
- What to learn as a beginner to React
- How to move from beginner to intermediate React developer
- How to move from intermediate to advanced React developer
What to Learn Before You Learn React
🔵 Git Version Control
Git is a version control tool that helps you manage your source code better. It doesn't have a direct relationship with ReactJS. But it helps if you learn its basic uses so you can take advantage of the development ecosystem.
Git is easy to learn when you focus on a few basic things like,
- How to initiate a repository
- How to stage/unstage your changes
- How to commit your changes to the repo
- How to push to the remote repository
- How to resolve merge conflicts?
Git, you will also need to know how to use a Git-based repository management service like
GitHub. You can learn all about Git and GitHub in this YouTube playlist: Git and GitHub Playlist.
HTML provides the structure of a web page. You will use the HTML structure in a new syntax called JSX when you code in ReactJS.
You don't need to know everything about HTML. But you should have a basic knowledge of the most-used tags and semantics. You can check out this HTML crash course for beginners and this HTML basics guide to get started.
You can also check out freeCodeCamp's newly-updated Responsive Web Design certification to get started with HTML.
When it comes to CSS, the scope is sky-high. However, focus on the topics I have mentioned in this Tweet:
You can also check out freeCodeCamp's Responsive Web Design certification to learn CSS.
- Variable Declarations (let and const)
- Template Literals
- Functions & Arrow Functions
- Object Destructuring
- Spread and Rest Operators
- Module Import and Export
- A bit of Promises and Async Programming
🔵 NPM Ecosystem
You should be aware of how to use
yarn, and node version manager (nvm) to help you run and test a ReactJs app locally.
Knowing how they work at a high level is always helpful to debug your environment in case you run into issues. Here is a resource to help you get started with all these quickly: Node.js install, npm, yarn, nvm.
🔵 How to Deploy, Host, and Make your App Public:
It won't be much fun if you have created something cool with ReactJS and cannot showcase it to the world. So, you should know how to deploy the app and make it available for public access.
Netlify make it easy to deploy your React app with a few clicks. Here's a tutorial, for example, on deploying your React app to Netlify.
What to Learn as a Beginner to React
Let's now focus on what you need to learn at the minimum to start enjoying React in practice. These are foundational pieces, so make sure to give enough time and hands-on effort to truly understand the concepts.
There is a famous saying called "Think in React". These fundamental concepts should help you to develop that "Think in React" mindset.
🟡 Understand What React Is
You should understand what is so special about ReactJs. It is a declarative, component-based user interface library.
What does all this mean? Check out this video that explains all these concepts clearly.
🟡 Learn How to Set Up your Development Environment
There are multiple ways to set up a development environment for ReactJs. Minimally, you can point to the CDN distribution from your script file.
This approach is okay to get started but not sustainable. As a beginner, you may not want to spend too much time in Babel or Webpack related configurations for your projects.
IMO, the most intelligent and quickest way to get started with the ReactJS development environment is by using the Create React App. You can follow the easy steps on its homepage to get it running in a few minutes.
🟡 Learn about JSX
ReactJS allows the user interface logic to couple with rendering logic, events, handling state changes, and more. This coupling is to encourage the practices of building self-contained components.
JSX is a syntax that looks like
HTML but also has the power of
Note that you can write a ReactJS app without using JSX syntax – but the development experience will not be as good.
Here's a great resource to help you learn about JSX in React.
🟡 Learn about React Components
Components are the heart of ReactJs applications. We create independent components that are reusable, self-contained, and isolated. A component is supposed to perform one job correctly. Multiple components come together to build the application.
🟡 State in React
State is the data private to your component. We do not share states across components. The "state" of your component that you use to render information and modify information.
You can check out this in-depth guide to state in React to get a better understanding of how it works.
🟡 Props in React
In real-world programming, you will need the components to interact with each other. States are private to a component, but you need to pass the data between components. That's where
Props come into the picture. Note that props are read-only.
Here's a quick introductory tutorial about how to use props in React. And here's a helpful cheatsheet that shares 10 props patterns you should know.
Finally, here's a beginner-friendly article about props and state in React in case you need to clear any basics up.
🟡 Lists and Keys in React
We use list to render a list of items in a React component. It is a very common task to list users, TODO items, and other things. We use the
map() function to iterate over the list and render the results.
keys help identify what item from the list has changed to inform React to re-render. ReactJS gives a warning if you forget to mention the keys for a list.
🟡 Life Cycle Methods in React
We discussed that the "state" is a component's private matter. State can be dynamic and might need modifications. We also need to perform resource cleanups when components are destroyed. ReactJs provides various life-cycle methods to detect the phases and take action.
If you are just getting started with ReactJS, you should understand life cycle management for functional components. You can do this using the in-built hooks like
useEffect, and so on.
And if you need an overall beginner's guide to solidify these concepts, here's an in-depth React Handbook to get you started.
How to Move from Beginner to Intermediate React Developer
Let's now understand what it takes to move from a beginner to intermediate level with React.
In this phase, you will start focusing on the completeness of the application. At the end of this phase, you will be able to take up most ReactJs challenges and enjoy accomplishing them.
🟣 Styling in React
We all want our applications to look fresh and aesthetically pleasing. You can use plain old CSS to style your ReactJS app. Or you can use Sass or other CSS-driven component libraries like
MUI. The choice is entirely yours.
As an example, here's a tutorial about styling your React apps with TailwindCSS.
🟣 Form Handling in React
Handling forms is an essential requirement in web applications. You need to understand how to handle form elements in the ReactJS way.
🟣 Data Handling in React
This is a crucial part of application development. You need to learn how to use the
fetch API or libraries like
axios to interact with APIs and handle data in your component.
🟣 Reconciliation Process in React
ReactJS uses the Virtual DOM and diffing algorithm to decide when and what to update in the actual DOM for the rendering. Knowing how it works under the hood will help you with debugging.
🟣 React Hooks
You hopefully learned a bit about some in-built hooks like
useEffect when you learn about the life-cycle. There are other useful built-in hooks you need to learn with use-cases. Make sure you don't ignore them.
Here's a fun project-based guide on how to learn React Hooks by building a Paint app.
🟣 Custom React Hooks
Custom hooks helps in reusability. You must look for opportunities to extract out component logic to reusable hooks. The code becomes clean and modular with the usage of custom hooks.
Here's a step-by-step guide on how to build your own custom React Hooks.
🟣 Context in React
In React applications, we pass data from parent to child components. It is one-directional and top-down. If too many components are deep down, the data (props) must pass through many components.
Also, if you need to share some values between components that are not part of a hierarchy, you need a mechanism. That's when you can make use of the
How to Move from Intermediate to Advanced React Developer
In this phase, you will deal with a few expert-level topics. You need to know these concepts only when you're working on more extensive application development using ReactJS.
Note that you can learn each of these concepts whenever you're ready. Also, you don't have to learn them all.
🟢 Lazy Loading in React
ReactJS supports code splitting. It is a way to lazy load what you need by the current user. It also avoids producing a large build bundle. The
dynamic import feature is the best way to include code-splitting in a React app.
Here's a basic tutorial on lazy loading in React to get you started.
🟢 Portals in React
You may have to use Portals when dealing with modals, dialogs, or tooltips with better event handling. It is supported out-of-the-box in ReactJS.
🟢 State Management in React
In a larger application, you must share information between components. At times, the default support of
Context may not suffice.
In these cases, you may need a state management solution like
MobX in these cases. But again, you can decide whether (or not) you'll need them.
🟢 Routing in React
Routing is required for multi-page applications. It is also helpful to bookmark a particular page or traverse back-and-forth in the application using the browser's back button.
React Router is the most popular routing solution that helps with declarative routing.
Here's an in-depth guide to learning React Router that'll get you started with all the basics.
🟢 Theming in React
Theming is a modern feature in web apps. We should give users the choice of what theme they want – like light or dark – to use to help them feel comfortable when using your site or app.
You can even create your custom themes in some applications and apply them. There are several ways you can theme a React app. Select the one that matches the best with your application's CSS stack.
🟢 Patterns in React
There are various patterns you can use as solutions to common problems in React. Over time, ReactJS developers have found patterns they could use to help them stop reinventing the wheel.
Learning these patterns will help you considerably. Check out this site to find the most used ReactJS Patterns documented with examples.
🟢 Anti-Patterns in React
Anti-Patterns are the practices that you should avoid using in the ReactJS applications. You should learn them along with the helpful patterns you should use.
Just keep in mind that learning advanced React concepts doesn't stop here. You can continue to learn about accessibility, test frameworks, and many more advanced concepts as needed.
So, How Do You Get Started with React?
That's the billion-dollar question! There are plenty of great resources (books, articles, videos) to help you with the above topics, many of which are linked in each section. So, you can find the ones that suit you the best.
You can also check out these resources:
- ReactJS Official Documentation
- freeCodeCamp's front-end development library course
- After spending many years with ReactJS, I have started creating a YouTube video series that aims to cover all the aspects we discussed in the article. Please SUBSCRIBE if you find it helpful.
It's 2022 – Should I Still Learn React?
Another frequently asked question – and the answer is YES. React is ever-growing, and the community is also growing quickly. There is no reason to stay back.
Also, React is a base for many other popular frameworks like
GatsbyJS, and very recently
I am not comparing React with the Angular, Vue, or Svelte frameworks. They are all excellent in their ways, like how ReactJS is an excellent library for user interface development.
Before We End...
I hope you found the roadmap helpful. Please plan to get enough practice as you start walking through the path. My DMs are open on
See you soon with my next article. Until then, please take care of yourself, and stay happy.