How to create a function component in react

Below are the two ways of creating function component.

import React from "react";
function FirstComponent() {

  return (
    <div >
      <h1>Hello react!!!</h1>
    </div>
  );
}
export default FirstComponent

or
The below code is using arrow function for creating function component.

import React from "react";
const FirstComponent = () => {
  return (
    <div >
      <h1>Hello react!!!</h1>
    </div>
  );
}
export default FirstComponent

The above two function components can be imported without enclosing the component name inside curly braces because default has been used with export.

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

export default FirstComponent

import FirstComponent from "FirstComponent"

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

export const FirstComponent = () => {}

import {FirstComponent} from "FirstComponent"