React

Props (Passing Data to Components)

Props are used to pass data from parent component to child component.

Example : Props

Inside src, create a folder:components

Create child component at : src/components/Welcome.jsx

function Welcome({ name, role }) {
  return (
    <div>
      <h2>Welcome {name}</h2>
      <p>Your role is: {role}</p>
    </div>
  );
}

export default Welcome;

Use this Component in Parent (App.jsx)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Welcome from './components/welcome'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <Welcome name="Shree" role="Software Developer"></Welcome>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Here, App is the parent component and Welcome is the child component.

Props are like function parameters
Data flows from parent → child
Props are read-only
Same component can be reused with different data

State, Events & Hooks

State stores data that can change during application execution.
React provides hooks to manage state.

Example:

Create child component at : src/components/Counter.jsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  {/* count → state variable */}
  {/* setCount → function to update state */}

  return (
    <div>
      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>

      <button onClick={() => setCount(count - 1)}>
        Decrease
      </button>
    </div>
  );
}

export default Counter;

Use this Component in App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Welcome from './components/welcome'
import Counter from './components/Counter'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <Welcome name="Shree" role="Software Developer"></Welcome>
        <hr />
        <h1>State & Events Example</h1>
        <Counter></Counter>
        <hr />
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

useState creates state
State change re-renders UI
Events trigger state updates
React updates only required UI

State vs Props

State	Props
Stores data that can change within a component.	Used to pass data from parent to child component.
Managed inside the component.	Received from parent component.
Can be updated using useState hook.	Read-only and cannot be modified by child.
Used for handling user interactions.	Used for sharing static or dynamic data.
Changes in state re-render the component.	Props change only when parent re-renders.

CSS in React

Example:

Create component at : src/components/CssDemo.jsx

import "./CssDemo.css";
function CssDemo()
{
     const internalStyle={
            color:"orange",
            backgroundColor: "white",
            padding: "10px",
            marginBottom: "10px"
        };
    return(
       <div>
      <h1>CSS Types in React</h1>

      {/* External CSS */}
      <div className="external-style">
        This is External CSS
      </div>

      {/* Internal CSS */}
      <div style={internalStyle}>
        This is Internal CSS
      </div>

      {/* Inline CSS */}
      <div style={{ 
        color: "black", 
        backgroundColor: "yellow", 
        padding: "10px" 
      }}>
        This is Inline CSS
      </div>
    </div>
    );
}
export default CssDemo;

Create CssDemo.css in same folder

.external-style {
  color: white;
  background-color: #0d6efd;
  padding: 10px;
  margin-bottom: 10px;
}

Use this component is App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Welcome from './components/welcome'
import Counter from './components/Counter'
import CssDemo from './components/CssDemo'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <Welcome name="Shree" role="Software Developer"></Welcome>
        <hr />
        <h1>State & Events Example</h1>
        <Counter></Counter>
        <hr />
       <CssDemo></CssDemo>
        <hr />
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Key Point	Description
className	Use `className` instead of `class` to apply CSS classes in JSX.
External CSS	Best for large and reusable styles; keep CSS near related components.
Inline CSS	Styles are written as JavaScript objects inside JSX.
Internal CSS	Defined as JavaScript objects inside the component for reuse.
Assets Folder	Recommended for global styles and static files, not component-specific CSS.

Using Bootstrap in React

Steps:

Install Bootstrap using command
```
npm install bootstrap
```

Import Bootstrap CSS in Main.jsx

import 'bootstrap/dist/css/bootstrap.min.css';

Create 4 components : Header, Footer, Home, About

function Header() {
  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="container">
        <span className="navbar-brand">My React App</span>
      </div>
    </nav>
  );
}

export default Header;

function Footer() {
  return (
    <footer className="bg-light text-center py-3 mt-4">
      <p className="mb-0">© 2026 React App</p>
    </footer>
  );
}

export default Footer;

function Home() {
  return (
    <div className="container mt-4">
      <h2 className="text-primary">Home Page</h2>
      <p>Welcome to the home page of our React application.</p>
    </div>
  );
}

export default Home;

function About() {
  return (
    <div className="container mt-4">
      <h2 className="text-success">About Page</h2>
      <p>This application is built using React and Bootstrap.</p>
    </div>
  );
}

export default About;

Use all components in App.jsx

import Header from "./components/Header";
import Footer from "./components/Footer";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <>
      <Header />
      <Home />
      <About />
      <Footer />
    </>
  );
}

export default App;

comment all css code in app.css and index.css
Run application and test UI

Content

Props (Passing Data to Components)

Example : Props

State, Events & Hooks

Example:

State vs Props

CSS in React

Example:

Using Bootstrap in React

Steps: