What is React js

React Quickstart Tutorial

React is a JavaScript library created by Facebook.
ReactJS is a tool for building UI components.

Adding React to an HTML Page

This quickstart tutorial will add React to a page like this:

Example


What is Babel?

Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript.

With Babel, you can use the newest features of JavaScript (ES6 – ECMAScript 2015).

Babel is available for different conversions. React uses Babel to convert JSX into JavaScript.

Please note that is needed for using Babel.


What is JSX?

JSX stands for JavaScript XML.
JSX is an XML/HTML like extension to JavaScript.

Example

As you can see above, JSX is not JavaScript nor HTML.

JSX is a XML syntax extension to JavaScript that also comes with the full power of ES6 (ECMAScript 2015).

Just like HTML, JSX tags can have a tag names, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression.

Note that JSX does not use quotes around the HTML text string.

React DOM Render

The method ReactDom.render() is used to render (display) HTML elements:

Example


JSX Expressions

Expressions can be used in JSX by wrapping them in curly {} braces.

Example


React Elements

React applications are usually built around a single HTML element.

React developers often call this the root node (root element):

React elements look like this:

Elements are rendered (displayed) with the ReactDOM.render() method:

React elements are immutable. They cannot be changed.

The only way to change a React element is to render a new element every time:

Example


React Components

React components are JavaScript functions.

This example creates a React component named “Welcome”:

Example

React can also use ES6 classes to create components.

This example creates a React component named Welcome with a render method:

Example


React Component Properties

This example creates a React component named “Welcome” with property arguments:

Example

React can also use ES6 classes to create components.

This example also creates a React component named “Welcome” with property arguments:

Example


 JSX Compiler

The examples on this page compiles JSX in the browser.

For production code, the compilation should be done separately.


Create React Application

Facebook has created a Create React Application with everything you need to build a React app.

It is a a development server that uses Webpack to compile React, JSX, and ES6, auto-prefix CSS files.

The Create React App uses ESLint to test and warn about mistakes in the code.

To create a Create React App run the following code on your terminal:

Example

Make sure you have Node.js 5.2 or higher. Otherwise you must install npx:

Example

Start one folder up from where you want your application to stay:

Example

Success Result:

Leave a Reply

Your email address will not be published. Required fields are marked *