# How to Build an Image Search App With Pagination Using React
In this article, we will build step-by-step a beautiful Unsplash Image Search App with pagination using React.
By building this app, you will learn:
* How to build an application using Unsplash API in React
* How to make API Calls in different scenarios
* How to use `useCallback` hook to avoid function re-creation
* How to use ESLint to fix application issues
* How to Implement Pagination in React
and much more...
Want to watch the video version of this tutorial? You can check out the video below:
%[https://www.youtube.com/watch?v=0YoT44j3Jg4&list=PLSJnlFr3D-mFm7-cdhnHdBvUdxUp-a9HL]
## **Initial Project Setup**
We will use [Vite](https://vitejs.dev/) to create a project which is a popular alternative to `create-react-app`.
Execute the following command to create a vite project:
```js
npm create vite
```
Once executed, you will be asked some questions.
For the project name, enter `unsplash_image_search`.
For framework, select `React` and for variant select `JavaScript`:
![Creating Project Using Vite](https://www.freecodecamp.org/news/content/images/2023/09/2_create_project.png align="left")
Once the project is created, open the project in VS Code and execute the following commands from the terminal:
```js
cd unsplash_image_search
npm install
npm run dev
```
Access the application by navigating to [http://127.0.0.1:5173/](http://127.0.0.1:5173/).
![Application Started](https://www.freecodecamp.org/news/content/images/2023/09/3_project_started.png align="left")
You will see the default application screen as shown below:
![Initial Screen](https://www.freecodecamp.org/news/content/images/2023/09/1_app_screen.png align="left")
Next, delete the `App.css` file and replace the contents of the `App.jsx` file with the following content:
```jsx
import React from 'react';
import './index.css';
const App = () => {
return
Welcome to Unsplash Image Search
;
};
export default App;
```
Now, open the `index.css` file and add the contents from [this GitHub repo](https://github.com/myogeshchavan97/unsplash_image_search/blob/master/src/index.css) to it.
Let's install [Bootstrap](https://getbootstrap.com/) and [react-bootstrap](https://react-bootstrap.netlify.app/) npm packages by executing the following command:
```js
npm install bootstrap react-bootstrap
```
Open the `main.jsx` file and add the following line of code on the first line, to add the base bootstrap CSS file:
```js
import 'bootstrap/dist/css/bootstrap.min.css';
```
The complete `main.jsx` file will look like this:
```jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
);
```
Now, restart the application by executing `npm run dev` command.
You will see the welcome message displayed on the screen as shown below:
![Welcome Screen](https://www.freecodecamp.org/news/content/images/2023/09/4_initial_screen.png align="left")
## **How to Add Search Input**
Now, replace the contents of `App.jsx` file with the following content:
```jsx
import React from 'react';
import { Form } from 'react-bootstrap';
import './index.css';
const App = () => {
return (
Image Search
);
};
export default App;
```
Here, we're displaying the title of `Image search` inside a `container` class, which is a Bootstrap class, to add some margin to the left and right of the page.
Then we added a [form](https://react-bootstrap.netlify.app/docs/forms/overview/) with a type of `search`.
If you check the application, you will see the following screen:
![Initial Search UI](https://www.freecodecamp.org/news/content/images/2023/09/5_searchbox.png align="left")
Now, we need to store the value entered by the user somewhere in the component.
As we will have only one input field on the page, we will use the [useRef](https://react.dev/reference/react/useRef) hook instead of the `useState` hook.
Using the `useRef` hook does not re-render the component when its value changes, which is good for performance improvement. On the other hand, changing state re-renders the component, so all of the child components will also re-render.
Inside the `App.jsx` file, declare the `useRef` hook as shown below:
```jsx
const searchInput = useRef(null);
```
Don't forget to add import for `useRef` hook at the top of the file:
```jsx
import React, { useRef } from 'react';
```
Also, add a `ref` prop for the search input, like this:
```jsx
```
Your complete `App.jsx` file will look like this:
```jsx
import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';
const App = () => {
const searchInput = useRef(null);
return (
Image Search
);
};
export default App;
```
## **How to Handle the Form Submit Action**
When we enter any search term in the search box and press the enter key, we want to add the search functionality.
To do so, add an `onSubmit` handler to the `Form` tag and create a `handleSearch` method. And assign it to the `onSubmit` prop like this:
```jsx
import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
import './index.css';
const App = () => {
const searchInput = useRef(null);
const handleSearch = (event) => {
event.preventDefault();
console.log('submitted');
};
return (
Image Search
);
};
export default App;
```
Here, we have added `