React Basics: Components

React simplifies UI development by using components, which are reusable functions that return JSX to structure applications efficiently. In React, a component is a reusable piece of UI (User Interface). Think of components like building blocks — you combine small components to build larger applications.

1. Components

React applications are built using components, which are the fundamental building blocks of any React UI. A component is essentially a reusable piece of code (function) that returns JSX (HTML-like syntax). Components help in structuring and organizing a React application efficiently.

Key Features of React Components:

• ♦ Reusability: Components can be used multiple times across the application.
• ♦ Separation of Concerns: Helps organize code by breaking UI into small, manageable parts.
• ♦ Encapsulation: Each component manages its own structure, logic, and styling.
• ♦ Composition: Components can be combined to form larger UI structures.

Basic Functional Component

Header.jsx (Encapsulation: Displays the Website Title)

 
       function Header() {
          return (
            <header style={{ backgroundColor: "#007bff", color: "white", padding: "15px", textAlign: "center" }}>
              <h1>My React Website</h1>
            </header>
          );
        }
        
        export default Header;
    

MainContent.jsx (Encapsulation: Handles Main Content)

         
        function MainContent() {
          return (
            <main style={{padding: "20px", textAlign: "center", minHeight: "400px"}}>
              <h2>Welcome to My Website</h2>
              <p>This is a simple React app demonstrating component structure.</p>
            </main>
          );
        }
        
        export default MainContent;
        
    

Footer.jsx (Encapsulation: Displays the Footer)

         
        function Footer() {
          return (
            <footer style={{ backgroundColor: "#333", color: "white", padding: "10px", textAlign: "center", 
            marginTop: "20px" }}>
              <p>© 2026 My React Website. All rights reserved.</p>
            </footer>
          );
        }
        
        export default Footer;
        
    

Using the Component

App.jsx (Composition: Combines Header, MainContent, and Footer)

In App.jsx:

 
        import Header from "./Header";
        import MainContent from "./MainContent";
        import Footer from "./Footer";
        
        function App() {
          return (
            <div>
              <Header />
              <MainContent />
              <Footer />
            </div>
          );
        }
        
        export default App;
    

Rendering a Component

Rendering a component means displaying a React component inside the browser. React does this by inserting the main component (App.jsx) into index.html via main.jsx.

React renders components inside main.jsx using ReactDOM.createRoot().

Example (main.jsx)

    import { StrictMode } from 'react'; // StrictMode is to highlight potential problems in an application    
    import { createRoot } from 'react-dom/client'; // createRoot is to render your React app (React 18+)
    import './index.css'; // Import global CSS styles
    import App from './App.jsx'; // Import the main App component
    
    // Find the HTML element with id="root" in index.html
    // Then create a React root and render the application inside it
    createRoot(document.getElementById('root')).render(
      <StrictMode>
        <App /> 
      </StrictMode>
    )
    

Understanding Props (Passing Data to Components) in React

Props (short for "properties") are a way to pass data from a parent component to a child component in React. They allow components to be dynamic and reusable by providing different values when needed.

Example:

Welcome.jsx: A component receives props as a function parameter.

    // Default value for name is "Guest" if no prop is passed
    function Welcome({ name = "Guest" }) {
      return 
Hello, {name}!
;
    }
        
    export default Welcome;
    

Passing Props to a Component:

App.jsx: let’s use <Welcome /> inside App.jsx and pass data.

        import Welcome from "./Welcome"; // Import the Welcome component

        function App() {
          return (
            <div>
              <Welcome name="Alice" />  {/* Passing "Alice" as a prop */}
              <Welcome name="Bob" />    {/* Passing "Bob" as a prop */}
              <Welcome name="Charlie" /> {/* Passing "Charlie" as a prop */}
              <Welcome />  {/* No name provided */}
            </div>
          );
        }
        
        export default App;
    

Passing Multiple Props

Props aren’t limited to just one value—you can pass multiple properties.
UserCard.jsx:

        
            function UserCard({ name, age, profession }) {
              return (
                <div>
                  <h2>Name: {name}</h2>
                  <p>Age: {age}</p>
                  <p>Profession: {profession}</p>
                </div>
              );
            }
            
            export default UserCard;
        
    

Using UserCard in App.jsx:

        
        import UserCard from "./UserCard";
        
        function App() {
          return (
            <div>
              <UserCard name="Alice" age={25} profession="Developer" />
              <UserCard name="Bob" age={30} profession="Designer" />
              <UserCard name="Charlie" age={35} profession="Manager" />
            </div>
          );
        }
        
        export default App;