In this video we are going to learn about Stateless Components.
A functional or stateless component is just a plain JavaScript function which takes props as an argument and returns a react element.
function component Receives data from props.
Its Only concerned with UI.
Now lets see how can we create stateless component.
Go to the project and and inside the component directory lets create a new component.
Lets say component name Teacher.js.
Now just open Teacher.js component.
Inside the Teacher component write the following code.
First of all import the React and then create functional compoenent.

import React from 'react';

 const Teacher = (props) =>{ 
        const {name,email,phone} = props; 
        return ( 
            <div> 
                <h3>Teacher Details</h3> 
                <p>Name: {name}</p> 
                <p>Email: {email}</p> 
                <p>Phone: {phone}</p> 
            </div> 
        ) 
}
export default Teacher; 

Now add this Teacher component to the App.js.
So just open App.js and here import Teacher Component.

import Teacher from './components/Teacher'; 

Now add the Teacher component here and pass the props

<Teacher name=\"Peter\" email=\"peter@gmail.com\" phone=\"444444444\" /> 

Now save the file and lets check.
So switch to the browser and go to the url localhost:3000.
You can see the component here.
So in this way we can create stateless component or functional component.