Home / Snippets / 4 Ways to Create React Components
4 Ways to Create React Components cover

4 Ways to Create React Components


2 years ago


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>
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.






Support Us

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

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this