React Introduction

React Introduction

What is React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

Example

import React from "react";

const Example= () => {
  return (
    <div className="hello_react">
      <h1> Hello, world this is React ! </h1>
    </div>
  );
};

export default Example;

The Example function is a React component that displays the famous introductory ''Hello, world this is React".

When displayed in a web browser, the result will be a rendering of:

<div class="hello_react">
  <h1>Hello, world this is React !</h1>
</div>

2) React History

a) React was Created by Jordan Walke, a software Engineer at Facebook

b) On April 2017, Facebook announced React Fiber, a new core algorithm of React Library for Building User Interfaces.

3) React Benefits and Features

A) Virtual DOM: The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as React DOM. This process is called reconciliation.

Virtual DOM has the same properties that of the Real DOM, but it lacks the power to directly change the content of the screen.

Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint doesn’t reflects on the machine itself.

B) Components

React component is the building block of a React application. Let us learn how to create a new React component and the features .

i) Functional Components

Function components are declared with a function that then returns some JSX.

const Example= () => <div>Hello, world this is React !</div>;

ii) Class-based Components

Class-based components are declared using ES6 classes.

class ParentComponent extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

C) JSX

React JSX is an extension to JavaScript. It enables developer to create virtual DOM using XML syntax. It compiles down to pure JavaScript. Since it compiles to JavaScript, it can be used inside any valid JavaScript code. For example, below codes are perfectly valid.

class Example extends React.Component {
  render() {
    return (
      <div>
        <p>Example 1</p>
        <p>React Js</p>
      </div>
    );
  }
}

**D) One Way Data Binding: **

ReactJS uses one-way data binding. In one-way data binding one of the following conditions can be followed:

i) Component to View:

Any change in component data would get reflected in the view.

ii) View to Component:

Any change in View would get reflected in the component’s data.

E) Performance:

React uses virtual DOM and updates only the modified parts. So , this makes the DOM to run faster. DOM executes in memory so we can create separate components which makes the DOM run faster.

F) Extension: React has many extensions that we can use to create full-fledged UI applications. It supports mobile app development and provides server-side rendering. React is extended with Flux, Redux, React Native, etc. which helps us to create good-looking UI.