Introduction of React JS

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

If any number of users you create and also displaying the count of total users on the top header, so in PHP you can refresh the page, or either you can get data with jQuery. Here basically you need to refresh the page to display the counts of total users. But instead of that in react js you can display the count of total users without refresh the page and immediately you can display the counts. That’s the magic of react js, and we can say that this is a single-page application.

React JS is a flexible open-source JavaScript library for implement the user Interface or we can say View of MVC

React JS is maintained by Facebook so it a reliable. And react js is component-based where make the code in small waves of peace and import in particular component and make a single page application.

Let’s consider the above image where we can see the Header, Menus, and Content. So basically this three-part we can divide and put in different components like in the header component we can write the code for the header only. and the same as other parts, so that way we can make the component in different waves of peace of code and import in the parent component. So it will display as one page and that would be reusable and you can use it wherever you need in the current project.

Let’s see with the code structure of ReactJS

Test.js

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

In ReactJS there are two types of Component

Functional Component
Class Component

1. Functional Component

I hope You have created functions before in JavaScript. so the functional component is basically the same as the JavaScript function where we can get the props as a parameter and render in return function for display in UI.

import React from 'react';
const Test = (props) => {
   return (
      <div>
         <p>Title</p>
         {props.title}
      </div>
   );
}
export default Test;

2. Class Component

It’s totally different from than functional component, In-class component need to define a class that extends Component and has a render function. we can use the life-cycles methods in-class component whereas in functional components we can use react Hooks.

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is my component.</div>
    );
  }
}

export default MyComponent;

Post Views: 77