Creating React Components

I would like to show the different ways we can create React Components. I like the arrow function statement style the most.

1) Function declaration#

// Different ways of creating react Components

// 1) function declaration
import React from "react";

function Component() {
  return <h1>Hello World</h1>;
}

export default Component;

2) Anonymous function statement#

// Different ways of creating react Components

// 2) anonymous function statement
import React from "react";

const Component = function () {
  return <h1>Hello World</h1>;
};

export default Component;

3) Arrow function statement#

// Different ways of creating react Components

// 3) arrow function statement
import React from "react";

const Component = () => {
  return <h1>Hello World</h1>;
};

export default Component;

4) default export function#

// Different ways of creating react Components

// 4) export default function
import React from "react";

export default () => {
  return <h1>Hello World</h1>;
};

5) classic component syntax#

// Different ways of creating react Components

// 5) classic component syntax
import React from "react";

class Component extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

export default Component;

What is your favorite one, is there a better one than the ones I mentioned here?

Originally posted on Dev.to here.