7 Best Free Tutorials for Learning React and Making Web Apps
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 [No Longer Available], 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 [No Longer Available]
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
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.
4. Egghead’s React Fundamentals Course
- Start Using React to Build Web Applications
- Add Routing to React Apps Using React Router v4
- Getting Started With Redux
- Building React Applications With Idiomatic Redux
- Manage Complex State in React Apps With MobX
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
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.
For more learning, check out the best courses worth paying for on Coursera .
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.
Image Credit: guteksk7 via Shutterstock.com