React.js Tutorials
WhatsApp Channel
Join
Facebook Page
Follow

React Components Basics

📘 React.js 👁 43 views 📅 Nov 05, 2025
⏱ Estimated reading time: 2 min

Components are the core building blocks of a React application. A component represents a part of the user interface and can be reused throughout the app.

What is a Component?

A React component is a JavaScript function or class that returns JSX.

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

Types of Components

1. Functional Components (Recommended)

Functional components are simple JavaScript functions.

function Header() {
  return <header>My Website</header>;
}

  • Easy to write and test

  • Support Hooks

  • Preferred in modern React

2. Class Components (Older)

Class components use ES6 classes.

import React from "react";

class Header extends React.Component {
  render() {
    return <header>My Website</header>;
  }
}

  • More complex

  • Mostly replaced by functional components

Using Components

Components can be used like HTML tags.

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

Component Naming Rules

  • Component names must start with a capital letter

  • File names usually match component names (e.g., Header.jsx)

Reusable Components

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

Use it multiple times:

<Button />
<Button />

Nesting Components

Components can contain other components.

function Card() {
  return (
    <div>
      <Title />
      <Content />
    </div>
  );
}

Returning JSX

  • A component must return one parent element

  • Use a fragment (<> </>) if needed

function List() {
  return (
    <>
      <h2>Items</h2>
      <ul>
        <li>Item 1</li>
      </ul>
    </>
  );
}

Exporting Components

export default Header;

Importing:

import Header from "./Header";

Key Points

  • Components are reusable UI blocks

  • Functional components are standard

  • Components can be nested

  • Each component returns JSX

🔒 Some advanced sections are available for Registered Members
Register Now
← Previous
Understanding JSX
Next →
Props in React
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
← Back to Tutorials

Popular Competitive Exam Quizzes

GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz