How to learn React in 2021
It has been more than 4 years since I started using profesionally React. When I look back, I wish I had approached the learning process differently. In this blog post, I will share my experience and advices for everyone just starting his journey into this great library.
You don’t know JS
Functional light JS
2. Read the documentation before you jump to all the available online materials
Many people(myself included) tend to jump to all the available tutorials before reading the documentation of the what they want to learn. This is valid for every framework and library nowadays and I think that this is wrong. React has a relatively simple API but there are important concepts to undersatnd. The documentation might not contain all the answers but it’s maintained by the very developers who have worked on the library, so they probably know more than all the people creating courses online. Never underestimate the documentations. This rule is valid for every software product, not only React.
3. Pick carefully your learning sources
I have seen plenty of videos online that teach the basics but don’t necessarily show good practices. Also, many free sources, especially on Youtube, are not up to date, so they might miss some of the new features and trends, like React Hooks and functional components. The Youtube channels that I recommend for learning React are Ben Awad‘s and Kent Dodds‘. The latter also has a great paid beginner-to-advanced course, which I strongly recommend. You can check it out at https://epicreact.dev/learn.
4. Make sure you have basic Webpack knowledge
Some people might argue this point but I think that it’s essential to understand how Webpack and npm work(the basics would suffise). Esentially, Webpack is a bundler which packs your applications and makes it deliverable. The default dev server is handled by Webpack as well.
Probably you will be using create-react-app for bootstraping your project which handles all the setup for you but there are times when manual configuration is required. Make sure you go through Webpack’s documentation and play a bit with it. You can try to set up React from scratch.
5. Use linters
Linters can be very annoying at first but their advantages far exceed the unconveniences. They will point your potential mistakes and provide you with suggestions for code improvements. Of course, most of them are quite opinionated but this will help you quickly adopt good practices and achieve consistency in your code. Setting it up initially might be painful but it’s worth it. For example, if you are learning React Hooks, I strongly recommend you using
6. Practice, practice, practice
This is the most obvious point but also the most important one. Make sure you experiment and create things on your own. One of the best advantages that React has over its alternatives, is its big ecosystem and community. Try to create some applications and gradually add more and more features to them, then refactor, extract reusable components, improve performance. Experiment with different approaches for styling, state management, component composition etc . Don’t just blindly follow all the online tutorials, make sure you go beyond them and always challenge yourself. I will never go wrong with this. When you feel confident enough, you can move to React Native, Next.js, Gatsby and other great products from it’s ecosystem.
You can also check out other articles about React on DevRecipes.