Counter App

• React useReducer Practice Project

In Meta's Front End Developer Certificate program offered by Coursera, in the React Basics course they had just a brief overview of the useReducer function, so I asked Bing to give me a practice project to help me understand and implement the reducer function better. This is what it gave me.

Project Name

Counter App

Project Description

Create a simple counter application that allows users to increment, decrement, and reset the counter value. The counter value should be stored in the reducer function.

Project Requirements

✅ Create a new React application using create-react-app.

✅ Implement a CounterReducer using the reducer function.

✅ Create a CounterProvider component that wraps the entire application.

✅ Implement buttons that increment, decrement, and reset the counter value.

✅ Update the CounterProvider component to apply the updated counter value to all components in the application.

Lessons Learned

After the fiasco with my first context provider project, I knew immediately how to construct the components so that they could all pull the reducer's state from the context provider. The one thing I realized quickly from the reducer standpoint was that the state had a single key, of "count" in this project. I'm cautiously optimistic, because right now I'm feeling like I'm really understanding the basic principles of React. On to the next project!