Images can be saved within a React component and imported to a component.
- Creating an assets directory in a React application
- Importing an image to a React component
- $ yarn create react-app app-name
- $ yarn start
- control + c (stops the server)
- control + t (opens a new terminal tab)
- Is your server running?
- Are your components imported and exported?
- What is your error message telling you?
Part 1
Branch name: setup-off-on
- User story: I can navigate to localhost:3000 in the browser and see a React application.
- User story: The app has a header and a square on the screen with the word "off" in the middle.
- User story: When I click the square the word toggles from "off" to "on" and then back to "off" again.
- User story: When the lightbulb is "off" the background color of the box is white. When the lightbulb is "on" the background color of the box is yellow.
Part 2
Branch name: assets-switch
- User story: Instead of seeing a box, I see a picture of a light switch in the "off" position.
- User story: When I click the light switch the image toggles from an image in the "off" position to an image in the "on" position and then back to "off" again.
- User story: When the light switch is "off" I see a white (unlit) lightbulb. When I turn the switch "on" I see a yellow (lit) lightbulb.
Part 3: STRETCH
Branch name: add-remove-lightbulbs
- User story: I can see two buttons. One that will add a light switch and one that will remove a light switch.
- User story: When I click the button to add a light switch a can see another light switch with its accompanying lightbulb. All the switches operate independently of each other.
- User story: I can click a button to remove a light switch with its accompanying lightbulb.