What is React & Important Features?

What is React & Important Features?

React is a library based on JavaScript. We all have heard about React. Today, we will read more about React and Important Features of it. It is use to develop light weight UI(User Interface).

React is developed and maintained by Facebook, a community of individual developers and companies. React can be used as a base in the development of single page application or mobile application Features, it is very useful for fetching rapidly changing data in real time. It loads data with reloading your browser. Which make it fast to use.


To run React on your system, Node.js and NPM need to be installed in your system.

Basic Usage

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Notable Features of React:

  1. Components( Class and functional Components)
  2. States
  3. Hooks
  4. Props
  5. JSX
  6. Virtual Dom

Components
React code is made of entities called components. It is useful for rendering a particular element in the DOM using the React DOM library. While rendering a component one can pass a value called props.

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

There are two primary way of declaring components in React.

1. Class Components
Class based components are based on ES6 classes of JavaScript. Class based components are also known as stateful components. To start with class based component you need to first import React from react package. Please refer code below.

import React from "react"class FirstComponent from React.Component{    render(){
        return(
              <div>
               "Hello World" 
              </div>
             );
            }
        }
export default FirstComponent

2. Functional Components

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

const Greeting = (props) => <div>Hello World</div>;

3. States

The state of a component is an object that holds some information or value. These information or value may change during component life cycle.
The state can be defined in constructor using this.state.
and the state can be changed using this.setState methods in class components.

Class MyClass extends React.Component 
{ 
 constructor(props) 
 { 
 super(props);//Below code is for set some value in state
 this.state = { attribute : “value” }; 
 } 
}//Below code is to change state information
this.setState({attribute: "new-value"});

4. Hooks

Hooks are functions that let you “hook” into React state.
In functional components we do not use state and setState methods and hence we use Hooks in functional components and therefore Hooks do not work with class components.

Below example renders a counter. When you click the button,it increments the number by value using functional components and Hooks.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

5. Props

Props stands for properties. Props are basically a kind of global variable or objects. Props are use to pass information between components and this React allows us to pass props and Accessing props between any components as we declare attributes for any HTML tag.

Below example shows, how we can pass props to any component as we declare attributes in HTML tags.

<HelloWorldComponent exampleProp = “HelloProp” />

Below Example shows, how we can access props in components.

this.props.exampleProp;

6. JSX

JSX stand JavaScript XML. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX makes it easier to write and add HTML in React.

Below Lines of code implementation of JSX .

const myelement = <h1>I Love JSX!</h1>;ReactDOM.render(myelement, document.getElementById('root'));

7. Virtual Dom

The virtual DOM (VDOM) is a programming concept. In Virtual DOM it creates an in-memory data-structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. where an ideal, or “virtual”, representation of a UI is kept synced with the “real” DOM by a library such as ReactDOM. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render subcomponents that actually change.

Representation of Virtual DOM and Browser DOM(Real DOM)

Note :
How To Install React in Windows or Mac OS.
What is Docker & why docker is useful for deployment ?

I hope you found this article helpful and knowledgeable. Any Query or suggestion feel free to write down in comment.I will be glad to help you.
Please follow me on medium for more informatics articles.

Thanks!

Happy Learning & Happy Coding.

Share

3 thoughts on “What is React & Important Features?

Leave a Reply

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