Disclaimer: The purpose of this post is not to teach you React (not that I believe a single blog post can actually teach you React) but to help you teach yourself React.
It can be difficult to learn something from scratch as a beginner. You might get lost among the sea of resources available on the web as it can get confusing to know where to start?
I have compiled a list of free resources that have helped me learn React as well as get better at it throughout the years.
This list will be helpful for those who already have a knowledge of programming fundamentals as well as knowledge of JavaScript, HTML and CSS and wish to start learning React.
Where to start?
If you like watching video tutorials
If your learning style involves watching videos while you code along with them, the best place to start would be a YouTube tutorial playlist/course or enrolling in a course (free or paid) on platforms such as Udemy, Coursera, or Udacity.
Some of my recommendations are —
- Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks
- Learn React JS - Full Course for Beginners - Tutorial 2019
If don't like watching video tutorials
I am one of those people who lose concentration after 10 minutes into a video. If you also don't like watching video tutorials and would much rather learn at your own pace, spending less time on things you already understand and more on those that are new to you, I would suggest starting with Codecademy.
The Learn React course on Codecademy helps you develop a strong understanding of the fundamental concepts of React using code-along interactive lessons. It is free, but if you wish to earn a certificate, you can pay for the Pro plan.
W3School also has wonderful resources for learning React with several examples accompanying each concept.
Tutorials are not enough
Tutorials will help you get a basic understanding of how React applications are structured, what the different building blocks are, and developing an understanding of the essential concepts.
But when you are building real-life applications, you might not have someone to guide you along while you write each and every line of code, that is why building personal projects is a very important part of the learning process.
Building a Project
The next step from here should be building a small React Application using the concepts you remember from before.
At this point, I will suggest referring to the official React documentation and solidifying your fundamentals. The React documentation is incredibly rich and has guides for beginner through advanced concepts.
Some ideas for personal projects can be —
- Personal portfolio
- An online store
- Productivity App
Diving further
Now that you have a pretty good idea of how React works, it's time to learn the best practices of writing React Code and understand the whole React ecosystem better —
- React Router
- State Management
- Webpack
- Server Side Rendering
- Unit Testing
- and much more.
Contributing to Open Source
The best way to learn from more experienced people than you, if you don't have a job yet or if don't use React at your workplace, would be to contribute to open source projects.
You can pick a component library of your choice from npm and start solving the existing bugs/issues on GitHub.
Or you can even look for a project on GitHub that uses React and start contributing to it. A lot of open source projects have beginner-friendly issues labeled so that would be a good place to begin!
Writing Blogs
According to the Feynman Learning Technique:
- Choose a concept you want to learn about.
- Pretend you are teaching it to a student in grade 6.
- Identify gaps in your explanation
- Go back to the source material, to better understand it.
Pick a concept you find difficult to grasp, write a blog about it. I am pretty sure by the end, you will have a much better understanding of it.
Where to go from here?
- Read Dan Abramov's blog — Overreacted
- Read the Advance React Guides
- Attend/Watch talks in React Conferences
- Keep learning!
