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.
1. Make sure you know well JavaScript and basic functional programming concepts
React is very flexible and it takes full advantage of the cool new features that JavaScript provides. Unlike other frameworks/libraries, it does not add many levels of complex abstraction on the top it, rather, it gives the feeling of extending it. Therefore, knowing well JavaScript and some basic functional programming principles is essential.
You will be suprised by the amount of people who jump to the library before knowing the basics of the language they are going to use. It’s especially valid for people coming from more sophisticated technologies like .NET, Java, Python etc. Many developers tend to undersestimate JavaScript and end up critizing the technologies for their design. You will never do wrong if you invest time understanding the basics and even its more advanced concepts.
There are plenty of free sources even for advanced JS topics. Here is 2 free books that I recommend to everyone starting his journey into the JavaScript world:
You don’t know JS
Functional light JS
Also, make sure to check the Fun Fun Function Youtube channel, where there are nice educational videos about JavaScript and basic functional programming.
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 eslint-plugin-react-hooks plugin.
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.
Good luck!