Learn ReactJS with 20 Free Online Tutorials

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:
  • Part 1
  • Part 2
  • Part 3
  • Part 4

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:
  • Utilizing Webpack and Babel to build a React.js App
  • Building React Applications with Gulp and Browserify
  • Architecting React.js Apps with Flux

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:
  • ES6 edition
  • Test suite in React.js
  • Autofocus in React.js
  • Controlled inputs with React.js

5) Build with React

URL: buildwithreact.com/tutorial

An interactive guide to React.js with snippets to apply your code and run it.

• Type: Intermediate
• Pre-requisites: HTML, CSS, Javascript
• Related articles

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:
  • The React.js Way: Flux Architecture with Immutable.js
  • React.js Conf 2015 - Immutable Data and React
  • React.js Best Practices for 2016

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:
  • Part 2
  • Part 3
  • Part 4

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:
  • React.js conf 2016

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

URL: antjanus.com/blog/web-development-tutorials/front-end-development/comprehensive-beginners-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.

• Type: Intermediate
• Prerequisites: HTML/CSS/JS
• Related: survivejs.com/blog/survivejs-react-253/

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

URL: learnreact.com/lessons

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

URL: cjlarose.com/2014/01/09/react-board-game-tutorial.html?utm_medium=referral&utm_source=zeef.com&utm_campaign=ZEEF

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…

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:
  • Learn Raw React Part 2: Ridiculously Simple Forms
  • Learn Raw React Part 3: Routing
  • Interacting with the DOM in React

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:
  • Form Validation Tutorial with React.JS

Share the love

Learn #ReactJS with 20 Free Online Tutorials via @icicletechhttps://t.co/OCeZZRW2aK#WebDevelopment

— Icicle (@icicletech) March 17, 2016

Published in web-development, tutorials | Tagged with reactjs, tutorials, web-development

You maybe interested in