How do you create a functional component in React?

Question

Aryan Kumar · Answer

Creating a functional component in React is quite straightforward. Functional components are functions that return JSX, and they are the modern way of building React components. Here's how you create a functional component:

Import React: First, you need to import React at the top of your file if you haven't already. You also need to import any other React modules you'll be using.
Write the Function: Create a JavaScript function that represents your component. This function should return JSX, which describes how your component should render.
Export the Component: Export your functional component so that it can be used in other parts of your application.

import React from 'react';

function MyFunctionalComponent() {
  return (
    <div>
      <h1>Hello, Functional Component!</h1>
      <p>This is a simple functional component in React.</p>
    </div>
  );
}

export default MyFunctionalComponent;

Functional components are the preferred way to create components in React, especially for simple UI elements. They are easier to read, write, and maintain compared to class components. If your functional component needs to manage state or use lifecycle methods, you can use React hooks like useState and useEffect to achieve that.

Gulshan Negi · Answer

Well, here is a simple example of creating a function in React. Thanks

forum

How do you create a functional component in React?

Can you answer this question?

2 Answers