DEV Community

loading...
Cover image for How to create a function component in react

How to create a function component in react

Aastha Pandey
I write only on those topics, wherein I myself was stuck at some point in time.
・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"

Discussion (0)