When I first started learning React after years of working with Python, the concept of components felt both exciting and confusing.
I quickly realized that components are the heart of React. They are what make React applications modular, reusable, and easy to maintain.
In this tutorial, I’ll share what a React component is, why it matters, and how you can create one. I’ll also walk you through different methods of building components, just like I wish someone had done for me when I was starting.
What is a React Component?
A React component is like a reusable building block of your user interface. Think of it as a function or class that returns HTML (actually JSX) to display something on the screen. Components help you break down your UI into smaller, manageable pieces.
For example, in a U.S. e-commerce site, you might have components for:
- A Product Card
- A Shopping Cart
- A Checkout Button
Each of these is a React component that can be reused across different pages.
Types of React Components
There are two main types of components in React:
- Functional Components
- Class Components
Let’s go through both with examples.
1. Functional Component
Functional components are the most common way to write components today. They are simple JavaScript functions that return JSX.
function WelcomeMessage() {
return <h1>Welcome to my React App from the USA!</h1>;
}I executed the above example code and added the screenshot below.
This method uses a plain function. It’s easy to read and write, and it’s the recommended way to create components in modern React.
2. Functional Component with Props
Props (short for properties) let you pass data into a component.
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}In this method, I can reuse the same component for different users by passing different names as props.
Example usage:
<Greeting name="John" />
<Greeting name="Emily" />3. Functional Component with Hooks
Hooks let you add state and other features to functional components.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click Me</button>
</div>
);
}I executed the above example code and added the screenshot below.
This method allows the component to “remember” values (like the number of clicks) using React’s useState hook.
4. Class Component
Before hooks were introduced, class components were the standard way to manage state and lifecycle methods.
import React, { Component } from "react";
class Welcome extends Component {
render() {
return <h1>Welcome, {this.props.name}!</h1>;
}
}I executed the above example code and added the screenshot below.
This method uses ES6 classes. While still supported, class components are less common in new projects because functional components with hooks are simpler.
Why Use Components?
From my experience, components make your code:
- Reusable – Write once, use anywhere.
- Maintainable – Easier to fix or update.
- Readable – Clean structure for large projects.
For example, in a U.S. travel booking site, you could reuse a FlightCard component on multiple pages without rewriting the code.
Best Practices for Components
- Keep components small and focused on one task.
- Use props for passing data.
- Use state only when necessary.
- Organize components into folders for better project structure.
When I moved from Python to React, understanding components was the turning point. Once I got the hang of them, building UIs became much easier.
React components are simply reusable pieces of UI. You can write them as functions or classes, and enhance them with props and hooks.
If you’re just starting, I recommend sticking to functional components with hooks. They are modern, simple, and powerful enough for most applications.
And that’s it! You now know what a React component is and how to create one in different ways.
You may read:
- How to Upload Files in React JS
- How to Reset Form in React JS
- How to Handle Events in React JS
- Build an Infinite Scroll Component in React
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
