The functional component is also known as a stateless component because they do not

hold or manage state. It can be explained in the below example.

Example
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<First/>
<Second/>
</div>
);
}
}
class First extends React.Component {
render() {
return (
<div>
<h1>First component</h1>
</div>
);
}
}
class Second extends React.Component {
render() {
return (
<div>
<h2>Second component</h2>
<p>This websites contains the great CS tutorial.</p>
</div>
);
}
}
export default App;
==========================================================

Class as Component
Here is a ReactJS example that uses a class as a component.

test.jsx

import React from 'react';

import ReactDOM from 'react-dom';

class Hello extends React. Component {

render() {
return <h1>Hello, react js!</h1>;
}
}
export default Hello;
We can use Hello component in index.js file as follows:

index.js

import React from 'react';

import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
The Component Hello is used as an Html tag i.e., <Hello />.
=============================================================

React Components
Components are like functions that return HTML elements.

React Components
Components are independent and reusable bits of code. They serve the same purpose
as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this
tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used. It is now
suggested to use Function components along with Hooks, which were added in React
16.8. There is an optional section on Class components for your reference.

Create Your First Component

When creating a React component, the component's name MUST start with an upper case
letter.

Class Component
A class component must include the extends React.Component statement. This
statement creates an inheritance to React.Component, and gives your component
access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Example
Create a Class component called Car

class Car extends React.Component {

render() {
return <h2>Hi, I am a Car!</h2>;
}
}

Function Component
Here is the same example as above, but created using a Function component instead.

A Function component also returns HTML, and behaves much the same way as a Class
component, but Function components can be written using much less code, are easier
to understand, and will be preferred in this tutorial.

Example
Create a Function component called Car

function Car() {
return <h2>Hi, I am a Car!</h2>;
}

Rendering a Component
Now your React application has a component called Car, which returns an <h2>
element.
To use this component in your application, use similar syntax as normal HTML:
<Car />

Example
Display the Car component in the "root" element:

ReactDOM.render(<Car />, document.getElementById('root'));

============================================
What are Props in ReactJS?
Props are properties to be used inside a component. They act as global object or
variables which can be used inside the Component.

Props to Function Component

Here is an example of passing props to a function component.

import React from 'react';

import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, React js!" />;
export default Hello_comp;

As shown above, we have added msg attribute to <Hello /> Component. The same can be
accessed as props inside Hello function, which is an object that will have the msg
attribute details, and the same is used as an expression.

The component is used in index.js as follows:

index.js

import React from 'react';

import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
Hello_comp,
document.getElementById('root')
);

===================================================================
Props to Class Component

To access the props in a class we can do it as follows:

test.jsx

import React from 'react';

import ReactDOM from 'react-dom';

class Hello extends React.Component {

render() {
return <h1>{this.props.msg}</h1>;
}
}
export default Hello;
The msg attribute is passed to the component in index.js as follows:

import React from 'react';

import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
<Hello msg="Hello, react!" />,
document.getElementById('root')
);
==============================================================

What is a State in ReactJS?

A state is a javascript object similar to props that have data to be used with the
reactjs render. The state data is a private object and is used within components
inside a class.

Example of State
Here is a working example on how to use state inside a class.

test.jsx

import React from 'react';

import ReactDOM from 'react-dom';

class Hello extends React.Component {

constructor(props) {
super(props);
this.state = {
msg: "Hello, react Tutorials!"
}
}
render() {
return <h1>{this.state.msg}</h1>;
}
}
export default Hello;

index.js

import React from 'react';

import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
<Hello />,
document.getElementById('root')
);

===========================================
The main difference between state and props is that props are immutable. This is
why the container component should define the state that can be updated and
changed, while the child components should only pass data from the state using
props.

Using Props
When we need immutable data in our component, we can just add props to
reactDOM.render() function in main.js and use it inside our component.
=================================================================

State is the place where the data comes from. We should always try to make our
state as simple as possible and minimize the number of stateful components. If we
have, for example, ten components that need data from the state, we should create
one container component that will keep the state for all of them.

======================================

Using Props
When we need immutable data in our component, we can just add props to
reactDOM.render() function in main.js and use it inside our component.

========================================

assignments
Use the brand attribute in the component:

function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}

=========================================================
Pass Data
Props are also how you pass data from one component to another, as parameters.

Example
Send the "brand" property from the Garage component to the Car component:

function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}

ReactDOM.render(<Garage />, document.getElementById('root'));

===================================================================
Create a variable named name and pass it to the Message component.

function Person(props) {
return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
const name = "Jesse"
return (
<>
<h1>Hello!</h1>
<Person name=
{
name
}
/>
</>
);
}

ReactDOM.render(<Greeting />, document.getElementById('root'));