Skip to content

thoughtworks-jumpstart/react-counter-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Counter Application

Part 1

  • Create a Counter component with a state of:
  • state ={ id: 1, value: 0}
  • Render the state static value onto the counter

Part 2

  • Update Counter component to have 2 buttons that will increment and decrement the value
  • add an event handler in the counter component
  • increment the counter value in the state Concept:
  • How to create an event handler
  • How to attach it to the lowest level element (the button or checkbox or input)

Part 3

  • Change the style to show yellow if counter is zero and blue if counter is > zero
  • Concept: How to modify the class of an element depending on its value

Part 4

  • Create a Counters component
  • Import counter list from sampleData.js in Counters
  • Map through the list and create a list of Counter elements
  • Display a list of Counter all maintaing their individual state
  • Concept: How to render a list of components with map
  • Concept: passing the key attribute to uniquely identify each react element in a list

Part 6

  • Create a delete button in Counter
  • Create handler in the Counters and pass it to Counter
  • Pass the handler as a prop and attach it to the delete button Concept: Always define the handler in the component with the state you would like to modify Concept: How to pass a handler from parent to child Concept: How to pass a param to the handler so that it knows which counter to delete

Part 7

  • Show a message "No more counters" if all counters have been deleted
  • Concept: How to conditionally render a message using the && operator

Part 8

  • Add a reset button in Counters to reset all counters
  • create handler in the Counters component reset all to zero
  • remove state from child component and get all its values from props instead Concept: For a parent to control a child component the child should not have a local state

Part 9

  • Create a new component Total and add the total count to it
  • but it cannot access the state in the Counters as its a sibling
  • shift state and handlers Concept: For sibling components to share data, the state and handlers should in a common parent aka state hoisting

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published