@Version : 4.5.0
@Build : 94d077c24
By using this site, you acknowledge that you have read and understand the Cookie Policy, Privacy Policy, and the Terms. Close

Ways to Create React Components

Posted Tuesday, December 24th, 2019

ReactJSNextJSJavaCript
Ways to Create React Components

I usually see React as an open ended tool with several ways of doing the same thing and this makes React very interesting. So goes creating React components. There are several ways you can create a React component. Components are the most basic things in React. The way you create a component will in most cases depend on the expected behavior of the component and sometimes even to its position in the component tree. In this post, I explore the 5 common ways you can create a component.

Class Components

Using classes is the most common way to create components before React v16.8. A simple class based react component can be something like this:

import React from 'react';

export default class Greeting extends React.Component {
    render(){
        return <h1>Hello, {this.props.name}</h1>;
    }
}

State is the property of a react component that stores its data. To provide state to a class component, all we need is a construction and assign state to the desired value, an empty object literal.

import React from 'react';

export default class Greeting extends React.Component {
    constructor(props){
        super(props);
        this.state= {name: "World"};
    }
    render(){
        return <h1>Hello, {this.state.name}</h1>;
    }
}

The life cycle of a class based component cant be manipulated very easily using the methods provided according to the docs. For example.

import React from 'react';

export default class Greeting extends React.Component {
    constructor(props){
        super(props);
        this.state= {name: "World"};
    }
    componentDidMount(){
        setTimeout(()=>this.setState({name: "Universe"}), 3000)
    }
    render(){
        return <h1>Hello, {this.state.name}</h1>;
    }
}

Function Components

This is the simplest way to create a React component. You just define a function that returns JSX. These components can have state using hooks or be stateless.

When created without state, these Components can be very simple. In the example below

import React from 'react';

export default function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

In previous versions of React before 16.8 it was not possible to create functional components with state or manage life cycle until Hooks were introduced. To add state to a functional component, we use the new React Hooks.

import React, { useState } from 'react';

function Count() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Constant JSX variables

Using the functional method above returns JSX, we can define a JSX and assign to a value and that will render inside any React component as a value.

import React from 'react';

const hello = <span>Hello</span>;

export default function Greeting() {
    return (
        <>
            {[1, 2, 3].map(value => <span key={value}>{hello} {value}</span>)}
        </>
    );
}

Using create react class.

This was a traditional way of creating React components. React used to provide React.createClass but was removed to a separate library create-react-class

import React from 'react';
import createReactClass from 'create-react-class';

const Greeting = createReactClass({
  render: function() {
    return <h1>Hello World</h1>;
  }
});

export default Greeting;

High Order Components

In the example below, the withName function returns a functional component that renders the GreetingComponent after giving it the prop name. withName is a High Order Component (HOC). HOCs can get as complex as you want because all you need is to return a valid React component in a HOC.

import React from 'react';

function withName(GreetingComponent) {
    return () => <GreetingComponent name={'World'} />;
}

function Greeting(props) {
    return <h1>Hello {props.name}</h1>;
}

export default withName(Greeting);

This also means that HOCs can return a class based component. For example, making withName return a class instead.

import React from 'react';

function withName(GreetingComponent) {
    class GreetingWithName extends React.Component {
      render (){
          return <GreetingComponent name={'World'} />
      }
    }

    return GreetingWithName;
}

function Greeting(props) {
    return <h1>Hello {props.name}</h1>;
}

export default withName(Greeting);


Thank you for finding time to read my post. I hope you found this helpful and it was insightful to you. I enjoy creating content like this for knowledge sharing, my own mastery and reference.

If you want to contribute, you can do any or all of the following 😉. It will go along way! Thanks again and Cheers!