6- Props and Components in React framework

What are Components and Props in ReactJS?

COMPONENTS:

A Component is one of the core building blocks of React.

In other words, we can say that every application you will develop in React will be made up of pieces called components.

 Components make the task of building UIs much easier.

 You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.  

PROPS:

 It is an object which stores the value of attributes of a tag and work similar to the HTML attributes.
 It allows passing data from one component to other components.

 It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. 

Props are immutable so we cannot modify the props from inside the component.

Props are read-only components.

Basically props are variables that store values.

AND

Component is  piece of an application  on which application is built

-------------------------------------------------------------------

Explain props and components in simple terms with example?

Let us consider there is a college .

For example- Harvard and there are  informations related to a student.

Lets call it student information and write those information in a certain format.

FIRST METHOD :

Student Information

   The name of student is Albert

Age of Albert is 26 years

The college of student is Harvard

The course in which Albert is enrolled is Physics

The course fees for one semester of college is 20,000 $      

If we have to create student information for another student all we have to do is change parameters like name, age , college  , course  and  fees .

Name, Age , College  , Course and Fees are called properties or props

 and student information is called the component of college.

-----------------------------------------------------------------------------------

SECOND METHOD :

props.name= Albert

props.age= 26

props.college= Harvard

props.course= Physics

props.fees= 20,000

Student Information

The name of student is {props.name}

Age of {props.name} is {props.age} years

The college of student is {props.college}

The course in which {props.name} is enrolled is {props.course}  

The course fees for one semester of college is {props.fees} $

You can see in first method you have to basically directly write each value(like name) into the code.

So if you want to  change  name then you have to change name everywhere name is written.

But,In second Method when you declare a variable like {props.name} then you only change value where variable is set and changes are made wherever that variable exists.

Student Information is component

AND

Name is prop