This is a working example of a react.js app using state to render an array of images utilizing the virtual DOM.
The project also uses the
fetch() api which provides asynchronous requests with the use of promises.
The design & layout is based on my previous vanillajs project unsplash-js-search.
My blog post for unsplash-js-search has more information regarding design aspects & working with the unsplash api.
All code for this project is on github
- Stateful Components
- Loading Feedback
- Async API Requests
- API Key Seperated Using
- Conditional Rendering
- Virtual DOM
Getting an API Key
In order to make any requests you will need to signup to unsplash as a developer & request an API key.
Adding API Key to App
Add unsplash developer key to
.env file in the base directory of the project.
new react app - first commit :ship:
installed eslint with babel and required plugins for jsx + react
added eslint config for babel, airbnb, prettier & react
added basic README with references to unsplash api
cleaned up App.js and set serviceworker for offline mode in Index.js
added main css and removed app.css reference in App.js
added basic structure for page
added constructor for basic state of search form
added basic unsplash api call which logs output to console
added API KEY to seperate .env file
added loading animation with loading state on form submit / api request
added images array to state & map over the array to display img + stop loading image
added attribution links & css styles for image results
added screenshot to repo and README
added info regarding unsplash API key to .env file
added checklist of features to README
View the project on github.
References: fetch() / reactjs / promises / Unsplash API