Open In App

React Components

Improve
Improve
Like Article
Like
Save
Share
Report

In React, components serve as independent and reusable code blocks for UI elements.

They represent different parts of a web page and contain both structure and behavior. They are similar to JavaScript functions and make creating and managing complex user interfaces easier by breaking them down into smaller, reusable pieces.

What are React Components?

A Component is one of the core building blocks of React. They have the same purpose as JavaScript functions and return HTML. Components make the task of building UI much easier. 

A UI is broken down into multiple individual pieces called components. You can work on components independently and then merge them all into a parent component which will be your final UI. 

Components promote efficiency and scalability in web development by allowing developers to compose, combine, and customize them as needed.

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

webpage components

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 and Class based.

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 for Functional Components:

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

Functional Component 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 for Class Components:

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

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

Class Component Example:

Create a class component called welcome.

Javascript




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.

javascript




// 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 http://localhost:3000/ on the browser window.

rendering component output

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:

Javascript




function Message(props) {
  return <h2>{props.text}</h2>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Message text="Hello, world!" />);


Components in Components

We can call components inside another component

Example

Javascript




// 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.



Last Updated : 28 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads