React JS Tutorial
Introduction
ReactJS is an open source JavaScript library for developing complex user interfaces. It was developed and is maintained by Facebook and other open source contributors. ReactJS is a client-side library, it is executed in the user’s web browser. ReactJS can also be used for server-side rendering. These tutorial series will get you up and running with React. The official website for ReactJS is https://facebook.github.io/react/
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
It will be an added advantage for you if you have basic knowledge of the following • You should know the basics of HTML5 and CSS3. • You should know the basics of Bootstrap. • You should know some JavaScript. • You should know how to use an IDE or Text Editor. • You should have a web server. This is optional but highly recommended.
Why 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.
Before React existed, you would learn HTML, then a few CSS basics and you would start creating static websites, that is good for a simple project. Once you decide to add some functionality to your site, you would probably take a look at JavaScript and the first option that comes to mind would be JQuery.
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 a JavaScript library, it is not a full framework. React only deals with the user interface of the application. This is very important as it means you can use React right now with any of your existing projects with very minimal effort. React makes creating large complex applications very simple, React just makes sense, it's like talking to your code editor is a humanly logical way.
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
React's virtual DOM is a JavaScript object, reading and writing to the DOM is slow, reading and writing to the JavaScript Object is fast, React never reads from the DOM and only write to the real DOM when needed.
Installing React Tools
React plays nice with all browsers, great developer tools are available as chrome extensions.
React-detector
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
https://chrome.google.com/webstore/category/apps
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 https://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 extension After 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
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
ProductHunt a website for listing new tech products uses ReactJS for all its frontend
Summary
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.
What’s next?
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 History
Tutorial version 1: Date Published 2016-02-02