A React component is the fundamental building block of a React application. In this section, we will learn how to create React components and understand their key features.

A React component represents a small part of the user interface on a web page. Its main responsibility is to render the UI and update it whenever its internal data (state) changes. In addition, a component handles user interactions such as clicks, inputs, and other events.

Responsibilities of a React Component

A React component provides the following functionalities:

Initial rendering of the user interface

Handling and managing events

Updating the UI when the internal state changes

These features are achieved using three core concepts:

Props (Properties) – Allow a component to receive input data

Events – Enable the component to handle user interactions

State – Allows the component to store and manage data internally

React supports two main types of components:

Function Components

Class Components

Function Components

A function component is a plain JavaScript function that accepts a single argument (props) and returns a React element.

Note: A React element is not a component. A component is composed of one or more elements.

Syntax of a Function Component

function function_name(argument_name) {   return JSX; }

Function components are simple, lightweight, and commonly used for UI rendering.

Class Components

Class components are created using ES6 classes. Every class component must extend React.Component.

Syntax of a Class Component

class ClassName extends React.Component {   render() {      return

Hello, {this.props.name}

Class components provide built-in support for state management and lifecycle methods.

React components can be created in two ways:

Function component – Uses JavaScript functions

ES6 class component – Uses JavaScript classes

Key Differences Between Function and Class Components

Function Components

Minimal and simple

Only required to return JSX

Originally did not support state or lifecycle methods

Now support state and lifecycle using hooks (useState, useEffect)

function Hello() {   return

Class Components

Support state management by default

Have lifecycle methods

Require more boilerplate code

class Hello extends React.Component {   render() {      return

The same component can be written as a function component:

function ExpenseEntryItem() {   return (      

This is sufficient for simple UI components.

As applications grow, large bundles can slow down performance. Code splitting helps divide code into smaller chunks and loads only what is required.

This technique improves performance by lazy loading components when they are needed, instead of loading everything at once.

Example Without Code Splitting

import { sub } from './math'; console.log(sub(23, 14));

Example With Code Splitting

import('./math').then(math => {   console.log(math.sub(23, 14)); });

Using import() enables dynamic loading. Tools like Create React App already support code splitting out of the box.