How to Create Reusable Components in React Functional Component

React is a popular JavaScript library for building web applications. It provides developers with the ability to create reusable components, which can significantly reduce development time and improve the overall efficiency of a project. In this tutorial, we will look at how to create reusable components in React functional components.

What are React Functional Components?

React Functional Components, also known as React Functional Stateless Components, are JavaScript functions that accept properties as input and return React elements as output. They are a way to create reusable and modular UI components in React.

In contrast to class-based components, functional components have a simpler syntax and are easier to read and maintain. Additionally, functional components have better performance than class-based components since they do not need to create and manage a state object.

Creating a Reusable Component

To create a reusable component in React functional components, we can use the following steps:

Step 1: Define the Component

The first step is to define the component by creating a function that accepts props as input and returns a React element. Here is an example of a simple reusable component that displays a user's name:

import React from 'react';

function UserName(props) {
  return (
    <div>
      <h2>User Name</h2>
      <p>{props.firstName} {props.lastName}</p>
    </div>
  );
}

export default UserName;

In this example, we defined a functional component called UserName that accepts two properties, firstName and lastName. The component returns a div element that contains a h2 element and a p element that display the user's name.

Step 2: Use the Component

Once we have defined the component, we can use it in our React application by importing it and passing the required props. Here is an example of how we can use the UserName component in another component:

import React from 'react';
import UserName from './UserName';

function UserProfile() {
  return (
    <div>
      <h1>User Profile</h1>
      <UserName firstName="John" lastName="Doe" />
    </div>
  );
}

export default UserProfile;

In this example, we imported the UserName component and used it in the UserProfile component. We passed the firstName and lastName properties to the UserName component to display the user's name.

Step 3: Reuse the Component

Now that we have created a reusable component, we can reuse it throughout our React application. We can pass different properties to the component to display different user names. Here is an example of how we can reuse the UserName component:

import React from 'react';
import UserName from './UserName';

function UserList() {
  const users = [
    { firstName: 'John', lastName: 'Doe' },
    { firstName: 'Jane', lastName: 'Doe' },
    { firstName: 'Bob', lastName: 'Smith' },
  ];

  return (
    <div>
      <h1>User List</h1>
      {users.map((user) => (
        <UserName key={user.firstName} firstName={user.firstName} lastName={user.lastName} />
      ))}
    </div>
  );
}

export default UserList;

In this example, we created a UserList component that displays a list of users. We defined an array of user objects and used the map method to create a list of UserName components. We passed the firstName and lastName properties to the UserName component to display each user's name.

Conclusion

In this tutorial, we looked at how to create reusable components in React functional components. We first defined what React functional components are and their advantages over class-based components. Then, we went through the three steps of creating a reusable component: defining the component, using the component, and reusing the component throughout the application.

By creating reusable components in React functional components, we can significantly reduce development time, improve the efficiency of our projects, and make our code more modular and maintainable. With this knowledge, you can start creating your own reusable components in React functional components and take your web development skills to the next level.