Components in React

Components are the building block of the React, Components describes a part of UI, components are reusable and can be nested inside other components. React is based on components and states. This is makes React such a popular library.

If you want to create an application, you usually break it into simpler parts. When programming with React, you should break your interface into its most basic parts, and those will be your React components.

Components are powerful because they are modular and reusable. You can take a basic component used in one JavaScript file of an application and reuse it in another JavaScript file without having to duplicate code. This helps to speed up development.

Components can be nested to reduce code, so that the most basic components can be grouped into a parent component.

Component as State

Component states are what give React its name. Any time a component’s state changes, its “render” function is called, updating the output. In essence, each component “reacts” to changes, which is handy for any user interface. Data stored in a state must be information that will be updated by the component’s event handlers (changes that should be update in real time as the interface is being used).

     There are 4 types of components

  1. Stateless Functional component
  2. State full Class component
  3. Pure component
  4. Higher order component

Functional Components

It is same like JavaScript function and it will take props as input which returns HTML (Jsx)

Syntax:

function welcome (props)
{
    return <Html></Html>
}
Fig: Functional component

To reduce typing code Using ES6 snippets  rfce + enter

import React from 'react'

function test () {
    return (
        <div>
            Write the code Here...
        </div>
    )
}

export default test

Class Components

Class must extend Component class. It should contain render() method, Render() method will return HTML. Class components are the most commonly used among the four component types. This is because class components are able to do everything like a functional component do but more. It will utilize the main functions of React, state, props, and lifecycle methods.

Syntax: use snippet rce+enter

Example: test.js

import React, { Component } from 'react'

export class test extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default test

Functional Vs Class components:

Difference between functional and class components

3 thoughts on “Components in React”

Leave a Reply

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