What is a component in React

Introduction

A component is a small, reusable piece of a user interface. It helps build apps by breaking the screen into simple parts.

When you want to show a button that can be used many times in different places.

When you need a form input that behaves the same way everywhere.

When you want to split a big page into smaller, easy-to-manage sections.

When you want to reuse a header or footer on many pages.

When you want to update only one part of the screen without reloading everything.

Syntax

React

function ComponentName() {
  return (
    <div>
      {/* UI elements go here */}
    </div>
  );
}

Components are functions that return UI elements written in JSX.

Component names must start with a capital letter.

Examples

This component shows a simple greeting message.

React

function Greeting() {
  return <h1>Hello, friend!</h1>;
}

This component renders a clickable button.

React

function Button() {
  return <button>Click me</button>;
}

This component uses two smaller components inside it.

React

function App() {
  return (
    <div>
      <Greeting />
      <Button />
    </div>
  );
}

Sample Program

This program defines a small component called Welcome that shows a message. The main App component uses Welcome and adds a paragraph below it.

React

import React from 'react';

function Welcome() {
  return <h2>Welcome to React!</h2>;
}

export default function App() {
  return (
    <main>
      <Welcome />
      <p>This is a simple React component example.</p>
    </main>
  );
}

Important Notes

Components make your code easier to read and reuse.

Always start component names with a capital letter to tell React it is a component.

Use JSX inside components to describe what the UI looks like.

Summary

A component is a reusable piece of UI in React.

Components are functions that return JSX elements.

Use components to build your app in small, manageable parts.