4 Ways to Create React Components

Create ReactJS Component using createClass

The original way to create a ReactJS component was to use createClass and below you can learn how it's defined.

import React from "react";

var HelloWorld = React.createClass({
  render: function () {
    return <h1>Hello World</h1>;
  },
});

Create ReactJS Component using Class

The 2nd option is to declare the component by using class and by using this method you can extend from the React Component.

import React from "react";

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

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

Create ReactJS Component using Function Component

The other popular way is to create a functional component and you can define it like below.

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

Create ReactJS Component using Arrow Function

Just like the function component, you can write it using the arrow function and it's more concise and straightforward.

const HelloWorld = (props) => <h1>Hello World</h1>