In React, function components are a way to write components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. The functional component is also known as a stateless component because they do not hold or manage state

A valid functional component can be shown in the below example.

This component simply going to output a message Hello Amit. Any component you create always make sure to import it.

Create a function and imported it in App.js and then included it in the App component.  And then export it.

Open our App.js and then import component Greet. In importing we can omit the .js extension. Then we have to add the Greet component to the App component. We simply a component as a custom HTML tag. And if there is no content between the tag you can change it into the self-closing tag i.e. <Greet />.

If you save both the file and take look at the browser you should be able to see Hello Amit as given below.

Your first functional component is up and running.

Now all through functional component works perfectly the convention or preference I would say is to use the arrow function to define them.

Let's rewrite the Greet function with  the ES6 arrow function syntax

This allows us to import the component with any name.

Let me comment on the default export and prepend the constant with the export keyword. In this situation, you have to import the component with the exact same name. If I save the file and we can see an error.

Attempted import error.

You have the change the import statement to import the Greet function.