3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

React Components: Building Blocks

of UI
CHAITANYA KURHE · Follow
4 min read · Jul 7, 2023

React is a powerful JavaScript library that simplifies the process of building

user interfaces (UIs) for web applications. At the core of React are
components, which can be thought of as the building blocks of UI. Every
application developed in React is composed of these components, allowing
developers to break down a UI into smaller, reusable pieces that can be
worked on independently and then combined to create the final UI. In this
article, we will explore the concept of React components, their types, and
how they are rendered.

What are React Components?

A React component is a piece of code that defines how a part of a user
interface should be rendered. Components encapsulate the logic and
structure of UI elements, making it easier to manage and organize the
codebase. React components are written using JSX (JavaScript XML), which

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 1/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

is a syntax extension for JavaScript that allows you to write HTML-like code
within JavaScript.

Types of React Components

React provides two types of components: functional components and class
components. Let’s take a closer look at each of these types.

Functional Components
Functional components are the simplest type of components in React. They
are essentially JavaScript functions that return JSX code to define what
should be rendered on the screen. Functional components are created by
writing a JavaScript function that can receive data as parameters. These
components are recommended for situations where the component does not
require interaction or work with other components. However, multiple
functional components can be composed under a single functional
component.

Here’s an example of a functional component in React:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

In the above example, the Greeting component is a functional component

that takes a name prop and renders a greeting message with the provided
name.

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 2/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

Class Components
Class components are more complex than functional components and offer
additional features. They are aware of other components in your program
and can work with each other. Class components can pass data from one
component to another and are created using JavaScript ES6 classes. While
functional components are recommended for simpler scenarios, class
components are ideal when components need to interact with each other or
require additional functionality.

Here’s an example of a class component in React:

class Counter extends React.Component {

constructor(props) {
super(props);
this.state = { count: 0 };
}

increment() {
this.setState((prevState) => ({ count: prevState.count + 1 }));
}

render() {
return (
<div>
Open in app
<h1>Count: {this.state.count}</h1>
<button onClick={() => this.increment()}>Increment</button>
</div>
Search Write
);
}
}

In the above example, the Counter component is a class component that

maintains a count state and renders it along with a button that increments
the count when clicked.

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 3/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

It’s important to note that both functional and class components serve the
same purpose and can achieve similar results. The choice between them
depends on the specific requirements of your application.

Rendering Components
Now that we understand the basics of React components, let’s explore how to
render them on the screen. In a previous article, we learned about rendering
elements in React using the ReactDOM.render() method. React is capable of
rendering user-defined components in addition to DOM elements.

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 the
ReactDOM.render() method. Alternatively, we can pass the component itself
as the first argument to the ReactDOM.render() method.

Here’s the syntax for initializing a component to an element:

const element = <Component />;

In the above syntax, Component is the name of the user-defined component.

It's worth noting that the name of a component should always start with a
capital letter to differentiate it from HTML tags.

Let’s take a look at an example that renders a component named Welcome :

const Welcome = () => {

return <h1>Hello, World!</h1>;
https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 4/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

};

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

In the above example, we define a functional component called Welcome that

renders a simple greeting message. We then use the ReactDOM.render()

method to render the Welcome component to the DOM element with the id of
"root".

Upon executing this code, the Welcome component will be rendered on the
screen, displaying the message "Hello, World!".

Conclusion
React components are the core building blocks of UI in React applications.
They allow developers to break down a UI into smaller, reusable pieces,
making it easier to manage and organize the codebase. React provides two
types of components: functional components and class components.
Functional components are simpler and recommended for scenarios where
components don’t require interaction with other components. Class
components are more complex and offer additional features, making them
ideal for situations that involve interactivity and complex logic. By
understanding the different types of components and how to render them,
you’ll be well-equipped to leverage the power of React in your web
applications.

React Programming JavaScript Web Development Software Development

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 5/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

Written by CHAITANYA KURHE Follow

4 Followers

Computer Engineer | Full Stack Java Developer | React.js Expertise | Technology &
Programming Enthusiast|Frontend Dev-Exploring Different Technologies|Linux

More from CHAITANYA KURHE

CHAITANYA KURHE CHAITANYA KURHE

What is CHAT GPT (Open ai) ?? Recent Trends In Cloud Computing

ChatGPT is a powerful language model Chaitanya Kurhe
developed by OpenAI. It is based on the GPT…

2 min read · Jan 14, 2023 8 min read · Jan 7, 2022

203 7

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 6/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

CHAITANYA KURHE CHAITANYA KURHE

An Introduction to JSX: Bringing An Introduction to React Hooks:

Power and Simplicity to React Simplifying State Management in…
React, a popular JavaScript library for building Introduction:
user interfaces, introduced a game-changin…

2 min read · Jul 5, 2023 3 min read · Jul 3, 2023

10 1

See all from CHAITANYA KURHE

Recommended from Medium

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 7/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

Elightwalk Technology PVT. LTD. MP Codes in Stackademic

What are the best practices for How to Create a Responsive Nav-
styling in React? Bar Component Using React with…
Discover the top styling best practices for Dynamic Nav-Bar Component with React,
React and enhance your web development… typescript, and Bootstrap5 using Vite

4 min read · Nov 24, 2023 4 min read · Sep 30, 2023

Lists

General Coding Knowledge Stories to Help You Grow as a

20 stories · 1048 saves Software Developer
19 stories · 927 saves

Coding & Development Leadership

11 stories · 522 saves 48 stories · 276 saves

Aditya Kumar Tiwari in Bootcamp Uğurcan Uçar

Mastering React Custom Hooks: Signals In React

Simplifying Your Code Like Never… Easier & More Performant Approach to State
React, the well-liked JavaScript toolkit for Management
creating user interfaces, is constantly…

4 min read · Sep 29, 2023 7 min read · Nov 3, 2023

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 8/9
3/25/24, 2:02 PM React Components: Building Blocks of UI | by CHAITANYA KURHE | Medium

139 297 10

Krupal Vaishnav Reed Barger

Mastering Routing in React.js: A

Comprehensive Guide
Routing is a process in which a user is
directed to different pages based on their…
📚 React Libraries You Should Use
In 2024
I’m going to show you all of the libraries that I
would recommend you use in 2024 to build…

7 min read · Sep 29, 2023 9 min read · Feb 26, 2024

52 337 2

See more recommendations

https://medium.com/@chaitanya.kurhe18/react-components-building-blocks-of-ui-9c2011a2a1ab 9/9