Right now, not only is React at the height of its popularity, but its popularity is accelerating. As far as JavaScript web development is concerned, React is one of the easiest frameworks to learn and one of the most effective for rapid and robust development.

So if you’ve decided to learn it, pat yourself on the back: you’ve made a smart choice.

The only problem is that most worthwhile React courses come with a hefty price tag. For example, the highly-acclaimed React for Beginners course is $89 (starter version) and $127 (master version). Free courses are rarely as comprehensive and helpful — but we’ve found several that are excellent and will get you started on the right foot.

1. React Training’s Fundamentals Course

Tyler McGinnis is a well-known React developer and instructor who has been teaching and writing about React for years now. He currently has four courses available on React Training, the first of which is completely free and serves as an entry point for the others.

React Fundamentals is divided into 32 video lessons that add up to three full hours of education. You’ll learn everything you need to get a basic React app up and running (i.e. React ecosystem, NPM, Babel, and Webpack), the core concepts and lifecycle that drive React apps, how to write components properly, and how to pass data around.

It’s dense. It’s informative. It’s the perfect introduction, and the fact that McGinnis offers it for free is pretty awesome. This should be your first stop when learning React.

Website — React Fundamentals Course

2. Hacking With React

Hacking With React is an ebook that’s completely free, cover to cover, if you read the web-only version. You can grab a downloadable PDF, EPUB, or MOBI version of it for $10 if you’d rather take it with you and learn offline. Either way, it’s an awesome resource for starters who don’t like videos.

It starts at the very beginning, explaining basic concepts like JSX and components and props, and holds your hand while graduating to intermediate topics like states, routing, tests, linting, and more. It’s written in ES6 start to finish and you’ll learn best practices along the way, including Babel, Webpack, and ESLint.

Will it make you a React expert? No, but it will get you comfortable enough to feel confident and keep learning. At the very least, you’ll know more than enough React to decide whether to spend money on an advanced premium course elsewhere.

Website — Hacking With React

3. The Official React Tutorial

 

You’d think that the official tutorial should be the first place to look to learn React, but I personally found it a bit too fast for complete newbies — it assumed a lot more knowledge than most newbies have. It’s perfect if you’ve had previous experience with another JavaScript web framework.

That being said, the official React tutorial is fantastic once you’ve learned the core concepts of React and are struggling to put them into practice. It takes you through the creation of a tic-tac-toe web app using nothing more than components, props, and state. It bridges the gap between abstract theory and practical application.

I also recommend checking out the official React documentation, which explains every bit of React in surprising amount of detail. In particular, the Thinking in React page is like a mini-tutorial on grasping the idioms that drive React. Don’t be afraid to refer back to the React documentation over and over again as you learn and create your own apps.

Website — The Official React Tutorial and Thinking in React

4. Egghead’s React Fundamentals Course

Egghead offers dozens of courses (hundreds of lessons) on various web development topics: JavaScript, Angular, React, RxJS, Node, TypeScript, etc. React is the third largest topic on the site, and although most of the courses are for premium users.

The first two are the most important, but you will probably want to take all of them at some point (optimally in the order listed). The courses assume you already know JavaScript, so check out Egghead’s JavaScript courses if you aren’t comfortable with the language yet.

Note that the premium courses are pretty good too, and they’re worth checking out if you can afford the Pro subscription: $40 per month or $200 per year.

Website — Egghead’s React Fundamentals Course

5. Learn React and Redux With Cabin

Though Redux isn’t part of the core React framework, they’re so often used together that you really should learn it. And even if you eventually move away from Redux, you can take the concepts with you and apply them to whatever you end up using in its stead.

Cabin is a 10-part tutorial series that will teach you how to create a simplified social network app from scratch: installing Node/React/Webpack, understanding how React works, incorporating Redux, dealing with social network features like feeds and notifications, processing images and filters like Instagram, and more.

The last part is an overview of “best practices” that not only teaches you the most effective way to use and organize React/Redux, but also common mistakes to avoid, how to design a scalable app, and how to use third-party tools to ease your development workflow.

Website — Learn React and Redux With Cabin

6. LearnCode Academy’s React Course

 

Over the last few years, LearnCode Academy has distinguished itself as one of the best programming channels on YouTube. It specialized in web development and covers all kinds of topics ranging from HTML, CSS, and JavaScript to specific frameworks like Angular and React. And it’s all free.

The course is divided into three sections: eight videos on core React concepts, six videos on using Flux for data architecture, and seven videos on using Redux to manage state. All of this is done using up-to-date practices, including ES6 and Webpack.

Note that this isn’t a comprehensive course, and Flux and Redux are both advanced concepts that aren’t part of the core React framework, so we recommend using this course as a way to revisit and cement concepts learned in the courses above.

Website — LearnCode Academy’s React Course

7. The React Convention

Some programmers prefer to code by convention — that is, adhering to a certain set of design decisions (“conventions”) from project to project to minimize complexity and speed up the development process, particularly in the early stage of new projects. This online ebook aims to present one kind of convention that React developers can follow.

Before you dive into this, however, you should already be well-versed in ES6, comfortable with the React framework, and understand the basics of Redux. This ebook isn’t for newbies per se. Rather, it’s helpful for intermediates who feel overwhelmed and aren’t sure how to turn their React/Redux knowledge into web apps from scratch.

The tutorial starts off with a starter kit project and shows you how to modify it. By following this convention in future projects, you won’t need to waste time recreating everything.

Website — The React Convention

So You’ve Learned React: Now What?

With these tutorials under your belt, you should be more than knowledgeable enough to start making your own web apps with React. At this point, all that’s left is to practice, practice, practice. And what’s particularly cool is that you can later use React Native to create mobile apps — but don’t get ahead of yourself. Stick with web apps until you’re confident.

It’s going to be a tough road, so we recommend checking out our article on learning how to program without stress. Just because you’re struggling doesn’t mean you aren’t cut out to be a programmer!

Hopefully these free tutorials helped! If you know of any other free React resources that we missed, please let us know in a comment down below.

Related