Difference between Class components & Functional Components in react.js

We are going to create 2 components

    class component 

    functional component

Ref: https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react

ref2: https://www.youtube.com/watch?v=uGgPINlKqBs

The main & the key difference is 

 1) When we use Functional components we have to use props. BUT inside the class component, we automatically have that property & we can access that using `this.prop.age`

You can pass props in both components. But in functional components, you have to use the `props` keyword & in-class component you automatically have the refernece

Userclass.js

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

Userfunction.js

import React from 'react';

const Userfunction = (props) => {

    return (<div>{props.children} ( Userfunction )</div>);

}

export default Userfunction;

We are passing data from the User class component to the User function component & we are using props here. if you don't write the props keyword in `User function  = (props)` data will not be rendered. you will get an empty screen.

We have to use the `props` keyword only in the functional component ONLY. in class components you will have reference automatically. and you can use that using `this.props.title`

Index.js We passed title like this

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App.js';

import Users from './users/Usersclass';

ReactDOM.render(<Users title="this is commig from index.js"/>, 

document.getElementById('root'));

Userclass.js

And we are accessing like this as I mentioned above.

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

You can pass props to both functional and class components 

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction age="30">RAHUL</Userfunction>

                <Userfunction age="30">MORE</Userfunction>

                <Userfunction age="30">YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

1) In the class component you have to import component from React lib (TOP line)

2) In functional components you don't have to import.

1) Class component: There is a render method in class comp.

2) Fun comp: there is no render method.

1) Class comp: Props is automatically available. & we use that like this `this.props.title`

2) Fun comp: we have to pass prop as an argument and then we can use that props.

1.             props.children
2.             props.age

1) Whenever you want to maintain the state you must use Classcomponenet. The state can be only used in the class components.

2) Use functional components as much as you can.