How to Make an Image Search App in React using the Unsplash API

Contents

  1. How to Create the React App
  2. How to Build the UI of our App
  3. How to Get the Access Key and API Endpoint from Unsplash
  4. How to Use Hooks in our App
  5. How to Display Images in our App
  6. How to Handle Errors
  7. Conclusion

What will we learn?

  1. How to get API endpoints and Access Keys from the Unsplash developer’s dashboard.
  2. How to use the useState and useEffect hooks to fetch data from the API.
  3. How to use the map function to display images or any other data from the API.

How to Create the React App

npx create-react-app image-search-app

How to Build the UI of our App

  1. The Input section
  2. In the Result section where we will show the images
import React from "react";
const App = () => {
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-12 d-flex justify-content-center align-items-center input">
<input
className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
type="text"
placeholder="Search Anything..."
/>
<button
type="submit"
onClick={Submit}
className="btn bg-dark text-white fs-3 mx-3"
>
Search
</button>
</div>
</div>
</div>
</>
);
};
export default App;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.