Unsplash React.js Search

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

Main Features #

• Stateful Components
• Loading Feedback
• Async API Requests
• API Key Seperated Using .env
• Conditional Rendering
• Virtual DOM

Requirements #

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.

REACT_APP_API_CLIENTID = "insert-api-key-here";

Development #

Commit History #

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