What is React.js? Understand How the React Works?

In this tutorial you will learn about what react is and how it does work, also you will learn how to write your first app with react.js Let's understand, what is react? and how it does work.

An Overview

React.js is a library created by software engineer called Jordan Walke who already was working in Facebook Company.

Anyway, React.js is a free open source designed to build user interfaces which can create html components by JavaScript. The first name of React.js was FaxJS, it was depending on the XHF which means html component library for PHP.

The first task for React.js was in 2011 when they used it in facebook news feed, and then they integrated it with Instagram.

They found the basic uses of React are so fast and great performance for rendering the HTML component. So they made it as an open source, and released the first version of React.js in 2013.

How It Does Work

Actually, there are two phases in React.js to rendering the HTML in a web page.

JSX

JSX is a JavaScript file ended with jsx extension allows you to write JavaScript expression with HTML tags to define react elements.

Anyway, the following shows you, an example from the React.js code as a snippet from the JSX file

let job = "Web Developer";
let element = <p>Hello I am a { job} </p>;
ReactDOM.render(
   element,document.getElementById('appName')
);

In this example, I defined a new block inside it, embedded HTML with a JavaScript expression.

Once you load the web page, it will render the React.js components on the DOM (document object model).

Let’s understand how the virtual DOM works behind the scene.

Virtual DOM The DOM is a document object model which represents the web page contents in a tree that already stored in the memory.

This is so faster rather than rendering the HTML by the server directory.

Let’s create a react app.

How to Write Your First App with React.js

Before getting started you to install node.js and npm. Then you have to create a react app by the following command.

npx create-react-app [react folder name]

Here you already downloaded the react files and you can define blocks with HTML elements as I mentioned before.

Then you can run this project by the following code.

npm run start

Thank you for reading. This article has published by our CodedTag team.