React Components

React Components are the building blocks of ReactJS application. They help to break the user interface into smaller, reusable chunks, making the code easier to manage and maintain. Components can be class-based or function-based, and each type plays an important role in building dynamic and interactive web applications.

In this article, we’ll explore the types of React components, how to create them, and their importance in modern web development.

What are React Components?

A React component is a JavaScript function or class that returns a React element, describing how a section of the UI (User Interface) should appear. Components can manage their own state and receive data as props, making it possible to create reusable and dynamic UI elements.

In simpler terms, a React component is like a JavaScript function that returns HTML-like code (JSX) to render something on the web page.

You can see in the below image we have broken down the UI of GeeksforGeeks’s homepage into individual components.?

To further solidify your understanding of components and their role in React, consider enrolling in the React JS Course offered by GeeksforGeeks. This comprehensive course dives deep into component architecture, state management, and lifecycle methods, providing you with a well-rounded skill set. Through hands-on projects and real-world applications, you’ll gain the practical experience needed to build robust, high-performance React applications.

Components in React return a piece of JSX code that tells what should be rendered on the screen.

Types of Components in React

In React, we mainly have two types of components:

• Functional Components
• Class based Components

Functional Component in React

Functional components are just like JavaScript functions that accept properties and return a React element.

We can create a functional component in React by writing a JavaScript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. The below example shows a valid functional component in React:

Syntax:

function demoComponent() {
    return (<h1>
        Welcome Message!
            </h1>);
}        

Example: Create a function component called welcome.

JavaScript

function welcome() {
    return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
}        

Class Component in React

The class components are a little more complex than the functional components. A class component can show inheritance and access data of other components.

Class Component must include the line “extends React.Component” to pass data from one class component to another class component. We can use JavaScript ES6 classes to create class-based components in React.

Syntax:

  class Democomponent extends React.Component {
    render() {
        return <h1>Welcome Message!</h1>;
    }
}        

The below example shows a valid class-based component in React:?

Example: Create a class component called welcome.

class Welcome extends Component {
    render() {
        return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
    }
}        

The components we created in the above two examples are equivalent, and we also have stated the basic difference between a functional component and a class component. We will learn about more properties of class-based components in further tutorials.

Functional Component vs Class Component

A functional component is best suited for cases where the component doesn’t need to interact with other components or manage complex states. Functional components are ideal for presenting static UI elements or composing multiple simple components together under a single parent component.

While class-based components can achieve the same result, they are generally less efficient compared to functional components. Therefore, it’s recommended to not use class components for general use.

Rendering React Components

Rendering Components means turning your component code into the UI that users see on the screen.

React is capable of rendering user-defined components. To render a component in React we can initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or directly pass the component as the first argument to the ReactDOM.render() method.?

The below syntax shows how to initialize a component to an element:?

const elementName = <ComponentName />;        

In the above syntax, the ComponentName is the name of the user-defined component.? Note: The name of a component should always start with a capital letter. This is done to differentiate a component tag from an HTML tag.

Example: This example renders a component named Welcome to the Screen.

// Filename - src/index.js:

import React from "react";
import ReactDOM from "react-dom";

// This is a functional component
const Welcome = () => {
    return <h1>Hello World!</h1>;
};

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

Output:?This output will be visible on the https://localhost:3000/ on the browser window.

Explanation:

Let us see step-wise what is happening in the above example:?

• We call the ReactDOM.render() as the first parameter.
• React then calls the component Welcome, which returns <h1>Hello World!</h1>; as the result.
• Then the ReactDOM efficiently updates the DOM to match with the returned element and renders that element to the DOM element with id as “root”.

Props

• Props(short for properties) are a way to pass data from the parent component to the child component.
• Props are like function arguments, you can use them as attributes in components.

Example:

// Filename - src/index.js:

import React from "react";
import ReactDOM from "react-dom";

const Greet = () => {
   return <h1>Hello Geek</h1>
}

// This is a functional component
const Welcome = () => {
    return <Greet />;
};

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

The above code will give the same output as other examples but here we have called the Greet component inside the Welcome Component.

For more information on components open Component Set 2

Conclusion

Components in React allow developers to divide the page UI into many small parts. These parts work independently and can be used multiple times just like functions.

This tutorial introduces you to the concept of components. We have discussed types of components and their purpose in web development. This guide will help you understand web UI and how can you create visually appealing web UI.

Want to read more such articles...follow me ASIF ALI