What Are Components in React, How to Create and Use Them?

React revolutionized web development by introducing a component-based architecture that makes building user interfaces more intuitive and maintainable. If you’re just starting with React, understanding components is your gateway to mastering this powerful library. In this comprehensive guide, we’ll walk through creating your first React component, exploring everything from basic syntax to essential concepts that will set you up for success.

What are Components in React?

A React component is a JavaScript function or class that returns HTML-like code called JSX (JavaScript XML). This JSX describes what should appear on the screen. Every component in React follows a simple principle: take in data (if needed) and return what should be displayed.

Let’s look at a simple example:

function Welcome() {
  return (
    <div className="welcome-message">
      <h1>Welcome to Our App!</h1>
      <p>We're excited to have you here.</p>
    </div>
  );
}

In this example, we’ve created a basic component called Welcome that displays a heading and a paragraph. Notice how the code looks like HTML but is actually JSX, allowing us to write HTML-like code directly in our JavaScript files.

Types of Components in React

React offers two main types of components: Functional Components and Class Components. Let’s explore both to understand their differences and use cases.

Functional Components

Functional components are the modern and recommended way to write React components. They are simply JavaScript functions that return JSX. Here’s how you write one:

function UserProfile(props) {
  return (
    <div className="user-profile">
      <img src={props.avatarUrl} alt="User avatar" />
      <h2>{props.username}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

This component takes in props (properties) and displays user information. Each prop is accessed using the props object, making it easy to customize the component’s output based on the data passed to it.

Class Components

While less common in modern React applications, class components are still important to understand as you might encounter them in existing projects:

import React from 'react';

class UserProfile extends React.Component {
  render() {
    return (
      <div className="user-profile">
        <img src={this.props.avatarUrl} alt="User avatar" />
        <h2>{this.props.username}</h2>
        <p>{this.props.bio}</p>
      </div>
    );
  }
}

The main difference is that class components use the class syntax and must extend React.Component. They also require a render() method that returns the JSX.

How to Create Components in React: A Step-by-Step Guide

Let’s create a practical component together, explaining each step along the way. We’ll build a simple “Todo Item” component that could be part of a larger todo list application.

1. Create a New Component File

First, create a new file called TodoItem.js. In React, it’s conventional to use PascalCase for component file names.

2. Write the Component Code

// 1. Import React
import React from 'react';

// 2. Create the functional component
function TodoItem({ title, completed, dueDate }) {
  // 3. Create a handler for user interactions
  const handleStatusChange = () => {
    console.log(`Todo status changed: ${title}`);
  };

  // 4. Return the JSX
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={completed}
        onChange={handleStatusChange}
      />
      <div className="todo-content">
        <h3>{title}</h3>
        <p>Due: {dueDate}</p>
      </div>
    </div>
  );
}

// 5. Export the component
export default TodoItem;

Let’s break down what’s happening in this code:

  1. The import statement brings in React, which is necessary for using JSX.
  2. We define our component using the function syntax and destructure the props we expect to receive.
  3. The handleStatusChange function is an event handler that will run when the checkbox is clicked.
  4. The return statement contains our JSX, describing how the todo item should look.
  5. Finally, we export the component so other parts of our application can use it.

How to Use Components in React

Now that we’ve created our component, let’s learn how to use it in our application.

Rendering Components

To use a component, you first need to import it and then include it in your JSX:

import TodoItem from './TodoItem';

function TodoList() {
  return (
    <div className="todo-list">
      <TodoItem 
        title="Learn React Components"
        completed={false}
        dueDate="2025-01-24"
      />
      <TodoItem 
        title="Build a Todo App"
        completed={true}
        dueDate="2025-01-25"
      />
    </div>
  );
}

Working with Props

Props (short for properties) are how we pass data to components. They work like HTML attributes but can handle any JavaScript value:

function App() {
  const todoData = {
    title: "Complete React Tutorial",
    completed: false,
    dueDate: "2025-01-26"
  };

  return (
    <div className="app">
      <TodoItem {...todoData} />
    </div>
  );
}

Managing State

State is data that can change over time. With functional components, we use the useState hook to manage state:

import React, { useState } from 'react';

function TodoItem({ title, dueDate }) {
  const [completed, setCompleted] = useState(false);

  const handleStatusChange = () => {
    setCompleted(!completed);
  };

  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={completed}
        onChange={handleStatusChange}
      />
      <div className="todo-content">
        <h3 style={{ textDecoration: completed ? 'line-through' : 'none' }}>
          {title}
        </h3>
        <p>Due: {dueDate}</p>
      </div>
    </div>
  );
}

Common Best Practices for React Components

To write better React components, follow these essential practices:

1. Keep Components Focused and Small

Each component should do one thing well. If a component becomes too complex, break it down into smaller, more manageable pieces.

2. Use Meaningful Names

Choose component names that clearly describe their purpose:

// Good
function UserProfile() { ... }
function NavigationMenu() { ... }

// Not as clear
function Data() { ... }
function Content() { ... }

3. Prop Validation

Use PropTypes or TypeScript to validate props:

import PropTypes from 'prop-types';

function TodoItem({ title, completed, dueDate }) {
  return ( ... );
}

TodoItem.propTypes = {
  title: PropTypes.string.isRequired,
  completed: PropTypes.bool.isRequired,
  dueDate: PropTypes.string.isRequired
};

4. Use Composition Over Inheritance

Instead of extending components, compose them together:

function Button({ children, ...props }) {
  return (
    <button className="custom-button" {...props}>
      {children}
    </button>
  );
}

function DeleteButton() {
  return (
    <Button className="delete-button">
      Delete Item
    </Button>
  );
}

Pro Tips for Writing Better Components

  1. Keep Components Focused: Each component should do one thing well. If your component is handling too many responsibilities, consider breaking it down into smaller, more manageable pieces.
  2. Embrace Composition: Instead of building large, complex components, compose smaller components together. This makes your code more maintainable and reusable:
function UserProfile({ user }) {
  return (
    <div className="profile">
      <UserAvatar src={user.avatar} />
      <UserInfo name={user.name} role={user.role} />
      <UserStats followers={user.followers} likes={user.likes} />
    </div>
  );
}
  1. Use Meaningful Names: Choose component and prop names that clearly communicate their purpose. This makes your code self-documenting and easier for others to understand:
// Good naming
function SubmitButton({ isLoading, onClick }) {
  return (
    <button 
      disabled={isLoading}
      onClick={onClick}
    >
      {isLoading ? 'Submitting...' : 'Submit'}
    </button>
  );
}

// Less clear naming
function Btn({ loading, handler }) {
  // ...
}

Common Beginner Mistakes to Avoid

  1. Modifying Props Directly: Props should be treated as read-only. If you need to modify data, use state instead.
  2. Forgetting the Return Statement: Every component must return JSX or null. Don’t forget the return statement in your functional components.
  3. Incorrect JSX Syntax: Remember that JSX elements must be closed (either with a closing tag or self-closing syntax) and can only return a single parent element.

Conclusion

React components are the foundation of modern React development, allowing you to build complex user interfaces from simple, reusable pieces of code. We’ve covered the basics of React components , how to create them, and best practices for using them effectively.

Remember these key points:

  • Keep components focused and well-named
  • Components are reusable pieces of UI
  • Functional components are the modern way to write React code
  • Props allow you to pass data to components
  • State manages data that changes over time

The best way to learn React is by doing. Try modifying the examples we’ve covered, combine different concepts, and build your own components. The more you practice, the more natural React’s component based thinking will become.

Previous Article

What is JSX and How Does It Work?

Next Article

How to Set Up React on Your PC

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe to our Newsletter

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨