bloominstituteoftechnology/module-project-react-stateful-widgets-aronniealsop

module-project-react-stateful-widgets-aRonnieAlsop created by GitHub Classroom

Module Project: React Components and Component State

This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored React components and component state. During the module, you studied what React is, what React components are and how to build them, what state is and how to make a component stateful, and how to update component state with click handlers. In this project you will demonstrate proficiency of these subjects and principles by fleshing out several stateful components.

Introduction

Read these instructions carefully. Understand exactly what is expected before starting this project.

Commits

Commit your code regularly and meaningfully. This helps both you and your team lead in case you ever need to return to old code for any number of reasons.

Description

This project includes a frontend/components folder containing several React components. In their current form these components are stateless and display hard-coded information only. You will make the app interactive by going into each component, adding state and implementing event handlers and helper functions to allow the users of the app to update state by interacting with the page.

Instructions

Task 1: Project Set Up

• Clone the repository to your machine using your terminal.
• CD into the project base directory.
• Download project dependencies by running npm install.
• Start up the app using npm run dev.
• Push commits: git push origin main.

Task 2: Minimum Viable Product

1. Each component has the required slices of state.
2. Each component's event handlers allow the user of the app to update state.
3. Updated state is correctly reflected in the DOM for each component.

Steps

• You will add functionality to all components inside inside frontend/components.
• Work on the components in the same order in which they display in Chrome (to go from the easiest challenge to the hardest).
• Each file includes a design file and a set of instructions. The instructions are generally the following:
  • Watch the design file showing the finished component, and think about how much state is needed.
  • Create the necessary slices of component state using the state hook.
  • Fix the JSX so it displays information derived from state (instead of hard-coded data).
  • Fix the event handlers so they allow the user to update state by interacting with the page.

Submission Format

• Submit a link to your repo in canvas.