Scribd
Upload
2 views

React Challenges Week1 Week2

The document outlines a series of React challenges for two weeks, focusing on fundamental concepts such as state management, conditional rendering, and component reusability. Each day presents a specific task, including building a counter, a todo list, and implementing form validation, as well as more advanced topics like using the Context API and creating custom hooks. The challenges are designed to enhance practical skills in React development through hands-on projects and bonus tasks for added complexity.

Uploaded by

mfahadkhan.user
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
2 views

React Challenges Week1 Week2

The document outlines a series of React challenges for two weeks, focusing on fundamental concepts such as state management, conditional rendering, and component reusability. Each day presents a specific task, including building a counter, a todo list, and implementing form validation, as well as more advanced topics like using the Context API and creating custom hooks. The challenges are designed to enhance practical skills in React development through hands-on projects and bonus tasks for added complexity.

Uploaded by

mfahadkhan.user
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
You are on page 1/ 3

React Challenges: Week 1 & Week 2

Week 1 Challenges

Day 1: Simple Counter (useState)

- Build a counter with increment, decrement, and reset.

- Bonus: Prevent negative numbers, change color based on value.

Day 2: Toggle Visibility (Conditional Rendering)

- Create a button that toggles the visibility of a message ("Hello, React!").

- Use useState and conditional rendering.

Day 3: Dynamic Input (Two-Way Binding)

- Create a text input.

- Show the live preview of what the user types.

- Bonus: Limit the input to 20 characters.

Day 4: Todo List (Rendering Lists)

- Build a todo app with:

- Input field to add items

- List rendering using .map()

- Delete button for each item

- Bonus: Add "mark as completed" functionality.

Day 5: Form Validation (Basic Form Handling)

- Build a simple form (name, email).

- Validate that both fields are not empty and email includes @.

- Show error messages when invalid.


Day 6: useEffect Challenge - Timer

- Build a timer that starts on mount and shows elapsed seconds.

- Use useEffect and setInterval.

- Bonus: Add start/stop/reset buttons.

Day 7: Component Reusability

- Create a reusable Button component that takes label, onClick, and color as props.

- Use it in a small app like a quiz question or toggle app.

Week 2 Challenges

Day 8: React Props Practice

- Build a Card component that takes a title, description, and image as props.

- Render multiple cards using props.

Day 9: Lifting State Up

- Create two components: Parent and Child.

- Pass state from Parent to Child and send data back via callback.

Day 10: Conditional Styling

- Build a rating app (1-5 stars).

- Change style of stars based on user selection.

Day 11: React Context API

- Set up a theme context (light/dark).

- Use context to toggle theme across components.

Day 12: Fetching Data (useEffect + fetch)

- Use fetch API to get data from JSONPlaceholder.


- Display list of users or posts.

Day 13: Pagination Logic

- Fetch 100 items and display 10 per page.

- Add Next/Previous buttons.

Day 14: Custom Hooks

- Create a custom hook `useLocalStorage`.

- Use it to store and retrieve user preferences.

You might also like