Posts Learn Components Snippets Categories Tags Tools About
/

4 Ways to Create React Components

Learn the 4 ways to create react components. by using the following codes

Created on Apr 11, 2022

179 views

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>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for 4 Ways to Create React Components

)