In this exercise we will revisit the Mini Weather App we produced last week and create a React version of it.
Fork and clone the repo
Run
npm installto download dependenciesTo build project run
npm run devornpm run dev -- --watchto build continuously in the background.Use API keys generated for Mini Weather App to query OpenWeatherMap and Unsplash APIs.
CSS and some placeholder React components have been supplied for you. You can insert the main photo into the element with the id
photosand thumbnails into the element with idthumbs.Before starting to code, draw a layout diagram and a tree diagram of the components. Have a think about which component will have state and what they will store. Think about what data will need to be passed to other components as props.
Use
fetchto retrieve the weather for a single day. You can see the documentation at https://openweathermap.org/current. For now, we'll set London or another location of your choice as the default. You can use the React lifecycle methodcomponentDidMountto run the initialfetch.Once you've retrieved the weather data, use its
descriptionproperty to get matching images from Unsplash. You can see the documentation for image search at https://unsplash.com/documentation#search-photos.Display the images as a gallery of clickable thumbnails. When a thumbnail is clicked we should display that image as the main image.
Use the
Searchcomponent to display what the weather is like in other citiesDisplay photographer credits in
Infocomponent with link to their portfolio on UnsplashDisplay white border around thumbnail of image currently displayed as main image using
activeclassAdd a feature of your choice
