React JS Tutorial - Stateless Components

In this tutorial, we will learn about stateless components in React. A stateless component, also known as a functional component, is a plain JavaScript function that takes props as an argument and returns a React element.

A stateless component receives data from props and is only concerned with rendering the user interface. It does not have its own state or lifecycle methods.

Now, let's see how to create a stateless component. Go to your project and navigate to the component directory. Create a new component, for example, Teacher.js.

Open the Teacher.js component and add the following code. First, import React, and then create a functional component:

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; 

Next, add the Teacher component to the App.js file. Open App.js and import the Teacher component:

import Teacher from './components/Teacher'; 

Now, add the Teacher component to the App.js file and pass the props:

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

Save the file and let's check the result. Switch to your browser and navigate to localhost:3000. You should see the Teacher component rendered on the page.

This demonstrates how to create a stateless component, also known as a functional component, in React. By following these steps, you can create reusable and efficient components for your React application.