How To Create Custom Components in React?

React is a popular JavaScript library for building user interfaces around components. They are the building blocks of a React application, and they can be classified into two types: functional components and class components. In addition to these, React allows you to create your own custom components, providing a powerful and flexible way to structure your application.

In this guide, we will explore the process of creating custom components in React. We’ll cover functional and class components, explore the use of props and state, and demonstrate various examples to illustrate key concepts.

Functional Components

Creating a Simple Functional Component

In React, a functional component is a JavaScript function that accepts props as an argument and returns React elements. Let’s create a simple, functional component:

// SimpleFunctionalComponent.js
import React from 'react';
const SimpleFunctionalComponent = () => {
    return (
        <div>
            <h1>Hello from Functional Component!</h1>
        </div>
    );
};

export default SimpleFunctionalComponent;Copy

To Use This Component in Another File:

// App.js
import React from 'react';
import SimpleFunctionalComponent from './SimpleFunctionalComponent';

const App = () => {
   return (
       <div>
         <SimpleFunctionalComponent />
      </div>
   );
};
export default App;
Copy

Functional Component with Props

Props allow you to pass data from parent to child components. Let’s create a functional component that takes props:

// FunctionalComponentWithProps.js
import React from 'react';

const FunctionalComponentWithProps = (props) => {
    return (
       <div>
            <p>Hello, {props.name}!</p>
        </div>
    );
};

export default FunctionalComponentWithProps;
Copy

To Use This Component With Props :

// App.js
import React from 'react';
import FunctionalComponentWithProps from './FunctionalComponentWithProps';
const App = () => {
    return (
        <div>
            <FunctionalComponentWithProps name="John" />
        </div>
    );
};
export default App;
Copy

Class Components

Creating a Simple Class Component :

Class components are ES6 classes that extend React. Component. Let’s create a simple class component:

// SimpleClassComponent.js
import React, { Component } from 'react';
class SimpleClassComponent extends Component {
    render() {
        return (
            <div>
                <h1>Hello from Class Component!</h1>
            </div>
        );
    }
}
export default SimpleClassComponent;Copy

To Use This Class Component :

// App.js
import React from 'react';
import SimpleClassComponent from './SimpleClassComponent';
const App = () => {
    return (
        <div>
            <SimpleClassComponent />
        </div>
    );
};
export default App;Copy

Class Component with State :

The state allows a component to manage its data. Let’s create a class component with the state:

// ClassComponentWithState.js
import React, { Component } from 'react';
class ClassComponentWithState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
       };
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    Increment
                </button>
            </div>
       );
    }
}
export default ClassComponentWithState;Copy

To Use This Class Component With The State :

// App.js
import React from 'react';
import ClassComponentWithState from './ClassComponentWithState';
const App = () => {
    return (
        <div>
            <ClassComponentWithState />
        </div>
   );
};
export default App;
Copy

Conclusion

Creating custom React components provides a structured and modular approach to building user interfaces. Whether functional or class-based, components play a crucial role in React applications. Understanding how to pass data through props, manage state, and create reusable components enhances the efficiency and maintainability of your code.

This guide has covered the basics of creating custom components in React, providing you with a solid foundation to build upon. As you continue working with React, experimenting with different types of components and exploring advanced concepts will improve your proficiency in building dynamic and interactive web applications.