React is a powerful JavaScript library used for building fast, interactive user interfaces, especially for web applications. But learning React is more than just reading about its features — you need hands-on practice. That’s where React exercises come in.
React exercises are small, practical coding tasks designed to help you practice and apply your knowledge of React. They’re like workout routines for your coding muscles — helping you go from beginner to confident developer by solving real-world challenges.
Why Are React Exercises Important?
React has a unique way of building UI with reusable components, hooks, props, state, JSX, and more. Just learning the theory won’t make you job-ready. You need to:
- Understand how React works in practice.
- Build components from scratch.
- Pass data using props.
- Use state to handle user interaction.
- Handle events like button clicks.
- Manage complex UI using multiple components.
React exercises help you master these skills step by step.
Types of React Exercises
Here are the most common types of exercises you’ll encounter:
1. JSX Practice
JSX is the syntax used in React to write HTML inside JavaScript.
Exercise Example:
const element = <h1>Hello, React!</h1>;
Practice: Convert normal HTML into JSX, fix syntax errors, or create simple UI using JSX.
2. Component Building
React is based on components — small building blocks of UI.
Exercise Example:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Practice: Create functional components, use props, and render them inside other components.
3. Using Props
Props allow data to flow from parent to child component.
Exercise Example:
function Greeting(props) {
return <p>Good morning, {props.user}!</p>;
}
Practice: Pass different types of props (text, numbers, arrays) and use them in child components.
4. Handling State
State helps components remember data like form input or toggle buttons.
Exercise Example:
function Counter() {
const [count, setCount] = React.useState(0);
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</>
);
}
Practice: Use useState() hook, update state, and display changes on the UI.
5. Event Handling
React supports events like click, change, mouseover, etc.
Exercise Example:
function ClickMe() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}
Practice: Handle different events like onClick, onChange, onSubmit in components.
6. Form Handling
Learn how to handle form inputs, validations, and submissions in React.
Exercise Example:
function MyForm() {
const [name, setName] = React.useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert("Submitted name: " + name);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
}
Practice: Handle multiple inputs, validations, and form submission logic.
7. Conditional Rendering
React allows you to display content based on conditions (like if/else).
Exercise Example:
function Greeting(props) {
return <h1>{props.isLoggedIn ? "Welcome Back!" : "Please Log In"}</h1>;
}
Practice: Use conditional logic to render different components or elements.
8. List Rendering and Keys
Rendering lists from arrays and assigning unique keys to each item.
Exercise Example:
function TodoList(props) {
return (
<ul>
{props.todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
);
}
Practice: Loop through arrays and display items using .map() and key.
Where to Find React Exercises?
You can find great React practice exercises on:
- freeCodeCamp
- Scrimba
- CodeSandbox
- LeetCode (React-based front-end problems)
- YouTube tutorials (many include hands-on practice)
- GitHub repositories with beginner-friendly tasks
Tips for Doing React Exercises
- Start small and move to complex challenges gradually.
- Don’t copy-paste code — type it yourself.
- Try building your own mini projects (calculator, to-do app, weather app).
- Make mistakes and debug — that’s how you learn fastest.
- Use online editors like CodeSandbox or StackBlitz to avoid setup issues.
Conclusion
React exercises are an essential part of mastering React. They help you go beyond theory and develop the practical skills needed for real-world projects. Whether you’re just starting or brushing up your skills, consistent practice with these exercises will make you a confident React developer.