React.js is a Javascript library for building user interfaces which was developed by Facebook. It is known for its fast performance, it is one of the best choices for building mobile sites.
The well-known applications build with React are Facebook and Instagram.
React, which is one of the most popular Javascript libraries and having strong React skills is a great way to get ahead with building modern web apps right now. It has a strong foundation and a large community behind it.
The following are the 20 free online tutorials available which could get you started with React.js.
1) Official React.Js Tutorial
URL: facebook.github.io/react/docs/getting-started.html
The official tutorial will teach you how to build a real-time comment box with React.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
2) Learning React.Js: Getting Started and Concepts
URL:
scotch.io/tutorials/learning-react-getting-started-and-concepts
This is a tutorial series from scotch.io will first teach you the basic concepts of React.js to get started, teach you how to build a twitter stream with Node and React.js, introduce you to the Flux architecture, and finally finish off with walking you through how to create a simple shopping cart with React.js + Flux.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Tutorial series:
3) A Comprehensive Guide to Building Apps with React.Js
URL:
tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
An excellent tutorial when you want a better understanding of the concepts of React.js.
- Type: Beginner/Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Tutorial series:
4) The React Quick Start Guide
URL:
codementor.io/reactjs/tutorial/the-reactjs-quick-start-guide
The post is from Jack Callister’s blog, who is the Co-organiser of Hack Pack and a full-stack developer. In this tutorial, he teaches to build a series of user interfaces, each adding a layer of functionality on the previous and will also build a photo stream similar to Instagram.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Tutorial series:
5) Build with React
URL:
buildwithreact.com/tutorial
An interactive guide to React.js with snippets to apply your code and run it.
6) The React.js Way: Getting Started Tutorial
URL:
blog.risingstack.com/the-react-way-getting-started-tutorial/
This is a two-part blog series where it explains the concepts and gives a recommendation on what to use and how.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Related articles:
7) Building Robust Web Apps with React
URL:
maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html
In this tutorial, Matt Hinchcliffe, explains React.js using an an applications which shows the departure boards of London underground using the TrackerNet API.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Related Articles:
8) Reactjs Tutorial from Tutorials Point
URL:
tutorialspoint.com/reactjs/
This is a complete beginner tutorial for React.js and explains each and everything related to it in the beginner style.
- Type: Beginner
- Pre-requisites: HTML, CSS, Javascript
- Tutorial series
9) React.js Conf
URL:
youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
This contains the videos from the React.js conference held in 2015 and 2016, which will be helpful to know more about React.js.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
- Related videos:
10) React Js Video Tutorials
URL:
youtube.com/playlist?list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b
A series of video tutorials from LearnCode.academy.
- Type: Intermediate
- Pre-requisites: HTML, CSS, Javascript
11) React.Js Introduction for People Who Know Just Enough Jquery to Get By
URL:
reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/
This tutorial helps you build a tweet box, with the help of React and jQuery.
- Type: Intermediate
- Duration: 1-2 hours
- Pre-requisites: HTML, CSS, Javascript, jQuery
12) React JS Tutorial for Beginners
URL:
youtube.com/playlist?list=PL6gx4Cwl9DGBhLZx_5C-jqECBE4HIID_k
A series of video tutorials for complete beginners from the playlist of thenewBoston.
- Type: Beginner
- Prerequisites: HTML/CSS/JS
13) Comprehensive Beginner’s Guide To ReactJS
A guide which goes through all the terms related to React.js and also compares with Angular.js.
- Duration: 30 mins
- Type: Beginner
- Prerequisites: HTML/CSS/JS
14) Learn Webpack and React
URL:
survivejs.com/react/introduction/
A book which comes in two parts which will help you go through the basics of React.
15) React.Js Program
URL:
reactjsprogram.com/
A project based, linear approach to learning React.js and the React.js ecosystem.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
16) Learn React
Learn React.js from the set of video tutorials starting with using render and createElement.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
17) Learn React.js: The Basics
URL:
lynda.com/React-js-tutorials/Learn-React-js-Basics/379264-2.html
This is a series of video tutorials with the transcript. You can login to start using their free trial to watch all the videos related to React.js.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
18) React Beginner Tutorial: Implementing the Board Game Go
This is a beginner’s tutorial where you learn React by implementing the board game “Go”.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
19) Learn Raw React — No Jsx, No Flux, No Es6, No Webpack…
![Learn Raw React — no JSX, no Flux, no ES6, no Webpack…]](https://cdn2.icicletech.com/media/l_raw-react.png)
URL:
jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
An exercise based tutorial to learn React step-by-step.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
- Related articles:
20) Beginner’s Guide to React.js, With Examples
URL:
html5hive.org/beginners-guide-to-react-js-with-examples/
A tutorial for beginners where they explain what React is and helps set up a basic interface.
- Type: Intermediate
- Prerequisites: HTML/CSS/JS
- Related articles:
Share the love
Learn #ReactJS with 20 Free Online Tutorials via @icicletechhttps://t.co/OCeZZRW2aK#WebDevelopment
— Icicle (@icicletech) March 17, 2016
