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

In this tutorial, we will make an Image Search App using the Unsplash API to get access to its enormous collection of images and also download them.

Before starting the development part of our app, let’s see how it will look exactly.

Let’s start…

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?

This project is mainly for beginners, but anyone who wants to brush up their skills can follow along. In this tutorial, you will 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

It’s very easy to create a React app — just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app image-search-app

If you are unsure how to properly set up a create-react-app project, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

How to Build the UI of our App

There will be two sections in the UI of our App:

1. The Input section
2. In the Result section where we will show the images

In the input section, we have an input tag in which we will write the search term or query. We also have a button with an onClick event handler which will trigger the function responsible for fetching the data from the API.

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;

The output will be the following:

In this article, we will not be discussing the styling part of the app. This way we can stay more focused on the React part which is more necessary to understand.

Continue Reading.

Comments

[Sloan the DEV Moderator]

Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.

If you choose to do so, you also have the option to add a canonical URL directly to your post.