In this article, I share a list of the recommended resources that have helped me learn React.
Assumed Knowledge
Before starting with these resources you should have some experience with JavaScript. In particular, you should feel comfortable using ES6 syntax (eg. arrow functions and classes). Trying these resources before you are familiar with JavaScript will just frustrate you. If you feel that you are lacking some (or a lot of) knowledge I would recommend having a look at Learn JavaScript with these resources.
Getting started
Yes, React is taking over front-end development. The question is why. - Samer Buna
- A nice introduction to React
Tutorial: Intro To React - Official Documentation
- Learn React by example from the official documentation.
- Make sure you do the improvements at the end! You are welcome to compare your solutions with mine.
Hello World - Official Documentation
- Implement the example in Thinking in React on your own to see where your gaps are and then read the documentation from the beginning.
- Come back to the advanced guide once you have a bit more practice with React.
Practice
Once you have completed the resources above I would recommend practising the concepts by starting a project of your own. It can be something similar to My Movies, which is a project I started for the same reason.
Testing
It can be a little overwhelming learning how to test before you have had any practice but that is not a reason to forget them altogether! A nice place to get started is the official Jest documentation, which is very well written.
React Testing Examples
- This can be used to get started or for some inspiration
- Examples are in Enzyme and React Testing Library
Why I Never Use Shallow Rendering - Kent C. Dodds
- This article helped reaffirm my opinions on front end testing
Additional resources
Once you start feeling more comfortable with React I would recommend having a look at the following resources.
React Status newsletter
- Helps me keep up to date with React with weekly updates
Syntax Podcast - Wes Bos and Scott Tolinski
- Helps me to keep up to date with what’s happening in web development with some episodes specific to React
TypeScript React Starter
- This reference helped me get going with Typescript
The 100% correct way to structure a React app (or why there’s no such thing) - David Gilbertson
- This article helped reaffirm my opinions on structuring a React app
React code style guide - Daniel Jauch on CSS-Tricks
- Some handy tips on styling your React code
Timeline:
- July 2018: First published
- May 2019: Added Testing
- June 2019: Updated Testing and Additional Resources
