Fundamental Concepts of React JS

Some fundamental concepts of React JS are described below

React: Rect is a library or a framework? What do you think? React is not a framework it’s a JavaScript library. React is defined as a JavaScript library for building user interfaces. If you want to build a user interface, then React will help to build user interfaces using components. React is simple and it’s extremely easy to mix it with other 3rd party libraries. React is used to build single-page applications. React is a component based and it allows us to create reusable UI components.

Components: React is component-based. Components are reusable, composable, and stateful. You can reuse a single component in multiple UIs and components can contain other components. In the components, their input is a set of “props” and their output is a description of a UI. There are two types of components, Class components and Function components.

Function Components: A functional component is just a plain JavaScript function. Functional components can accept and use props. There is no render method used in functional components.

import React from "react";

const Person = props => {
return (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>  
  );
};

Class components: Class components also known as Stateful components because they implement logic and state. A class component requires you to extend from React. You pass props down to class components and access them with this.props.It must have the render method returning HTML.

import React, { Component } from "react";
class Person extends Component {
  render() {
    const {name} = this.props;
    return (
      <div>
        <h1>Hello, {name}</h1>
      </div>
    );
  }
}

JSX: JSX stands for “JavaScript XML”. JSX looks like a regular HTML in most cases but JSX is not HTML. If you want to write HTML code in react, you should use JSX. JSX allows you to write HTML in React. JSX makes it easier to write and add HTML in React.

without JSX:

const rootElement =
 React.createElement(‘div’, {},
 React.createElement(‘h1’, {style: {color: ‘red’}}, 
 ‘The world is yours’),
 React.createElement(‘p’, {}, 
 ‘Say hello to my little friend’)
 )

JSX:

const RootElement = (
  <div>
    <h1 style={{color: red}}>The world is yours</h1>
    <p>Say hello to my little friend</p>
  </div>
)

PROPS: Props stands for Properties. In React, the list of attributes received by a React element is known as Props. You are familiar with HTML elements, React props just like HTML elements. You can pass data from one component to another component by props.

STATE: State is javascript objects where you store property values that belong to the component. The state holds some information that may change over the lifetime of the component. States can only be used in Class Components.

const [name, setName] = useState([]);

useState has two items, the first item get the value and the second item sets the value.

Hooks: Now we discuss hooks. React hooks is a special function. It is the new addition of React. All hooks functions begin with the word “use”. It allows you to use state and other React features without writing a class. Hooks should always be used at the top level of the React functions. you can call Hooks from React function components. You cannot call Hooks from class components.

Virtual DOM: DOM stands for Document Object Model. If you are using React or learning React, you must have heard of the term “Virtual DOM”. A virtual DOM object is a representation of a DOM object. It is a lightweight copy of the actual DOM. Manipulating the virtual DOM is faster than the actual DOM because nothing gets drawn on the screen. When you render a JSX element, every single virtual DOM object gets updated. When virtual DOM is updated, then it compared with pre-updated virtual DOM. This process is called “diffing”. In React, you use components. Every component has state. When the state of a component changes, React updates the virtual DOM.

Conditional Rendering: In React, you can build single page application. You need to show or hide some elements and a popup in a single page application when a user clicks a certain button and hides it when he clicks the cross icon. This process of executing logic or rendering UI elements basis certain conditions is called conditional rendering.

const MyComponent = props => {
    return (
        <div>
            if (props.user) {
                <p>You are logged in!</p>
            }
            else <a href="/login">Login</a>
        </div>
    );
};