Here's a list of resources for learning React.
In general, I find the best way to learn something is to have a project to try it out with. These resources and tutorials are a good way to support your own project-based learning.
Intro to React (link)
An official tutorial from the React team that walks you from zero to building a simple game. It does a great job of introducing all the core React concepts in simple language.
Mosh's React Crash Course 2018 (youtube)
One of the best introductions. The video explains React conceptually, takes good baby steps, and walks you through a real working example. Start here.
Learn React (link)
Another "from-the-ground-up" walkthrought. Some of these lessons are subscription only, but all the important ones are all there. I like how he uses CodeSandbox to teach React, since it removes the complexity of the command line and build setups that plague many tutorials. If you're not familiar with the command-line or don't have a good text editor setup, I'd check that out.
The Beginners Guide to React (egghead.io)
This class moves more quickly than the other two, and gets into some advanced topics. But it does a good job at avoiding any "magic." All the work of React, Babel, and other tools are explained in detail.
A lot of people say "React is just javascript." It's more of a cybernetically-enhanced javascript, but it is still javascript at it's core, so it's important to know some basics like ES6 classes, the this keyword, and Array methods like map and filter. These links do a good "basics for react" summary:
Most tutorials advise you (and I'd agree) to continue using CSS classes (via the className) prop, and plain CSS to start. It's a lot easier that way. If your project was started with Create React App, you can import css files and they'll automatically be included.
Once you've learned a bit and are comfortable with React basics, you might be interested in other techniques, like inline styles or CSS-in-JS. The React docs on styling have a good set of links.
Once you're familiar with React basics and want to start building your own prototypes, these are some tools that can speed up that process
- Create React App, a command-line tool by Facebook to help with bootstrapping React applications
- Framer X, just need that beta invite o_o
- ianstormtaylor/react-values, a cool set of utilities for quickly implementing interactive elements like toggles, counters, and date pickers.
- The official React Documentation maintains a great list of tutorials and resources
- Reactiflux, a React community site, has a list with everything from basics to advanced guides on it
Some example code to look through and see how things are done:
The React world can be quite technically complex. It can easily feel like going from 0–100, real quick. Here's a list of other topics you could learn about, which definitely inform React development. But remember, one thing at a time! It's okay to put these on hold for now.
- Terminal and the command-line
- Node.js
- Package Managers (eg. npm, yarn)
- New Javascript Features (eg. ES6, arrow functions)
- Compiling (eg. Babel, ES6)
- Bundlers (eg. Webpack, Browserify)