the difference between React class component and React functional component

 Hello again my friend mr.reader , how are you today..?

i hope you doing fine and i hope you like programming  because today i'm gonna talk 

about simple difference between 

  React class component and React functional component ...??

if you are not a programmer you may be wondering ... 

what is React in first place..??

ok mr.reader let me explain some basic stuff which would ease things in future.

first we as web programmers we create web pages with some languages for
design --we use HTML , CSS, JAVA-SCRIPT
dealing with data and server---we use PHP and other languages 

 so as you see in designing languages we use JAVA-SCRIPT and this language is use to make some interaction with the user 

like CLICKING , SCROLL , TYPING .....and other thing .

but that's take so many lines and we can not use same block of code without making our code 

bigger and unreadable and that's a bad coding .

  to make it better Facebook had introduced to us REACT as JAVA-SCRIPT FRAMEWORK

 FRAMEWORK ...is a library of any language which make writing code is less in lines and reusable .

so...you now know what is JAVA-SCRIPT , REACT , FRAMEWORK , lets go

to the main subject and combine all of that to make it easy 

to understand what the main Title means

so let me also know you that every dynamic web page has two main things :

DATA ,,, FUNCTIONALITY 

DATA : the information about user (you) like email , password , phone , name of course

 FUNCTIONALITY: How to collect those data and what to do with it .

in REACT there are two we can say PATTERNS writing code  :

 class component----functional component

these two are working in similar way : taking data and dealing with it

but HOW THEY DO THAT , THAT'S BECAME THE DIFFERENCE

so first we gonna talk about class component 

in programming every class should have contain a data and functions 

in REACT data are called state

so if we want to write a class we do it like this :

                     _________________________________________________________________________

class Car extends React.Component                                                                      {                   

this.state ={name :"Toyota"}                                                                                                      

function getCarName( ){                                                                                                            

return this.state.name;}                                                                                                               

}                                                                                                                                                  

render(){                                                                                                                                     

<p>{this.getCarName}<p>      }                                                                                                

__________________________________________________________________________

 

ok to make it clear what we done up there:

• we created a class which will have all features of React Component
• set state (data) for that class Car which is the name "Toyota"
• set a function which will till us the name when we CALL IT
• we made a call our function inside a Paragraph element 

so it should show us like this :

that's cool right ......

 in functional component we just write the function getCarName( ) only.

 but how the function would know / get the state/data....??

here comes the role of other function called usestate( )

which is kinda of HOOKS but i'm gonna explain what is HOOKS later in

future topics.

 usestate( ) takes two let say "parameters" to work

set of data places in one place call array

function to deal with state

so when ever we want to manipulate with state we should use that function attached in usestate( )

worrying : we shall not to manipulate state using the function in  usestate( )

directly , we should use it in other function which takes old state and after we can change it.

so if we want to use  functional component we use it like this :

import React, { useState } from "react";

const FComponent ( ) {                                                                                                          

 const [count, setCount] = useState(0);                                 

                            

    const increase = () => {                                            

        setCount(count+1);                                              

    }                                                                  

                                                                  

    return (                                                            

            <h3>Counter App using Functional Component : </h3>          

          <h2>{count}</h2>                                              

            <button onClick={increase}>Add</button>

        </div>

    )                                                                  

}                                                                       

and so it should show us like this :

and so after all of that we can tel that the main differences are :

 so i hope you understood now the difference between those two

until next time thank you for your time mr.reader and Good Bye  👋👋