Components and Props exercise

This is an exercise to split up a traditional HTML / CSS landingpage into smaller reusable components

Prerequisite knowledge

  • You know how to make a React app using Create React App
  • You know how to make a React functional component
  • You can use JSX syntax
  • You know how to interpolate variables into JSX
  • You can use import ... from and export default ... to organise components in files
  • You can use props to make reusable components
  • You know how to use the useState hook to get and update state of a component
  • You know how to use an event listener & event handler to respond to user interactions

Problem

  • The ScoreBoard is displaying the score for different teams
  • But only a single button is working

Challenge

  • Can you make all the buttons work?
  • Bonus: can you keep repetition to a minimum?

Setup

  1. Clone the repo

  2. Cd into the repo

  3. Install dependencies

npm install
  1. Start the development server
npm start