Components are the building blocks of React applications.
Everything in React is built using components.
Examples include:
This module covers:
A Component is a reusable piece of UI.
Instead of writing the same HTML repeatedly:
<button>Login</button>
<button>Register</button>
<button>Logout</button>
Create a reusable component.
Example:
function Button() {
return (
<button>
Click Me
</button>
);
}
Usage:
<Button />
Components make React applications:
Modern React primarily uses Functional Components.
A functional component is simply a JavaScript function that returns JSX.
Syntax:
function App() {
return (
<h1>
Hello React
</h1>
);
}
Components can also be written using arrow functions.
const App = () => {
return (
<h1>
Hello React
</h1>
);
};
Both styles are valid.
React components must start with a capital letter.
Correct:
function Navbar() {
}
Incorrect:
function navbar() {
}
Lowercase names are treated as HTML elements.
function Welcome() {
return (
<h1>
Welcome
</h1>
);
}
Usage:
<Welcome />
Output:
Welcome
JSX stands for:
JavaScript XML
JSX allows HTML-like syntax inside JavaScript.
Example:
const element =
<h1>Hello</h1>;
Although it looks like HTML, it is actually JavaScript.
React.createElement(
"h1",
null,
"Hello"
);
<h1>Hello</h1>
JSX is much easier to read and write.
Incorrect:
return (
<h1>Hello</h1>
<p>World</p>
);
Correct:
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
Or use a React Fragment:
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);
Use curly braces {} to embed JavaScript expressions.
Example:
const name = "Samir";
return (
<h1>
{name}
</h1>
);
Output:
Samir
const age = 21;
return (
<h1>
{age + 1}
</h1>
);
Output:
22
Props stands for:
Properties
Props allow data to be passed from one component to another.
<User
name="Samir"
/>
function User(props) {
return (
<h1>
{props.name}
</h1>
);
}
Output:
Samir
Parent Component
↓
Props
↓
Child Component
Props always flow from parent to child.
<User
name="Samir"
age={21}
/>
Component:
function User(props) {
return (
<h1>
{props.name}
{" "}
{props.age}
</h1>
);
}
Instead of:
function User(props) {
}
Use:
function User({
name,
age
}) {
return (
<h1>
{name}
</h1>
);
}
This syntax is cleaner and easier to read.
State stores data that changes over time.
Normal variables do not automatically update the UI.
Example:
let count = 0;
Changing count does not re-render the component.
React provides the useState() hook for managing state.
import {
useState
}
from "react";
const [
count,
setCount
] = useState(0);
Meaning:
count
↓
Current Value
setCount
↓
Update Value
function Counter() {
const [
count,
setCount
] = useState(0);
return (
<button
onClick={() =>
setCount(
count + 1
)
}
>
{count}
</button>
);
}
Output:
0
↓
Click
↓
1
↓
Click
↓
2
Each state update automatically re-renders the component.
| Props | State |
|---|---|
| Passed from parent | Managed inside component |
| Read only | Can change |
| External data | Internal data |
Conceptually:
Props
↓
Parent Controls
State
↓
Component Controls
Composition means combining components together to build larger interfaces.
React encourages building UIs from small reusable pieces.
function Navbar() {
return <h1>Navbar</h1>;
}
function Footer() {
return <h1>Footer</h1>;
}
function App() {
return (
<>
<Navbar />
<Footer />
</>
);
}
Visual representation:
App
├── Navbar
└── Footer
React provides a special prop called:
children
function Card({
children
}) {
return (
<div>
{children}
</div>
);
}
Usage:
<Card>
<h1>Hello</h1>
</Card>
Output:
<div>
<h1>Hello</h1>
</div>
Composition enables:
Conditional rendering means displaying different UI based on conditions.
function App() {
const isLoggedIn = true;
if (isLoggedIn) {
return <h1>Welcome</h1>;
}
return <h1>Login</h1>;
}
The most common approach.
const isLoggedIn = true;
return (
<h1>
{
isLoggedIn
? "Welcome"
: "Login"
}
</h1>
);
Output:
Welcome
Display content only when the condition is true.
const isAdmin = true;
return (
<>
{
isAdmin &&
<h1>
Admin Panel
</h1>
}
</>
);
Output:
Admin Panel
If:
isAdmin = false;
Nothing is rendered.
function Dashboard() {
return (
<h1>
Dashboard
</h1>
);
}
function Login() {
return (
<h1>
Login
</h1>
);
}
function App() {
const loggedIn = true;
return (
loggedIn
? <Dashboard />
: <Login />
);
}
function UserProfile({
user
}) {
return (
<div>
<h2>
{user.name}
</h2>
{
user.isPremium &&
<p>
Premium User
</p>
}
</div>
);
}
If user.isPremium is true, the message is displayed.
React applications are built as trees of components.
Example:
App
├── Navbar
├── Sidebar
├── Dashboard
│
├── Card
├── Card
└── Card
└── Footer
Each component can contain additional components.
function Button() {
}
Good:
Button
Card
Navbar
Avoid:
HugeComponent.jsx
Small components are easier to understand and maintain.
<User
name="Samir"
/>
const [
count,
setCount
] = useState(0);
Instead of creating one large component:
<Card>
<Button />
</Card>
Compose multiple smaller components together.
| Concept | Purpose |
|---|---|
| Component | Reusable UI block |
| Functional Component | Function returning JSX |
| JSX | HTML-like syntax in React |
| Props | Pass data between components |
| State | Store changing data |
| useState | React state hook |
| Composition | Combine components |
| children | Nested content |
| Conditional Rendering | Show UI based on conditions |
React applications are built from reusable components.
Components
↓
JSX
↓
Props
↓
State
↓
Composition
↓
Dynamic UI
The most important React data flow is:
Parent Component
↓
Props
↓
Child Component
When users interact with the application:
User Action
↓
State Update
↓
Re-render UI
Mastering Components, JSX, Props, State, Composition, and Conditional Rendering forms the foundation of React development, including Next.js, React Native, and modern frontend applications.