React Components
Learn how React interfaces are built from small, reusable pieces — then connect props, children, state, and user interaction with simple CSE examples.
Learning Path
Follow the flow from “What is a component?” to “How does state update the screen?”
1. Prerequisites & Setup
Before React
Students should know JavaScript variables, functions, objects, arrays, arrow functions, destructuring, HTML and CSS.
Tools
- VS Code
- Node.js LTS
- npm
- Modern browser
- React Developer Tools
npm create vite@latest component-lab -- --template react cd component-lab npm install npm run dev
Open the displayed local address in a browser. For the examples, replace src/App.jsx and, when needed, src/App.css. Stop the server with Ctrl+C.
ReactDOM.render examples. Current Vite projects use the modern createRoot API.2. What is a Component?
A component is an independent, reusable part of a user interface. Think of a college website as separate notice-board sections: a header, course card, timetable and footer.
Reusable
Create the UI once and use it for many students, events or cards.
Receives inputs
Components normally receive inputs called props.
Returns UI
The component returns a description of the UI, usually written in JSX.
Single responsibility
A component should have one clear reason to change. Larger interfaces can be composed from smaller components.
function ComponentName({ propertyN }) {
return <section>{propertyN}</section>;
}
<ComponentName propertyN="Course notice" />Example: Reusable StudentCard
function StudentCard({ name, branch, year }) {
return (
<article>
<h2>{name}</h2>
<p>{branch} — Year {year}</p>
</article>
);
}
export default function App() {
return (
<main>
<StudentCard name="Anita" branch="CSE" year={3} />
<StudentCard name="Ravi" branch="ECE" year={3} />
</main>
);
}StudentCard component can display different students without duplicating the markup.3. Component Composition
Composition means building a larger component by placing smaller components inside it rather than creating a deep inheritance hierarchy.
Header
Displays the page title.
EventCard
Displays event title and date.
Footer
Displays the department information.
function Header() {
return <header><h1>Campus Events</h1></header>;
}
function EventCard({ title, date }) {
return <article>
<h2>{title}</h2>
<p>{date}</p>
</article>;
}
function Footer() {
return <footer>Department of CSE</footer>;
}
export default function App() {
return (
<>
<Header />
<EventCard title="Hackathon" date="20 September" />
<Footer />
</>
);
}4. Components vs Elements & Props
Component
A JavaScript function or class that defines UI. It can contain logic and other components.
Element
The result or description created when a component is used. For example, <article>...</article> describes a built-in HTML element.
const element = <h1>Hello</h1>;
function Welcome() {
return element;
}
<Welcome />What are Props?
Props are read-only inputs passed from a parent component to a child component. In JSX, they look like attributes.
<Book
title="React"
pages={300}
authors={['Bob', 'Martine']}
/>Two common ways to read props
function Profile({ name, skills }) {
return <p>{name}: {skills.join(', ')}</p>;
}
<Profile name="Asha" skills={["JS", "React"]} />function Profile(props) {
return (
<section>
<h2>{props.name}</h2>
<p>Skills: {props.skills.join(", ")}</p>
</section>
);
}5. Children & Composition
The special children prop contains whatever is placed between a component’s opening and closing tags.
function Panel({ title, children }) {
return (
<section>
<h2>{title}</h2>
<div>{children}</div>
</section>
);
}
<Panel title="Notice">
<p>Exam on Monday.</p>
</Panel>Reusable Panel example
Lab reminder
Submit your assignment before 5 PM.
6. Function Components & Class Components
Function Component
An ordinary JavaScript function that returns JSX. Modern React generally prefers functions because Hooks allow state and effects without class syntax.
Class Component
Extends React.Component and implements a render() method. Older codebases may still use them.
Function component with conditional output
function StudentCard({ name, branch, year, passStatus }) {
const status = passStatus ? "Passed" : "Failed";
return (
<article>
<h2>{name}</h2>
<p>{branch} — Year {year} {status}</p>
</article>
);
}
export default function App() {
return (
<main>
<StudentCard name="Anita" branch="CSE" year={3} passStatus={true} />
<StudentCard name="Ravi" branch="ECE" year={3} passStatus={false} />
</main>
);
}Class component
class GreetingClass extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}StudentCard class example shows App() with <StudentCard ... /> but no return. Before running that exact example, add the required return statement inside App().7. State & Interactive Components
A React component can remember information and react when the user does something.
data owned by component
| Props | State |
|---|---|
| Comes from parent | Owned by the component |
| Read-only | Can change |
| Passed into child | Changed using a setter / state update |
useState()
const [value, setValue] = useState(initialValue);
value
The current state value.
setValue
The setter function used to request a state change.
initialValue
The starting value supplied to useState().
8. Interactive Examples
These small browser demos mirror the ideas in the uploaded notes. The interactive controls use plain JavaScript so this HTML remains dependency-free.
Vote Cast Counter — Party 1
Vote Cast Counter — Party 2
Source example
import { useState } from 'react';
function Party1() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Votes: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Click to Cast Your Vote
</button>
</main>
);
}9. Previous-State Updater
Use a functional updater when multiple state updates depend on the old value.
import { useState } from 'react';
function App() {
const [seats, setSeats] = useState(0);
function reserveTwo() {
setSeats(previous => previous + 1);
setSeats(previous => previous + 1);
}
return (
<>
<p>Reserved seats: {seats}</p>
<button onClick={reserveTwo}>Reserve two</button>
<button onClick={() => setSeats(0)}>Reset</button>
</>
);
}Try it: Seat Reservation
Each click on “Reserve two” adds two seats.
10. Quick Check
Test yourself before moving on.
Quick Revision Sheet
Component
Reusable UI building block.
Props
Read-only inputs from parent to child.
Children
Content supplied inside component tags.
State
Data owned by a component that can change and trigger UI updates.
useState
Hook that gives the current state and a setter.
Composition
Build large UI by combining smaller components.