App.js
- Uses
NameTag
- Uses
NameTag.js
- Container component
- contains state
- Uses the other components
ColorSelector.js
- Presentational/Functional component
- Color input to change font color
- Color input to change background color
TextSelector.js
- Presentational/Functional component
- Text input
Shape.js
- Presentational/Functional component
- takes
text
,color
andbackgroundColor
props - Should display
text
- Should change
color
andbackgroundColor
based on props - HINT: Use
<div style={{ width: '100px', height: '100px' }}>
to pass in styles
Snapshot test all components. Use toMatchSnapshot()
to create a snapshot.
- Tests: 10pts
- Components: 20pts
- Clean style: 5pts
- State management: 15pts