Scribd
Upload
6 views2 pages

React Practice Assignments

The document outlines four React practice assignments aimed at enhancing skills in state management, event handling, and component creation. Assignments include creating a grocery list with conditional messages, a click counter with increment and decrement functionality, a reusable alert component with styled messages, and a task manager application that combines all learned concepts. Each assignment emphasizes different React concepts such as state hooks, props, and conditional rendering.

Uploaded by

Tatenda Gori
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views2 pages

React Practice Assignments

The document outlines four React practice assignments aimed at enhancing skills in state management, event handling, and component creation. Assignments include creating a grocery list with conditional messages, a click counter with increment and decrement functionality, a reusable alert component with styled messages, and a task manager application that combines all learned concepts. Each assignment emphasizes different React concepts such as state hooks, props, and conditional rendering.

Uploaded by

Tatenda Gori
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React Practice Assignments

Assignment 1: The Simple List & Conditional Message


Objective: Practice rendering a list, using keys, and conditionally rendering text.

Task:
• Create a component called GroceryList that does the following:
• It has an initial state (using useState) containing an array of grocery items (e.g., ['Milk',
'Eggs', 'Bread']).
• It renders this list as an unordered list () using the map function. Each item must have
a unique key.
• Above the list, conditionally render a message:
• If the list is empty, show a tag with the text: 'No items to buy! ■'
• If the list has items, show a tag with the text: 'Here's your shopping list:'

Concepts Used: State Hook, Rendering a List, Keys, Conditional Rendering.

Assignment 2: The Click Counter


Objective: Practice using the State Hook and handling events.

Task:
• Create a component called ClickCounter.
• It defines a state variable count starting at 0.
• It displays the current count in a tag (e.g., 'Count: 0').
• It has a button with the text 'Increment'.
• When the button is clicked, the count state should increase by 1.
• Bonus Challenge: Add a 'Decrement' button that decreases the count by 1.

Concepts Used: State Hook, Handling Events.

Assignment 3: The Reusable Message Component


Objective: Practice creating components that accept props.

Task:
• Create a component called Alert that accepts two props:
• variant (a string): Can be either 'success', 'warning', or 'error'.
• children (a ReactNode): The text to display inside the alert.
• Inside the Alert component, conditionally style the message based on the variant prop:
• 'success' → Green text
• 'warning' → Orange text
• 'error' → Red text
• Use this Alert component in your main App component at least twice with different
variants and messages.
Concepts Used: Props, Passing Children, Conditional Rendering.

Assignment 4: The Item Manager (Combining Everything)


Objective: Combine state, lists, events, props, and conditional rendering into a single, interactive
application.

Task:
• Create a small application with the following features:
• State: An array of objects representing tasks. Each task should have an id (number)
and text (string).
• Initial state: [{ id: 1, text: 'Learn React' }]
• Rendering: Render the list of tasks. Each task should be displayed in a list item ().
• Adding Items: Include an field and an 'Add' button. When clicked, add the text as a
new task.
• Clear the input field after adding.
• Conditional Rendering: If there are no tasks, display 'No tasks yet. Add one above!'.
• Bonus: Add a 'Delete' button to remove specific tasks.

Concepts Used: State Hook, Rendering Lists, Keys, Handling Events, Props, Conditional
Rendering.

You might also like