I’ve been using React since 2017 and thought I would make a short list of how I would approach learning React now if I had to do it over again. At the end of the article, I also point you to some helpful tools to get up and moving quickly.
Note: In this guide I assume you comfortable programming in modern JavaScript (ES6 or ES7). If that’s not the case, I would recommend learning modern Javascript using this book or this tutorial before starting to learn React.
1. Dive into JSX powered components
React originally gained popularity largely due to how easy it made to build reactive UI components. Instead of having to manually update parts of the application relying on the same data, these components automatically update as based on internal or caller state changes. These changes can be passed down via props to child components, allowing them to also re-render if necessary.
JSX is HTML-ish syntax with the full power of Javascript used inline by React to generate HTML code. I was skeptical when I first heard about it — "another unnecessary layer of complexity," I thought. However, getting started with it was a breeze and after using it for a while, I can say it is a crucial ingredient to making React as powerful as it is.
Learning how React components are built takes practice and doing it well will take seeing how an experienced React developer goes about it and then doing it yourself. The goal here is just to become aware of the different parts of components and JSX syntax. For that, I recommend Facebook’s React tutorial. Very rarely does a project’s website provide the best introductory tutorial but the React team has proven an exception to the rule here.
Facebook React Getting Started Guide
2. Know your useEffect
When you first see it, the useEffect hook can be an enigma. I have seen people new to React default to putting everything in useEffect when a simple function would work. The easiest way to explain it is useEffect should handle "side effects" or things that should happen as a result of another action outside the control of the component. One example would be updating a calculated state value when props change or calculating some initial state value when the component first renders. The official React documentation has a great primer on the best ways to leverage useEffect in your application.
3. Get comfortable with Redux
Any expert React developer might cringe to see Redux, a state management tool, mentioned in this list since it is usually learned after someone has a good understanding of React. I would tend to agree except these video tutorials by Dan Abrimov, the author of Redux are superb. I learned more about JavaScript, JSX and React from these tutorials than any other resource I could find. They are also a good introduction to the way React components should be constructed and used within an application.
Dan uses JSBin to teach the course and instead of worrying about typing them all out yourself while trying to watch the videos, Justin Wu has created a different JSBin for each video so you can reference it as you go along.
Of course there are times when Redux is overkill or unnecessary and Dan Abrimov agrees. This article explaining when you should use Redux, and when you shouldn’t is required reading.
Two Great Tools
Finally, two tools that I have come to love as I dived into React:
-
VS Code
An open source IDE with ES6 syntax highlighting, suggestions and project views. -
create-react-app
A command line tool to get you up and running fast without learning webpack, babel, or other tooling. Just run create-react-app and you’re up and ready to roll.
Thanks for reading!
Andrew