Creating and Rendering Components in React – Beginner’s Guide | VITSOLS

🧩 What are React Components?

A component is a reusable piece of UI. Components make large applications easier to manage by breaking them down into smaller parts.

There are two main types:

Functional Components
Class Components (older approach)

🛠️ 1. Creating a Functional Component (Modern Approach)

Functional components are simple JavaScript functions that return JSX.

jsx

    // Functional Component Example
    function Welcome() {
        return <h1>Welcome to React Components!</h1>;
    }

    export default Welcome;

🎨 2. Creating a Class Component (Legacy Approach)

    // Class Component Example
    import React, { Component } from "react";

    class Welcome extends Component {
        render() {
            return <h1>Welcome to React Class Component!</h1>;
        }
    }

    export default Welcome;

🖥️ Rendering Components in React

To display (render) a component on the screen, use ReactDOM.createRoot() and include your component inside JSX.

// Rendering the Welcome Component
import React from "react";
import ReactDOM from "react-dom/client";
import Welcome from "./Welcome";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome />);

🔗 Using Multiple Components Together

jsx

    // Header, Footer, and App Components

    function Header() {
        return <h2>React Blog Header</h2>;
    }

    function Footer() {
        return <p>© 2025 VITSOLS</p>;
    }

    function App() {
        return (
            <div>
                <Header />
                <p>This is the main content area.</p>
                <Footer />
            </div>
        );
    }

    export default App;

🔄 Passing Data with Props

    // Greeting Component with Props
    function Greeting(props) {
        return <h3>Hello, {props.name}!</h3>;
    }

    // Usage

    jsx 

    <Greeting name="Vara" />

🧱 Real-Time Use Cases of Components

Use Case	How Components Help
Navigation Bars	Reusable header across pages
Buttons & Forms	Shared UI patterns
Dashboards	Small components combine to create complex UI

Understanding JSX In React How to Pass Data Between Components