React JS Tutorial
Topics to be covered
We will cover the following topics in this tutorial
- Pre-requisites for learning React
- Why React?
- So Where Does React Fit
- Why React is Awesome
- Installing React Tools
- Websites that use React
Pre-requisites for learning react
First thing first, this will be the best decision you have made so far with regards to improving your coding skills, that is until a new best thing comes up that replaces React, however right now at the time of writing React makes sense.
JQuery is a very strong library for adding functionality and it is widely adopted and tested, however due to the separation of concerns, you end up with a large amount of JS files and HTML template files, you would need to switch back and forth between them to make sense of what your application is doing and your code gets messy quick.
With React you would not have this problem, as React keeps your concerns in one place, that makes React very modular, you can write your code in logical pieces that can be reused anywhere.
So Where Does React Fit
ReactJS is the V in MVC, it makes building single page applications so much easier, the best feature of React is the virtual DOM, when a change happens the virtual DOM re renders the DOM.
React uses clean and easy to understand JSX syntax that looks like HTML, this makes React real easy to learn, all you need are the basics of coding skills to utilize React
Why React is Awesome
Installing React Tools
React plays nice with all browsers, great developer tools are available as chrome extensions.
The first extension we will install is the react-detector, this extension lets you know which websites have some React elements on them, and it will show a React icon in the address bar on the right.
This section assumes you have Google Chrome web browser installed. Open the following URL
Search for react-detector
From the search results that you will get, click on ADD TO CHROME button next to react-detector. This will install the react-detector extension. You can try this by navigating to Facebook, Instagram, ProductHunt or Airbnb.
Load the following URL in Google Chrome browser
React Developer Tools
The second extension we will install is the React Developer Tools, now that you know that a site has some React on it, this extension will allow you to see the React code and all of its variables 'state'.
Google back to chrome web store //chrome.google.com/webstore/category/apps
Search for React Developer Tools
From the search results that you will get, click on ADD TO CHROME button next to React Developer Tools. This will install the extensionAfter you install this extension, go to website that has React on it. In this tutorial, we will continue using airbnb.
Reload the following URL
Open the developer console or alternatively just hit
ctrl + shift + j.
In the developer console, go to the React tab, it will show you all the React elements nested logically and you can check the current state and bound functions. This tool is very essential for debugging your applications.
As you can see in the left side of the snapshot, Airbnb uses react for rendering the search bar. On the right side you can see the variables used to know the current state of the element.
Websites that use React
The following are some of the cool websites that use React for the interface.
Airbnb a website for home rentals uses ReactJS for only the search bar
Instagram a website for sharing photos uses ReactJS for everything on the frontend.
ProductHunt a website for listing new tech products uses ReactJS for all its frontend
ReactJS makes it easier to develop complex user interfaces with easy. It greatly improves the performance of web applications by updating only the components that need updating. React is open source, has great develop tools and these tutorial series will add to the wonderful ever growing documentation of ReactJS.
In the next tutorial, we will build a simple ReactJS Hello world example.
If you found this tutorial useful, support us by using the social media buttons to like and share the tutorial. If you didn’t find it useful, please use the comments section below to let us know how we can do better next time.
Each week, a new ReactJS tutorial is added to our collection. Subscribe to our newsletter, like our Facebook fan page or follow us on Twitter to get free updates when the collection is updated.
Tutorial version 1: Date Published 2016-02-02