Below are the two ways of creating function component.

importReactfrom"react";functionFirstComponent(){return(<div><h1>Helloreact!!!</h1></div>);}exportdefaultFirstComponent

or
The below code is usingarrow function for creating function component.

importReactfrom"react";constFirstComponent=()=>{return(<div><h1>Helloreact!!!</h1></div>);}exportdefaultFirstComponent

The above two function components can be importedwithout enclosing the component name inside curly braces becausedefault has been used withexport.

Note:There can be only one default export per module.

export default FirstComponent

import FirstComponent from "FirstComponent"

But if there is onlyexport in front of a function component then the import requires curly braces around the component's name.

export const FirstComponent = () => {}

import {FirstComponent} from "FirstComponent"