React

React is a JavaScript library for building user interfaces.

React is used to build single-page applications.

React allows us to create reusable UI components.

What is React?

React is a JavaScript library created by Facebook.

React is a tool for building UI components.

How does React work?

React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

React.JS History

The current version of React.JS is V16.8.6 (March 2019).

Initial Release to the Public (V0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke, created it.

The create-react-app version 2.0 package was released in October 2018.

Create-react-app version 2.0 supports Babel 7, webpack 4, and Jest23.

Create React App

In order to learn and test React, you should set up a React Environment on your computer.

The create-react-app is an officially supported way to create React applications.

If you have NPM and Node.js installed, you can create a React application by first installing the create-react-app.

Install create-react-app by running this command in your terminal:

C:\Users\Your Name>npm install -g create-react-app

You are now ready to create your first React application!

Run this command to create a React application named myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

The create-react-app will set up everything you need to run a React application.

Note: This tutorial uses create-react-app to demonstrate React examples. You will not be able to run the same examples on your computer if you do not install the create-react-app environment.

Run the React Application

If you followed the two commands above, you are ready to run your first real React application!

Run this command to move to the myfirstreact directory:

C:\Users\Your Name>cd myfirstreact

Run this command to execute the React application myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

The result:

What You Should Already Know

Before starting with React.JS, you should have intermediate experience in:

HTML
CSS
JavaScript

You should also have some experience with the new JavaScript features introduced in ECMAScript 6 (ES6).

To use React in production, you need NPM and Node.js

To get an overview of what React is, you can write React code directly in HTML.

But in order to use React in production, you need NPM and Node.js installed.

React Directly in HTML

The quickest way to start learning React is to write React directly in your HTML files.

Start by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.

There are no comments yet.