Posts Learn Components Snippets Categories Tags Tools new 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


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) {

  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