Introduction to the React Roadmap

Start here

We know! You want to learn React but it’s really really hard.

• Where do I begin?
• Who should I learn from?
• What must I know beforehand?

We get it, it’s overwhelming. Further, the ocean of resources on the web to explaining best practices and latest trends only makes it worse.

In 2023, React is the most popular Frontend framework and almost every front end related job lists it down as a requirement. That’s why you want to learn it and that’s why you’re here. In fact, we recommend you learn it! We think it’s the most powerful framework of choice and even we use it at Showwcase (this whole page was built with React 😉). If you can learn it, you will be valuable in the tech industry.

Build as you learn 🚀

As you start going through this roadmap, you will see some examples of React code sprinkled throughout it. You might feel the urge to create something of your own. If that is the case then we have a community event for you where you can scratch that itch 😛

You can join the ReactPlay challenge that is live throughout the month of February 2023 and build alongside other developers who are passionate about React. If is completely free and you even stand a chance to win some cool prizes. Head over here for more info.

What is a Roadmap?

We, at Showwcase have created this Roadmap as a step-by-step guide for anyone wanting to get started with development in React but not knowing where to start. Literally, it’s a step-by-step recipe that if you follow and complete all steps, will take you on your way to becoming a Pro.

This React Roadmap is a great starting point for anyone looking to learn React and become a better front end developer. We cover all the basics of React, then go into intermediate concepts like React Hooks, advanced topics like API design, and finally a bunch of projects that you can go off and start building yourselves.

At the end of this, you will gain a strong understanding of React and know where to go to find additional resources if you need help with a particular topic.

Also! Note that we’re constantly updating this Roadmap to include more resources, content, and projects. So expect this to get better over time. Our goal is to give you everything you need to master React.

Who created this Roadmap?

This Roadmap was created by Kapeel Kokane and Tapas Adhikary with contributions and edits from the team at Showwcase.

Kapeel Kokane

Kapeel Kokane | @kokaneka | Showwcase

Kapeel Kokane is a Senior Frontend Developer at Microsoft with 8+ years of experience in web and mobile application development. He is passionate about teaching and believes learning should be enjoyable and stimulating. His superpower is to explain difficult concepts in a simple way using my his unique visual style. He has a strong interest in React and its related technologies and has worked on various projects using them. Previously, he was a technical author at LogRocket, and in 2022, joined Showwcase as a Community Manager and is committed to elevating the developer communities around him.

Tapas Adhikary

Tapas Adhikary | @atapas398 | Showwcase

Tapas Adhikary is Head of Content at Showwcase. He has 17+ years of experience in Software Development and User Interface Engineering, bringing forth expertise in the design, development, and delivery of software systems. He is also founder of the Open Source project ReactPlay - the Open Source platform that helps you learn ReactJS faster - with over 2 contributors and 600+ stars on Github.

Many people know him as a passionate content creator who has written over 250 articles on his own blog and many other freelancing engagements like freeCodeCamp, CSS-Tricks, Hashnode, and many more. He has reached thousands of people around the world with his content and has helped many of them land jobs in tech. Always up for knowledge sharing with tips and tricks on Twitter and recently launched YouTube channel.

The Prerequisites

This Roadmap will assume you have some level of knowledge with JavaScript. So if you don’t already know that please check out the JavaScript Roadmap here. As you should know, React heavily relies on a good understanding of JavaScript in order to be used effectively.

So, to remind you:

Learn JavaScript before React.

Learn JavaScript before React.

Learn JavaScript before React.

Learn JavaScript before React.

Learn JavaScript before React.

😆

How to Use the React Roadmap

Honestly, there are no rules!

We’ve tried to structure this as ordered as possible. Which means you can get started from the first show in the first series and work your way up to the last one. At which point, we believe that you will be ready to tackle the basic as well as the advanced projects.

However, if you already have a good grasp on a concept, feel free to skip ahead to the next section.

After completing the roadmap

Once you are done with the theoretical part of the roadmap, you can move onto the projects. We’ve given you a short prompt and some UX inspirations from Frontend mentor or from Dribble. Also, some part have been intentionally left open ended so that you can exercise your creative muscle and also get into the mindset of a Frontend developer by asking the right questions.

Resources

At the end of each show, we’ve curated 2-3 resources from the internet that we feel are the best fir for you to get the required additional information. Do check out the resources mentioned in each show and make sure you read those completely. We’ve intentionally left out some details from the show for the sake of brevity and also because the resource already does a great job of explaining the same. We did not want to be redundant.

Let’s go 🚀

We’ve put our heart and soul into the making of this roadmap thinking that it might benefit someone who is on the fence about getting into React development waiting for the right resources. We hope this is that right resource.

Happy learning!