1. Node >= 18.x
2. Git Bash (Windows users)

1. Fork and clone repo
2. Run npm install
3. Run npm run dev
4. Load app in http://localhost:3003

Working app

Welcome to Module 1 Project! In this module you learned to use the Reducer hook to pull state calculations out of components and into reducer functions. In this project you will design state, build reducers and wire action dispatchers to the JSX, to allow users of your app to read, highlight and delete inspirational quotes, as well as create their own.

Important notes about your tasks:

• Watch the first minutes of the Solution Video if you need help getting started.
• There is no need to install any NPM dependencies.
• You will make changes to two modules only:
  • App.js
  • QuoteForm.js

If you open the Prototype in React Dev Tools you will find that the App component runs on three slices of reducer state:

{
  quotes: [
    {
      id: 1,                     // unique ID
      authorName: "Dr. Seuss",   // author
      quoteText: "Don't cry...", // quote
      apocryphal: false          // apocryphal means "of doubtful authenticity"
    },
   // other quotes
  ],
  displayAllQuotes: true, // whether to show all quotes or only the non-apocryphal
  highlightedQuote: null, // the ID of the currently highlighted quote, or null
}

Interact with the prototype until you understand how the state and the user interface relate to each other.

You fill find comments inside the module to help you along, but broadly, the steps are:

1. Import the reducer hook from React
2. Create an object that serves as initial state
3. Build out a basic reducer that returns state
4. Use the reducer hook inside of App component
5. Pass into the Quotes component the quotes from state as a prop
6. Build out the reducer with all the cases
7. Build out the action dispatchers inside the App
8. Pass the necessary states and action dispatchers into Quotes component as props

Some steps can be done in parallel: you can build a single case inside the reducer, and then its corresponding action dispatcher inside the component, and then pass the necessary props into Quotes component.

You fill find comments inside the module to help you along, but broadly, the steps are:

1. Import the reducer hook from React
2. Create an object that serves as initial state
3. Build out the reducer
4. Build out the action dispatchers
5. Use the reducer hook inside QuoteForm component
6. Add the missing props to the JSX

As in step 2, Some steps can be done in parallel: you can build a single case inside the reducer, and then its corresponding action dispatcher inside the component, and then repeat the process.

This step is only required if you need help getting started or get stuck at any point. HAVE FUN!