The React Roadmap 10 Steps to Become a React Developer in 2021

Learning how to become a confident React developer takes hard work, but not knowing the right way to become one can make it much harder.

Learning React doesn't have to be a chore.

Let's break down the 10 steps that will make your time and effort becoming a React developer easier and more fun. All while delivering consistent, career-changing results along the way.

If you want to watch this article as an interactive video (along with some extra bonuses), be sure to check out the 3-day React email course.

Let's get started!

Step 1. Commit to 4-5 hours of coding per weekday

The most important factor in deciding how soon you will be able to learn React is time and how you use it.

You need to keep a regular schedule of coding throughout the week. Without this, it will be almost impossible to reach your goals in coding on time. The truth is most people will never excel at React because they cannot to dedicate enough time and focus to coding.

If you plan on coding every day from nine to five once youre on the job you need to have a similar schedule for yourself while learning. Ideally, you should spend around four to five hours of focused coding every weekday.

Why exactly four to five hours? I'll cover that in step 3.

Step 2. Spend your time doing focused coding

What do I mean by focused coding? Focused coding is coding without distraction. In a separate quiet space, where you can sit upright at your computer, and focus entirely on the process of coding.

During this time, much of what youre doing will not be 100% coding. As you code, youll be reading documentation, reading an article, taking notes, et cetera.

If youre focused on your work, four to five hours should be all that you need. The idea of coding 12 hours a day is not realistic, especially if you are getting started. If you can spend more time and you do feel focused, go ahead. But its very hard to code and consume new information while youre already tired.

Step 3. Use the Pomodoro technique for optimal time management

There is a special technique that will help you make the most out of that four to five hours. Its called the Pomodoro technique. Its an approach thats made for optimal productivity and it consists of working in 25 minute periods at a time.

You start your timer and after each period or pomodoro, you take a five minute break. During this break, get up from your chair. Have something to drink. Adjust your focus away from your computer or your phone. In short, take a real mental and physical break from what youre doing.

Taking breaks with purpose and giving your brain and body a rest will help you make the most of your time. Instead of trying to work for hours on end. And after every fourth 25 minute period or pomodoro, you take a longer 15 minute break.

If you do 8-10 pomodoros of solid work, you will have a very productive day, guaranteed. I use this technique every day I code and it is the best technique to ensure consistent results day-in and day-out. Consistent results are the only thing that is going to make the difference between learning React in months versus a year or more.

There are many free pomodoro timers that you can find online. Ill link to a couple of them below:

• Be Focused - Pomodoro Timer for Mac
• Online Pomodoro Timer - Pomofocus

Step 4. Read through ReactJS.org from front to back

Weve talked how to work and the amount of time to spend working, but how do you approach learning the skills needed to be a React developer?

Many developers would recommend diving right into whatever you can find. To look through various websites, articles, YouTube videos, and ebooks. In fact, theres one best place to go to first of all to start working with and learning React. And that is reactjs.org.

Go through their documentation from front to back. Its the best guide that you will find online and every working React developer relies upon it. Its guaranteed to be up to date, will get you familiar with the concepts you need, and best of all, give you a lot of examples to work with. As you read through the site, take the code examples they provide and run them yourself.

How do you run the React code you find? Instead of trying to create a React application on your own computer, create a React app in the browser. To create a new react app in two seconds, go to react.new. It will create a brand new React app in your browser that you can start working with. Then start experimenting with examples from the React.js documentation. On your own, type in the code from the guides, run it and see what works and what doesnt.

Instead of reading a book and being told what code does, run the code yourself. See what happens when you try different things. To test the boundaries of React and what it can do is the best thing possible to understand how it works.

Step 5. Start small. Build small apps and learn to add features as you go

Once you have gone through the documentation at reactjs.org, start building small things. Try to build a todo application from scratch. If not a todo application, a basic CRUD application, a note-taking application, etc. Make a complete app, that consists of simple, clearly divisible parts.

As you build your project, you'll encounter the questions all React developers ask themselves throughout their app planning:

• How do I go about making this app? Are there any extra packages do I need besides React?
• What basic features do I need to build out?
• What components will I need and how are they organized?
• Where will my app data live?

Sign up for a Github account if you dont have one already. Not only to save your React projects to your Github for easy access, but it will allow you to search for how other people built similar apps themselves.

Once you have something small youve built, add more features. If youre making a todo app, you might ask:

• How can I search through todos?
• How can I save my todos between visits?
• How do I add authentication to my todo app (to make it for only authenticated users)?
• How do I add different pages to my app?
• How do I style it with a component library like Material UI?

Add new features based around what you want to learn. The possibilities are endless and will drive your learning forward.

Step 6. Asking questions is essential. Always ask questions.

Be aware that its fine to search the web when you have a question or when you're stuck in your coding. Its what all React developers do by searching sites like StackOverflow or Github. Asking your own questions is essential.

Make sure to keep track the questions you ask. Whenever I have a problem with a React project that I need to solve, I write it down and search for the answer. When I find the solution to it, I make sure to record the answer and bookmark it in my browser for future reference.

To record your questions and the answers you find for them is essential. If you have a problem once, I can almost guarantee that you will run into the same problem sometime in the future. Recording your questions and answers will not only serve as a great resource, but also save you large amounts of time and frustration.

Step 7. Actively coding is your key to success

This approach weve been talking about is very different than reading a book or article.

Reading or consuming information alone is called passive learning and is much slower. Actively coding yourself is active learning.

Active learning is what will drive you to code more, ask questions, fail more often in the short term, but succeed and grow faster in the long term.

Step 8. Build apps similar the ones you use daily (and know well)

After building your todo app, ask yourself can I make a small version of Twitter? Can I build a small version of Facebook or some other social network? Can I build a small version of Instagram?

Try to build something more other apps that you use and are familiar with. Youll be able to see that as time goes on, these applications all share similar features. Being able to see common features among apps and develop them yourself is what will take you from an average to an impressive, self-directed developer.

Step 9. Deploy your best work and put it on your resume for employers

And finally, after building larger and larger applications, make sure to put all these projects on your resume. To do that, youll need to deploy them to the web first.

Deploying React apps is very simple. You need only learn how to use basic hosting services like Netlify or Heroku which are free and as simple as can be.

Include links to each project on your resume as well as a description of the app and the technologies you used to build it. Doing so will immediately show the value that you can bring to potential employers.

If youre interested in becoming an independent app developer, try turning one of these projects into an actual business. Youd be surprised how many people are able to do that. They learn React, start building projects, and turn one of them into an app or service which they sell for a profit.

Step 10. Have fun!

I'll be the first to admit it: learning React can be very frustrating. Even once you become a professional developer, it will still be very frustrating at times.

There will be problems you come across as you become a skilled React developer, but none that can't be overcome.

My final advice to you is to become involved with fun, engaging React projects that you want to build or be a part of. You will not only learn more easily, but discover what you like most about being a React developer. All of which will give you confidence and help take you where you want to be in your career.

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.

Join thousands of developers learning how to become a React pro in record time:

Click here to be notified when it opens