What are React Components?

Components are independent and reusable pieces of code. They serve the same purpose as JavaScript functions but work in isolation and return HTML. Components come in two types: Class components and Function components. In this tutorial, we will focus on Function components.

Functional components are like functions that return HTML elements.

In older React code bases, Class components were commonly used, but Function components are now recommended (added in React 16.8).

This example demonstrates a main App component using three child components: Header, Sidebar, and Footer.

• Flow 1: index.html → main.jsx → App.js → Header, Sidebar, Footer
  - index.html: Empty container for React.
  - main.jsx: Connects React to HTML and renders App.
  - App.js: Main layout; imports child components.
  - Header, Sidebar, Footer: Individual components included in App.
  ✅ Best for larger apps, keeps code organized.

import React from 'react';
import Header from './Header';
import Sidebar from './Sidebar';
import Footer from './Footer';

const App = () => {
  return (
    <>
      <Header/>
      <Sidebar/>
      <Footer/>
    </>
  );
}

export default App;

This example demonstrates a main component using three child components: Header, Sidebar, and Footer.

• Flow 2: index.html → main.jsx → Header, Sidebar, Footer
  - index.html: Empty container for React.
  - main.jsx: Directly renders Header, Sidebar, Footer.
  - No App.js used.
  ✅ Best for small apps; simpler but less organized as app grows.

export default function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  );
}