Now when someone starts learning react, the individual must understand about components in react. A component is a Javascript function or class that access props as a parameters and returns a react element or JSX which then renders on the UI.

You can just think of them as functions which describes the UI. Now in react components are of two types...

1. Class Component
2. Functional Component

Class Component

The Syntax to create a class component is as follows

import React, {Component} from "react"

class ClassComponent extends Component
{
   render()
   {
       return(<div>Hello I Am ankur</div>);
   }
}
export default ClassComponent;

Here You can see we have a render method, in which we are returning JSX which would result in render "Hello i am ankur on the browser".

Functional Component

The Syntax to create a functional component is as follows

import react from "react"
function FunctionalComponent
{
  return(<div>Hello I am Ankur</div>);
}

export default FunctionalComponent;

Here we don't have a render method and we directly return the JSX.

States and Props in React

A State object is a object which stores some information about the component and when that information changes the component re-renders. This is one of the features that makes react powerfull, beacuse as soon as the state will change react would automatically render the UI, we as a developer has to do nothing the react would make changes itself.

Example of using State

import React, {Component} from "react"

class ClassComponent extends Component
{
   constructor()
   {
      this.state = {name: "Ankur"}
   }
   render()
   {
       return(<div>Hello I Am {this.state.name}</div>);
   }
}
export default ClassComponent;

Here You can see we have defined a state object which has a name property. Now if we will change the name property of state object the component would render a different name.

import React, {Component} from 'react';

class StatesInClassComponent extends Component
{
    constructor()
    {
        super()
        //Setting the state object
        this.state = {
            message: "Hello reader"
        }
    }

    onChange()
    {
        //remember this is a function not a object
        this.setState({
            message: 'Thanks for clicking'
        });
    }

    render()
    {
        return(
            <div>
            <h1>{this.state.message}</h1>
            <button onClick={() => this.onChange()}> Click Me</button>
        </div>
        );
    }
}
export default StatesInClassComponent;

This code would display the message Hello reader and a button ClickMe.
Now if you click on the button the message will change to Thanks for clicking. This is power of states in react.

Example of Props
Props is short form of properties in react, it is a reserved keyword which is used to pass some information from parent to child component.