React State with Images

Overview

Images can be saved within a React component and imported to a component.

Learning Objectives

• Creating an assets directory in a React application
• Importing an image to a React component

Useful Commands

• $ yarn create react-app app-name
• $ yarn start
• control + c (stops the server)
• control + t (opens a new terminal tab)

Troubleshooting Tips

• Is your server running?
• Are your components imported and exported?
• What is your error message telling you?

---

Lightbulb Challenge

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.