Activity: Intro to React (Carousel + Server-Generated Gallery)

1. Relevant Readings

• Synchronizing with effects
• You might not need an effect

2. Download the starter files

Carousel + Server Data

3. Install the dependencies

Navigate to the lecture17 folder on your command line. Then run:

npm install     # installs node packages from the package.json file
npm start       # starts your react app

4. Complete the following tasks

Part 1: Observe

Get oriented with the code and understand what it’s doing:

• Open the Carousel component.
  • It should look similar to the one you just made (more or less).
• Open the developer tools, navigate to the console panel, and then toggle between the different products (each product has a corresponding gallery).
• Note that a different endpoint address is printed to the screen each time you click a different gallery
  • Copy that endpoint address into a browser tab and take a look at the data that’s returned.
  • Note also that the galleries are switched out using the same technique that we used in Activity 16 (initiated from the Galleries component).

Part 2: Using the useEffect function

• Modify the Carousel component so that when the gallery switches, it fetches the photos from the server.
  • You will have to use the built-in useEffect hook
  • DEMO (see answers folder if you get stuck)