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

4 Ways to Create React Components

181

2 years ago

0 comments

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

Ahmad Aziz

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

Topics:

Frontend

Resource

Average

Average

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