Update 2017-10-28: This list is outdated. I maintain a better list of react tutorials
Recently I found a developer asking this question about React:
"What tutorial would you recommend to get started? I'm looking for something super simple."
I did a quick search expecting tons of great results, but was a little dismayed by what I found...
Many tutorials were outdated - some more than 2 years old (and React is only ~3 years old).
Most of the tutorials that weren't outdated were too complicated. Some attempted to teach 6 different technologies in a single tutorial! (React + JSX + Webpack + Babel + Flux + Express).
After sifting through the pile of google search results, I found 5 great tutorials that meet my criteria:
These tutorials require no prior React knowledge, but you will want to know basic JavaScript, HTML, and CSS before starting any of them.
buildwithreact.com/tutorial
211 lines of code · 9 min read
Skill level: Beginner · Covers: React, JSX
This is by far the shortest tutorial and the easiest read. Example code is provided in jsfiddles so you can just click to open and begin experimenting.
The tutorial is divided into 6 pages: Intro, JSX, Components, Events, State, Virtual DOM.
Perfect for total beginners or those who want to get a sense of React, but may not have committed to learning it yet.
The 'min read' for each tutorial is just the reading time. The tutorials will likely take much longer to get through if you write code as you follow along or take time to truly digest the material.
jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
102 lines of code · 12 min read
Skill level: Beginner · Covers: Just React
Has a github repo.
This tutorial is only the 2nd shortest, but it is by far the simplest tutorial. This is the only tutorial I found that doesn't cover JSX and doesn't use an ES6 concepts.
For those that are totally new to React, those that find other tutorials to be too complex, or those that are relatively new to programming in general, this is the tutoral you want.
If, however, you are an intermediate/advanced programmer, this tutorial might be a little too basic. In that case - read on!
facebook.github.io/react/docs/tutorial.html
527 lines of code · 18 min read
Skill level: Intermediate · Covers: React, JSX
Has a github repo.
This is the official React tutorial. Like the React documentation itself, it is very well-written. Also like the React documentation, it is skewed a bit towards intermediate/advanced developers.
Why is this tutorial not for beginning programmers? It teaches React and JSX, and the examples involve a client/server interaction. You'll need to get the examples running on your local machine. If you've never run a server on your computer before, I might recommend starting with one of the simpler tutorials.
It's worth mentioning that this tutorial doesn't cover any dev tools like Webpack or Babel. That's a good thing since React + JSX can be a lot to take in all at once.
If you are a beginner to React, but have a strong development background, I highly recommend going with the official tutorial.
tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react
277 lines of code · 26 min read
Skill level: Intermediate · Covers: React, JSX
This one is long. It would take 26 minutes just to read it - so this is a several hour tutorial if you are following along and taking time to digest the information.
And this is just part 1.
However, everyone that reads this tutorial loves it. It's easy to see why - you won't be left with many questions after reading this tutorial. It is as comprehensive as advertised.
This tutorial is great for people who want a non-interactive tutorial. You'll learn the React concepts by reading about them. You can play around with the code in a gist, but at the end of it you won't have a react project on your computer to build from.
teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
2198 lines of code · 100 min read
Skill level: Advanced · Covers: React, Redux, ES6, Babel, Socket.io,
Webpack, and Mocha
This tutorial is massive, which is why I left it for last. Set aside an entire day for completing it.
Usually I wouldn't recommend a tutorial that teaches so many technologies at once. This tutorial pulls it off by addressing different technologies in different sections. The first half of the tutorial is only on Redux, and the second half is on React.
It was written last September, but the author continously updates it, and it is now based on React 0.14.
If you want to dive in to React, Redux, ES6, Webpack, and Babel all at once, this is the tutorial for you. If you might not need to learn Redux (or you've never heard of it), I would go with one of the other React-only tutorials I've listed above.
You can't go wrong with any of the 5 tutorials above, but you could go wrong just googling 'React tutorial'.
Let me do the hard work of finding the best React resources for you - straight to your inbox: