How to create components in ReactJS ?

Last Updated : 04 Dec, 2023

Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS.

Table of Content

React Functional Components
React Class-based Components
Rendering the Component

Prerequisites

1. React Functional Components:

React functional components can be any JavaScript function that returns the HTML. These functional components can also accept “props”, meaning properties or data. As these are JavaScript functions or extensions of JavaScript functions, they can also be created from the ES6 convention of the arrow function. These functional components can also accept the props that we can use using JSX syntax and you can also put your normal JavaScript code before the return statement. One thing to notice is that there should only be one return per component.

Syntax:

Javascript

const Greet = (props) => {
    const person = props.name;
    return (
        <div>
            <h1>Hello {person}!!</h1>
        </div>
    )
}

2. React Class-based Components:

The class-based components also have almost the same features as React function components. but before we define our class-based component, we need to import the “React. Component” or extract the Component like “{Component}” from React.

import React, {Components} from 'react';

Syntax:

Javascript

import React, { Component } from 'react'
 
class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello {this.props.name}</h1>
            </div>
        )
    }
}

Rendering the Component:

We have successfully made the components, but in order to use them we need to render them. one can first export their components and can use them anywhere in the ReactDOM.render method after importing them.

Somewhere in your project in ReactDOM.render()

ReactDOM.render(
      <React.StrictMode>
        <Greet name="gfg " />
      </React.StrictMode>,
      document.getElementById('root')
);

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

file directory

Example: We will create a card component and pass it to the App function to render it.

Javascript

// App.js
 
import React from "react";
 
function Card({ receiver, writer }) {
    return (
        <div>
            <h1 style={{
                backgroundColor: "lightblue",
                width: "fit-content"
            }}>
                GeeksforGeeks
            </h1>
 
            <h2 style={{
                backgroundColor: "lightgrey",
                width: "fit-content"
            }}>
                A Computer Science portal for geeks.
                It contains well written, well
                thought and well explained computer
                science and programming articles
            </h2>
 
            <h3>Your truly, {writer}</h3>
        </div>
    );
}
 
export default function App() {
    return (
        <div>
            <Card writer="GFG" receiver="gfg jr" />
        </div>
    );
}