There are about 1 million results on Google for "React Tutorial", so needless to say it can be hard to find the right tutorial to spend your time with.
And while I can't say these are the best tutorials ever written, they are definitely the ones that we used (or ended up writing ourselves) to become great React developers.
SurviveJS: Become a React Master
The SurviveJS guide to React is a great way to get up and running with React, helping you build an app while also teaching you about the other useful sidekicks to React, like Webpack, Redux and more.
In X-Teamer Pawel Chojnacki's review on SurviveJS, he says one reason he likes it is because of how it describes each tool and approach
"It covers Webpack, but also talks about Grunt and Gulp. It uses ES2015, but TypeScript is an option. React Flux implementation? Alt, but read also about Redux and all the others."
Pawel notes that the book is also full of links off to more content to read that will really enrich your knowledge as a developer.
Try the free version first before you buy just to be sure it's for you.
If you end up liking it, definitely check out their incredibly useful guide on Webpack as well. (Although Webpack's improved docs are starting to become enough to finally get you started).
*Note: This book assumes you know the basics of JavaScript.
React Fundamentals (Tyler McGinnis)
40,000+ people have taken this course, and Tyler is a well-respected (and entertaining) Egghead instructor.
This is probably the most comprehensive React fundamentals course of the free options.
It also includes React Router and Webpack, both incredibly useful for getting up and running today.
Definitely check this one out before spending money anywhere.
Build your first React.js app
If you aren't into reading (i.e. SurviveJS), then Egghead offers a bit more expensive video version ($40/month gains you access to all Egghead videos).
Much like SurviveJS though, it will help you build a fully functioning web app. It'll also teach you Webpack and Firebase along the way (both very helpful as a modern front-end dev).
Dan Abramov's 'Getting Started with Redux'
Although Redux != React, the two often go hand-in-hand and it's likely you're eventually going to end up needing to know Redux as a React developer.
Redux is really best explained in this talk, but a shortened version looks like this:
Managing state in an application is critical and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.
And we've found there's no better place to start than with the Redux creator himself, Dan Abramov, with his semi-free Egghead course, Getting Started with Redux.
"Awesome" tends to be the most common word used by X-Teamers when it comes to this course.
As X-Teamer (and React pro) William Cabrera said:
"I learned my React foundation on Egghead, especially the Redux tutorial."
I mentioned "semi-free" because to get a hold of the code, you'll need to fork over $40. Try the lessons out without the code and see how you go.
Building React Applications Using Idiomatic Redux
This is another popular one among X-Teamers who are now expert React developers.
Once you finish Dan Abramov's first course on Redux, you have to take his more advanced followup course to be truly production-ready with your best practices.
As Dan himself writes...
You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers.
What we also love about Dan's courses is the amount of notes the community puts on Github for each lesson.
Forms in React and Redux
So, you've learned the basics of React and Redux, and you're ready to build upon that.
This tutorial, written by X-Teamer Kasper Wargula, teaches you how to build a simple React library for creating, composing and serializing form elements with built-in validation.
The tutorial is easy to follow, walks you through all of the code, and leaves you with a working product in the end.
One of the comments from Lars Jeppesen sums up how we feel about it as well:
The article's information is very good, informative and explains the steps necessary to do it.
You'll learn how to:
- Set up a new ES2015 project using webpack and babel
- Use Redux (more on that next)
- Use React’s context
- Utilize JSX design to create a simple composition concept
- Hide implementation details in the library
Build a Yelp clone in React
The more React fundamentals you pick up, the more you're going to want to start building something actually useful.
This tutorial from the Fullstack.io team on how to build a Yelp clone in React is EPIC.
The tutorial holds your hand the whole way through, helps you learn about Webpack + Babel along the way, and leaves you with a simple yet great Yelp clone.
Definitely recommend this for a weekend where you really want to start putting all the pieces together.
React Native Fundamentals
Ready to take your React knowledge to the ultimate level?
React Native allows you to build native iOS and Android applications in JavaScript and React.js.
Naturally, the tutorial focuses more on the iOS side of things, but the good news you don't need any app development experience to jump into this. Just come ready with your new knowledge of React.
Like most Egghead tutorials, you'll end up with a fully functioning native app by the end.
And it's incredibly entertaining thanks to the great Tyler McGinnis as your host. In fact, Tyler has a whole suite of great React tutorials (if money isn't an issue).
This one is also unfortunately a paid tutorial ($40/month gets you access to all Egghead tutorials, including the ones listed above), but well worth it from our experience.
X-Teamer William went on to create this Material CalendarView using what he learned about React Native in this tutorial.
Still want more? If you're OK with being a little overwhelmed, I'd recommend this additional list of React tutorials (up to you to determine which are worth using as we haven't tried them all).