Multiple ways to create a React UI Component in Javascript

This tutorial shows you multiple ways to create a react component with javascript.

React Components are basic building blocks of a React framework. We can create multiple ways in React App.

First, Create a react application with the below command.

npx create-react-app react-component-types

It creates an application with all required configuration and dependencies.

#Multiple ways to create a React Component

#using React.createClass with ES5

#use createReactClass in ES5

INitially, When React framework is released, the only way we can create a React Component using React.createClass.

With this, We can create react component without the ES6(Ecmascript 2016) version.

First, Install the create-react-class dependency using the npm tool

npm install  create-react-class

If you don’t install create-react-class, you can get the below error.

Module not found: Error: Can’t resolve ‘create-react-class’ in ‘A:\work\react-ui-component-types\src’

Here are steps

• First import using the required keyword.
• Create an object using createReactClass that takes an object.
• Object contains render function that returns HTML elements
• Assign the object to a variable
• Finally, export the variable

Here is a react component in the ES5 example

var createReactClass = require("create-react-class");
var CreateClassComponent = createReactClass({
  render: function () {
    return;
    <h1>CreateReactClass Component example {this.props.name}</h1>;
  },
});

export default CreateClassComponent;

#Javascript Normal Function

In this example, We will write a normal function with return HTML elements. This is also called Stateless React Components.

Following are the steps required to make a normal function as React Component.

• Import React module in the first line of a component file.
• Add a function name of the function.
• Inside a function, return keyword used which contains JSX code, rendered to DOM tree on UI
• JSX is a special syntax also called Javascript XML.
• You need to export the component using export default FunctionComponent; or export to function for reusing the component in other places.

Here is a functional component.

import React from "react";

function FunctionComponent() {
  return (
    <div className="function-component">
      <h1>Function Component example </h1>
    </div>
  );
}

export default FunctionComponent;

This component can be reused in other places as given below.

First, import this component as given below

import FunctionComponent from "./function-component";

You can use the component in other files as follows.

<FunctionComponent> </FunctionComponent>

How this component can be passed with data.

You can use the props object as a parameter to a function.

Access the properties using props.property instead of this.props.property. This does not work in Functional components.

calling this.props.the name gives the following error

Uncaught TypeError: Cannot read properties of undefined (reading 'props')

Here is an example of accessing name property

import React from "react";

function FunctionComponent(props) {
  return (
    <div className="function-component">
      <h1>Function Component example {props.name}</h1>
    </div>
  );
}

export default FunctionComponent;

You can use the component with passing name property.

<FunctionComponent name="Welcome"> </FunctionComponent>

Functional components can maintain the state using React Hooks.

#Using Functional Expression

This is another way of creating an Functional Expression Components.

It is similar to writing a function in another way.

Like assigning values to variables, Function can be assigned to variables using const as Expressions.

In this example, there is no name of a function that can be created in line with the body and assigned to a variable.

props and returns are required similar to Regular Functions.

import React from "react";

const FunctionExpressionComponent = function (props) {
  return (
    <div className="function-component">
      <h1>Function Expression Component example {props.name}</h1>
    </div>
  );
};

export default FunctionExpressionComponent;

#Using Arrow Functional expression

Arrow or lambda expressions are introduced in ES6.

These are a short way of writing a function without the name, assign to a variable declared with let or const.

the function keyword is removed and added arrow as given below.

the return statement is required if it returns multiple things

import React from "react";

const FunctionArrowComponent = (props) => {
  return (
    <div className="function-component">
      <h1>Function Expression Component example {props.name}</h1>
    </div>
  );
};

export default FunctionArrowComponent;

#Using Class Components or stateful components

Classes in introduced since the ES6 version. So class components are rewritten with the ES6 version.

React defined the class components with different native callbacks called during the life cycle of a react component. The following are steps to create class components.

• Import React module in the first line of a component file
• Create a javascript class with extends React.Component class from React
• Optional Constructor to initialize the superclass properties to use props in the component.
• Write render function that returns JSX elements
• Finally, Export the component to reuse the component in other components.

Here is an example

import React from "react";

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="class-component">
        <h1>Class Component Example </h1>
      </div>
    );
  }
}

export default ClassComponent;