Top Video Tutorials, Sites And Resources To Learn React

ReactJS was a trading technology of 2016 and 2017 is also a very good time to learn React. On a very short time, I have seen a lot of tech giant companies to move their web application on React. Facebook, Instagram, Dropbox, New York Times, Yahoo Mail and so many big companies are using React right now on production.

Here is a very long list of companies who is using React -

• Sites using React

Get Started With ES6

ECMAScript 6, also known as ECMAScript 2015 is the latest version of the ECMAScript standard. React is an early adaptor to this new JavaScript feature and syntax. If you are not familiar with ES6 syntax then learning React can be confusing at first.

Learning ES6 is not hard or time-consuming. It will take a couple of hours to understand the new syntax and features if you already know JavaScript.

Here is some good resource to learn ECMAScript 6 -

• ES6 features (Github)
• Let’s Learn ES6 (Youtube Playlist)
• Up and Running with ECMAScript 6  [Editors' Choice]

Lynda’s course ‘Up and Running with ECMAScript 6’ is a great place to start learning the new JavaScript. It’s author Eve Porcello not only introduce the new feature and syntax of ES6 but also she will show you how its differ from regular JavaScript and what problems it has solved.

Get Started With Node.js

To learn React, you must have to be familiar with NPM and NodeJS. React development ecosystem is highly dependent on Node and NPM.  If you are willing to learn React and not familiar with NodeJS then I highly recommended learning nodeJS first.

Here is some good video tutorial to get started with nodeJS -

• The Complete Node. js Developer Course 2.0  [Editors' Choice]
• Node Tuts
• Node.js First Look
• Introduction to Node.js with Ryan Dahl
• Pluralsight courses

If you are new to Node.js or you have tried to understand it but didn’t find any good resources then, I recommended starting with “The Complete Node.js Developer Course 2.0”. The author of this course is Andrew mead. In my opinion, he is the best teacher ever. He will explain every single line of code while teaching. I grantee, by the end of this course you have a solid understanding of node.js.

Get Started With React

Now you know, how node.js works. It’s time to get started with React. When I started to learn React, I started with official React document. I also suggest you, to start with this great tutorial created by React team.

• Thinking In React

After finishing this tutorial you will start to understand, how React works.

Learning React by text tutorial can be hard for the beginner. Because There are so many ways to start a React project. You will find a lot of tutorial online accomplishing the same goal with different ways.

The main difference is setting up the React development environment. Some author will set up their development environment with webpack and some of them with Browserify. Many authors still like to use ES5 syntax instead of ES6.

Then what is the best approach? It is a very hard question. Every approach has some pros and cons. Here is some list of great video tutorial where you can learn React and master it.

React Video Tutorials (Paid)

1. The Complete React Web App Developer Course   [Editors' Choice]

If you don’t want to be confused and start learning immediately then I highly recommended you to start with another great tutorial of Andrew mead for React.

I have mentioned of Andrew mead tutorial for Node.js before. I really love his teaching style. You can be a total noob but you'll understand what's going on because everything is explained in detail.

One thing I love about this course is that he will start with simple development setup and app. Gradually he will explain the more complex topic and development setup.

Course included topic -

1. Intro
2. Getting Setup
3. Hello React
4. A Better React Project
5. Routing & Our Weather App
6. Deploying Your App To Production
7. Styling Your App With Foundation
8. Testing & Component Lifecycle
9. Building A Todo Application
10. Redux
11. Databases  Authentication With Firebase

From this course you not only learn how to make React app but also you can learn how to deploy it to production, connect with database and more.

2. React and Flux Web Development for Beginners

This is on of the great course of React. Mark Price does a fantastic job explaining concepts and providing clear examples.

I want to mention this tutorial because it’s quite the opposite of Andrew Mead’s tutorial. Andrew mead uses ES6 syntax but here mark price uses ES5 throughout the course. Also, Mark uses browserify for the development setup and Andrew uses webpack. And at the last Andrew will show you how to use React with redux and mark will show you how to use React with flux.

If you want to master all about React (Recommended if you want to provide freelancing services ) then take both courses. I guaranteed that It will be a great learning experience. 

Course included topic -

1. React Course Overview
2. Free Bonus Content - JavaScript Basics
3. Intro to React
4. Moving Forward With React
5. HTTP Requests, React Flux & Reflux
6. Putting Theory Into Practice - A Better React Developer

It will be a great course for you if you want to use browserify as your development setup or want to write ES6 or willing to learn flux architecture.

3. Advanced React and Redux

The above two tutorial is good for the beginners. If you want to learn something more advanced for complex app development with React, Then this is the course for you.

Learning never ends. The more you learn the more you will realize that there are more to learn. My suggestion is to take a short break after the beginner course. Make 10, 15 apps from scratch with your own ideas. Then take this advanced course.

This course will take you through the app development process with React and Redux. Redux provides an easy way to centralize the state of your application. You can create any app with React without Redux. But Redux give you more control over your application.

If you want to know more about Redux then check out this links -

• Redux
• An Introduction to redux
• What is redux and who uses it?

This advanced course is created by Stephen Grider. He is a brilliant programmer with a  lot of expertise.Throughout this course, he will help you to understand real-world application concerns, such as authentication, back-end implementation and more.

Since its an advanced course you should already familiar with some React and Redux-related topics such as -

• Redux
• Reducers and action creators
• Good understanding of React

After finishing the Andrew Mead’s “The Complete React Web App Developer Course ” that I have mentioned above you should be ready to take this course.

Course included topic -

1. Get Started!
2. Testing
3. Test Environment Setup
4. Higher Order Components
5. Middleware
6. Server Setup – Authentication
7. Client Side Authentication
8. Bonus!

After finishing this course I am sure you will be ready to build your next amazing ReactJS app.

4. ReactJS and Flux: Learn By Building 10 Projects

It’s the last course I want to mention. The author will take you through the 10 React course that will give you much confident of building an app with ReactJS.

One thing I like most about this course is that the author will take you through different approaches of to build apps with React. how to build flux and react applications using ES6 syntax or not, using webpack + babel or in alternative gulp + browserify ways.

The problem with this course is that the author will not explain some important expect that he uses in his projects. But if you already have experienced with  React and flux you should have no problem to understand it.

one of the reasons to take this course is if you want to learn more about flux. Flux is an application architecture for building user interfaces. Flux is an alternative of Redux. Most of the developers prefer Redux over Flux. But Flux also a good choice of building an application with React.

If you want to know more about Flux, Flow this links -

• Flux
• What is flux ?
• Getting to know flux.
• What is the flux application architecture?

If you want to feel more confident building app with React and Flux then must take this course.

Course included topic -

1. Course Introduction
2. Bootstrap React Components
3. Github Profile Viewer
4. Quick Quiz Application
5. MovieFind
6. Firebase ContactList
7. Stickypad Notes
8. InfoFinder Search Engine
9. Youtube Gallery
10. Socket.io Chat App
11. Workoutlogger
12. Course Summary

From the topic list, you can see that this course has many tutorials of developing a complex application with React.

I Don’t Like Paid Resources

It’s ok. Me too. Who want to pay if you can get it for free. Even I have started my journey of learning React with free resources in Blogs, Youtube and Github. There are so many free resources are available online.

Since I was a beginner and didn’t have much experience with web application development, I was too much confuse. Because most of the free tutorials and resources aren’t created professionally to teach someone. Most of them are incomplete.

Free Tutorial To Learn React

1. React Training

React Training online is a very good site to learn React. It has a well-organized class curriculum and very user-friendly website. on every curriculum, it has text and video tutorials. But only the React Fundamental course is free. For advance Learning, they have a paid plan.

2. Egg Head

This site also has some great free video tutorial for React. You can learn basic of React from their site. They also have pro membership and advanced course is only available for pro members.

3. Big binary

The Big Binary offers a few short videos that are accompanied by a specifically built widget to help you interact with code. Though they have very limited resource but it's a great place to start.

4. Learn React

It’s a very small site has a few short introductory videos for React. This site is very new. I hope learnreact team will soon add more resources to this site related to React.

5. build with React  [Editors' Choice]

I suggest everyone this site to learn React. The author of this site used to work at Facebook. This nice interactive site will take you through the learning progress step by step. The author is very active and continuously adding more learning resources to this site. Keep your eyes on this site.

6. Envato Tutsplus

This site course is not actually free. But they have a free trial. You can signup for the free trial and start learning React. They have good quality content comparing to other free resources.

7. PluralSight

This site also offers premium tutorial like Tutsplus. It’s also has a free trial plan. They have many good tutorials on React. You can grab your trial anytime and start learning.

Some other useful site links -

• Official React Tutorial
• Official Flux Guide
• A quick start to React
• The React Quick Start Guide
• Learning React.js
• ReactJS & Browserify Workflow
• Best practices for building large React apps
• Comprehensive Guide to Building Apps with React
• Building robust web apps with React
• 5 Practical Examples For Learning The React Framework
• Unit Testing React.js With Jasmine and Karma
• React Tutorials
• Krawller
• React Rocks
• ReactJS News

Learn React From Github

Github is the biggest source of learning when it comes code. There are thousands of React project are available on github. You can pick any of them and start exploring their code to learn. After learning basics of React you should start exploring github’s open source projects.

How would I find a good Github project ?

Well it’s really hard to track because there are too many good sources available on Github and many new of them are coming. But here is two brilliant Github repo who take care of other good projects.

1. Awesome React  [Editors' Choice]

Awesome React is a collection of awesome things regarding React ecosystem. It’s a large collection of tutorials, projects, blogs, boilerplates, Books and more. This collection is maintained by more that 250+ contributor. It has 17k+ stat on Github. It is a must have page on bookmarks list for every React learner.

2. Complementary Tools

React complementary tools is not a source of tutorial, books or blogs. It is a list of tools that work really well with React when building applications. But it can be a good source of learning React while building application.

Learn React From YouTube

YouTube is one of the best free resources to learn React. Many web programmer and developer share their skill though screencast on YouTube. 

Here is a playlist of some great React tutorial on YouTube  -

1. Official conference video - React.js Conf 2016
2. Great Tutorial by learn code academy - React JS Tutorials
3. Beginner tutorial by The new boston - React JS Tutorials for Beginners 
4. Redux tutorial by The new Boston - React JS / Redux Tutorials
5. React, Redux and webpack tutorial - React + Redux + Webpack
6. React beginner tutorial by code.tv - React.js Tutorials for Beginners [Editors' Choice]
7. React Basics - ReactJS Basics
8. Basic to advanced - React for everyone

Some Good Books To Learn React

Nothing can teach you in details like a book. Reading books for learning anything is far batter than watching tutorials or reading blogs. React is very young. There are not many books out there on React. But here is some great book list you can start reading right now.

1. Full Stack React   [Editors' Choice]

This book is really worth reading. Lately, But I came to know about this book. I thought why I didn’t get this book earlier. This book is written with the modern approach of learning React and developing applications.

After watching tons of tutorial, reading blogs you will learn many different ways to build applications with React. And I can bet, It will make you frustrated and confused. You will continuously ask yourself and search on google for the best approach but at the end, you will get nothing.

This book has solved this final problem with React. It will not only teach you React but also help you to choose the right tools and help you to proceed to the best approach in your development setup.

2. Survive JS

It is one of the best books to learn React. This book will give you a detailed step-by-step tutorial approach, practical examples of code and configuration.

This book uses webpack as its development tools with well-explained configuration. Webpack configuration can feel tricky for the first time but after reading this book you should have a solid understanding of it.

3. Pro React

Pro React is an another good book to read. For someone who's a newcomer to React and professional js-development in general, I think it is a good starting point. I didn’t get much time to read this book. But it seems ok. This book has a good chapter with flux. A very good writing on Flux. Highly recommended who want to learn Flux.

 

The world of JS moves extremely fast. It’s really hard to cope with the latest changes. today’s great approach, best library, the best architect can be replaced by something new tomorrow. If you want to survive here you need to learn constantly.

What is your favorite learning resources? Any good books? Tutorial series ? or Blogs? Let us know right below in the comment -