Everything as a Component in ReactJS

Apr 4, 2020 • 5 Minute Read

Introduction

React is a popular JavaScript-based library used for building user interfaces with a component-based architecture approach.

Each React app contains components that represent specific screens or elements in the app. Components are one of the basic building blocks of React, and they represent classes or functions that accept input and render the various HTML elements.

In this guide, you'll learn how components are used in a React application and look at various examples, including class-based components and functional components.

Creating a Simple Component

In React, you don’t need to create a class or functional-based component with lines of code just to print "Hello World." The component can be created with ES6 syntax in a single line, like this:

      const HelloWorld = () => <div>This is single line component</div>;

In this example, the ES6 arrow function has been used. This is the smallest component we can create for a React app.

Access the component like this:

      import React, { Component } from "react";
import { render } from "react-dom";

const HelloWorld = () => <div>This is single line component</div>;

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        // Accessed the component
        <HelloWorld />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

In the example above, the component is created in the same file and consumed within the render () function as <HelloWorld />. So when you run this example, the output will be the static string.

Creating a Class-based Component

In React, a component can also be written using ES6 classes syntax, as in the above example, using the arrow function.

Class-based components are a widely used approach to creating components in React if an app requires the state to be used.

Create a class-based component like this:

      import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return <div>This is simple class based component</div>;
  }
}

export default ClassComponent;
    

As you can see in the above example, Component is being imported from the package react, which allows us to convert the class into the component using ES6 syntax.

Apart from the component keyword, the file also has an additional section called render () that is the function used to render the various HTML elements into the DOM once the business logic has been implemented.

You can embed another class-based child component into any class-based component as, explained in the example below.

      import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return (
      <ChildComponent1 />
      <ChildComponent2 />
      <ChildComponent3 />
    );
  }
}

export default ClassComponent;
    

In this example, all these child components can be class-based or function-based components and can be rendered inside the parent component, called ClassComponent.

Creating a Function-based Component

You can also create a component in React using the function-based approach, which uses the normal JavaScript function.

To use a function-based component, export the function using the export keyword. The functional component can look like this:

      import React from "react";

const FunctionComponent = function(props) {
  return (
    <div>
      <p>This is function based component</p>
    </div>
  );
};

export default FunctionComponent;
    

As you can see in the above example, a function-based component is created called FunctionComponent, and from return (), the element is returned just as it would be from a class-based component.

One thing to notice in the example is that the arrow function has been used to create the component; hence, we can also use the keyword function, as explained below.

      import React from 'react';

function FunctionComponent(props) {
  return (
    <div>
      <p>This is function based component</p>
    </div>
  );
}

export default FunctionComponent;
    

Choose one of the options above to create a function-based component that can be exported and consumed into other components.

Which Component Type to Choose?

Well, it completely depends on your structural requirements, but there are advantages toeach. .

Use a class component if you want to use local state, different lifecycle hooks, multiple event handlers, or dynamic state values based on user activity.

Use a function component when you don’t need to write business logic and just need to render specific UI elements based on the props value,. Using hooks, you can use state into the function component as well.

Conclusion

In this guide, you have learned that what a component is and how to create a component using the class-based approach and the function-based approach.

You can choose either of those two options to create a component based on the business requirements of your ReactJs app.