Want t learn React from scratch? Here's a list of the best free online resources to help you better understand the principles of React and practice your coding skills.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
If you’re a software developer, learning new technologies is your bread and butter. Perhaps you’ve already had a chance to try React but haven’t really been able to develop a solid skill set yet, or perhaps you’re just starting out.
In this article, we list the best free online resources – including interactive tutorials and videos – to help you better understand the principles of React and practice your coding skills.
The best way to start your journey with a new technology is to read its official documentation. This will help you understand the purpose of creating that framework, its use cases, basic principles and the terminology. React’s documentation, in particular, is very well-maintained and written in a language so simple that even a child would understand it.
The homepage of React’s official website provides a brief overview of the technology. When you’re finished reading that, jump into the “Docs” section to see how to get started with React and get familiar with its main concepts. When you’re done with that, move on to the “Tutorial”.
The tutorial itself, besides being very well described and easy to follow, is really fun. You’ll be building an interactive tic-tac-toe game with a time travel feature 😉
This awesome guide was designed and created to help people just starting out with React who feel overwhelmed with and confused by the buzzwords flowing all over the internet. You won’t hear about Redux, Babel, React-Router, or anything like that here. It’s just a simple and really enjoyable exercise and introduction to React in it’s most basic form.
By the end of the tutorial, you’ll be able to create an animated fractal tree all by yourself! But first, you’ll learn JSX, play with some custom React elements, rendering, and re-rendering as well as events and components.
If you don’t know who Tyler McGinnis is, where have you been? Tyler is a Google Developer Expert and a former Dev Mountain Director, famous for his web development educational activity.
He leads the TylerMcGinnis.com website, which provides high quality paid courses for developers. His React Fundamentals trainings have already gained 3000 reviews and an average rating of 9.3/10.
Buildwithreact.com is a website led by Paul Shen, a former Facebook engineer, who participated in the creation of React UI components and taught React himself. Is there any better way to learn React than by following its creator? I suppose not!
The page was designed to help you learn React basics step by step. It features 6 short and easy tutorials enriched with JSBin snippets, so you can practice what you’ve learned along the way. The individual exercises are arranged in a logical order, so you won’t get confused. There you’ll learn about JSX, components, events, state.
Although the tutorial was published in 2016, you definitely can’t call it outdated. It covers the unchangeable basics, so you for sure won’t be disappointed.
Although React Bits are a GitBook, they do not feel like a book because there’s not much to read. The author calls it “A compilation of React Patterns, techniques, tips and tricks” and I feel that’s a really appropriate title.
React Bits is in the form of a well-arranged outline divided into 6 categories:
Each of the articles in the category consists mainly of code snippets with comments and lists other resources related to a particular topic (for example, Medium posts). You don’t have to be afraid of this source being outdated as it’s frequently updated and well-maintained. When this article was written (July 2018), the last update had been made 15 days before.
We highly recommend checking out React Bits as it’s a great source and a real gold mine. We’re sure that everyone will find something valuable there.
Egghead.io is a platform created by working web professionals who wanted to contribute to the open-source community. You won’t find fluff there. The video courses are relatively short (usually between 30 minutes – 2 hours), get right to the point, and deliver practical knowledge that can be used instantly.
This particular video course was created by Joe Maddalone. If you want to experience his tutoring before committing to a full course take a look at one of his videos on YouTube.
Here’s an example:
The Start Learning React series will help you explore the basic fundamentals of React to get you started out. It consists of 21 lessons, each taking an average of 3 minutes to watch. Although the whole course takes about an hour to complete, you’ll definitely want to take some more time to follow up on each of the steps shown in the videos. It’s really worth the effort.
The lessons cover topics such as creating an app with Create-React-App, rendering components, setting properties, accessing nested data, custom validation, managing components with the state, building live compilers, and many more.
Don’t miss out on this one!
This free Youtube playlist course consists of 23 videos covering topics from React fundamentals to Redux and MobX tutorials. In the beginning, you’ll want to focus on lessons from 1 through 8 as they focus on React JS alone.
These few lessons will take you about an hour to watch, but, as with every course, you should follow the steps and develop your skills through practice. This free video training is pretty popular. In July 2018 it had nearly 2,000,000 views.
In this course, you’ll learn about basics like components, state, props, events, React router, inline styles and arrays.
There are countless, valuable React resources on the web. As the software engineering field evolves constantly, it’s always best to go for the most recent materials. We hope you found our list of the best free online React resources for beginners helpful.
If you enjoyed our post, please share it with fellow JavaScript lovers and engineers and help spread the word about this awesome technology.
Good luck on your React JS development journey!
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Full-stack software developer with 17 years of professional experience.
Software development enthusiast with 8 years of professional experience in this industry.
Full-stack software developer with 17 years of professional experience.
Software development enthusiast with 8 years of professional experience in this industry.
Read next
Popular this month
previous article in this collection
It's the first one.
