React Components explained to a dummy.

Every time I try to learn new concepts, I try adding the "dummy" keyword behind my search to ensure I get the nitty-gritty of the concept. For example, if I am to learn about containers and Images in docker, I type in my search engine "Containers and Images explained to a dummy".
The reason I do this is to ensure I don't just cram the concept, but so that I can easily explain in plain English what the jargons in the official documentation describes.

Having said that, let's jump right into the business of today: Components in React JS.

Components in English language is defined as a part or element of a larger whole. For example, a car can be divided into doors, windshield, side mirrors, seats, etc. All of these makes up the car. Similarly, React components divides the user interface into various working pieces, and deals with each piece in isolation.

For example, a web page can entail body, nav-bar, header, search box, etc. All of these various components makes up the web page.

In React, there are:

1. Function components.
2. Class components.

Function components:
Function components are basically JavaScript functions that accepts a props(properties) object argument and returns a react element.
Let's see an example:

function greetings(props){
      return <h1> Hi, {props.name} </h1>;
}

Class components:
A class component is a JavaScript class that extends the React component class, in turn giving it access to the react lifecycle method like render.

Example:

Class Greetings extends React.Component{
render(){
    return <h1> Hi, {props.name} </h1>;
      }
}