In this post I will give you my roadmap which helped me to learn React. This post is primarily for people who are completely new to JavaScript/React world and need guidelines where to start.

Before learning anything new - framework, library or programming language it’s better to break things into the most important modules and take each module at a time. It’s actually nothing new if you went to school or college or took online courses. It’s the basic learning process. But when we are learning on our own we tend to forget that and start jumping from topic to topic or take the most exciting topic at a time without learning fundamentals. Like, for example, going straight to React without good JavaScript fundamentals. This kind of process leaves a lot of gaps in our learning path which we have to fill in later. Or, in the worst case, we do not fill them at all. To avoid it and to make our learning consistent, it’s better to make a plan and stick to it.

React Roadmap

  1. JavaScript. Before moving to React you should know JavaScript pretty well, not just how to create the variable. If you don’t know JavaScript the good place to start is Mozilla Developer Network JavaScript section. Also, there are great books for free online, like book series by Kyle Simpson “You Don’t Know JS” or another one highly recommended “Eloquent JavaScript” written by Marijn Haverbeke. When you have a good grip on how JavaScript works you could move on to the next module.

  2. ES6. If you have knowledge gaps in ES6 this is the good time to fill them in. The most important things to learn here are arrow functions, destructuring, let/const, import and classes. There are tons of material to learn ES6 in this GitHub repository.

  3. Functional programming (FP). The reason I separated this from the main JavaScript module is that React emphasizes functional programming over object-oriented and it will be very helpful for you to learn this topic deeply or at least be familiar with the paradigm. Also, it will be easy later on as a lot of React material assume an understanding of the FP. There is the awesome resource list on GitHub on Functional programming topic. Check the books and articles section.

  4. NPM. It is the package manager for JavaScript and you have to be comfortable to use it. It will be your daily tool, you will have to install and manage various packages with React. Also, you should be comfortable using terminal or similar alternatives depending on your OS. This is the well-written guide on NPM.org that will help you get started.

  5. React. Now you can start digging into React. My advice is keep it simple as in this stage it’s important to understand core React concepts, like components, props, state and etc. This is a good time to experiment and build small apps and see what React can do. Start with the official React documentation.

  6. Webpack. Now it’s a good time to start learning Webpack. For people who don’t know what this tool does, Webpack is a build tool that allows us to take all of our assets and turn them into a production-ready bundle. And it is the de facto way to build React apps. Currently, it is the most popular build tool in the front-end world. To get started check the official documentation.

    If you wonder why I listed Webpack almost at the end, the reason is quite simple. For new people who are starting to learning React it’s overwhelming to take all at once and it’s better to spend time digging in the React core concepts and only then configuring build tools.

  7. MobX / Redux. Both are responsible for state management. In my opinion, it’s better to start working with MobX for simpler UI’s as it’s less complicated. Just don’t skip Redux since it has some important features that MobX doesn’t have and it’s important to understand what those features are before you decide what’s right for your app/project. To learn MobX start with the official documentation. Same goes for Redux, you can find the official documentation here.

Conclusion

After you complete all modules you should be comfortable to build awesome apps with React. Also, you will acquire one of the most important skills in the Frond End world.

If you are wondering what to learn next I have few suggestions for you. You can try out next.js or learn GraphQL. Both will be useful for your React projects.

For now, that’s it and thank you for reading.