React.js

React Components Basics

React.js 112 views Nov 05, 2025 2 min read

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
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