Different ways in creating a React Component

In this short article, we will be looking at the different ways that can be used to create a React component.

Let's say we are to create a React component called Counter,

• Using the Class method we will construct our codes like this:

import React from 'react';

class Counter extends Component {
   render() {
      return (...)
   }
}

Where ... should be replaced with the JSX to be rendered.

• Using the Function method, our codes will be like:

import React from 'react';

function Counter() {
   return (...)
}

Where ... should be replaced with the JSX to be rendered.

• Using ES6 Arrow function, we will write:

import React from 'react';

const Counter = () => {
   return (...)
}

Where ... should be replaced with the JSX to be rendered.