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.

--

--

--

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Make Use of Angular Barrels for Better Organization of Imports

Calling REST API inside GraphQL queries

What’s wrong with snapshot tests

Function Declaration Vs. Expression in Javascript

Chain React Speaker Interview: Vlad Novick on Programming, Augmented Reality, and Our Cyberpunk…

Let’s build a Blog: Emails, Custom Responses & Nuxt.js 2.0.

Selecting Elements with JQuery.

Building a Proxy Server in Koa for React SPA

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.

More from Medium

10 Animation Libraries for React

React — interesting closure scope capture

What is React? Why is React better than vanilla JavaScript?

What is React?