REACT_APP_ALGOLIA_INDEX

REACT_APP_ALGOLIA_API_SEARCH_KEY

Algolia's Search-Only API key for frontend

REACT_APP_ALOGLIA_APP_ID

REACT_APP_ALGOLIA_API_KEY

Algolia's Api key for backend used to create/update/delete records

Gain insights into how Algolia API works, explore building search experiences, and discover extending widgets to create a tailored, fast search in your application.

react.tar.gz

Sending Data To Algolia

Run React APP

Run React APP - SearchBox

Run React APP - Extending Algolia

In this course, you will learn how the Algolia API works by understanding its main components. The end goal is for you to be able to integrate Algolia into your application to deliver tailored, fast search experiences.

In the first half, you will learn how to build a full search experience using Algolia's search API and by utilizing Algolia's InstantSearch library. In the second half, you will learn how to extend Algolia's widgets by building a custom search experience.

By the end of this course, you will have gained hands-on experience by building a fully functional search experience using Algolia.

Getting Started with Algolia API

## Overview

In this lesson, we will be looking into how we can add pagination to our result page to improve the user experience with our search functionality.

## Implementation

The `Pagination` component displays a pagination toolbar that allows the user to change the current page.

To add the `Pagination` component, we need to import it as follows: 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
							<SearchBox/>
							<Hits hitComponent={Hit} />
                           <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

## Pagination props

* `showFirst` prop is about whether to show a link to the first page or not. The prop value is optional of type `boolean` and is set to `true` by default.

* `showLast` prop is opposite to `showFirst` prop which is about whether to show the last page or not. The props value is optional of type `boolean` and is set to `true` by default.

* `showPrevious` prop is about whether or not to display a link to the previous page. The prop value is optional of type `boolean` and is set to `true` by default.

* `showNext` prop is opposite to `showPrevious`  which is about displaying a link to the next page. The value of this props is optional of type `boolean` and is set to `true` by default. 

* `totalPages` prop allows setting a maximum number of pages to display and allows the user to navigate through them. For example, if you have 10 pages of worthy products and you set it to 4, users can not navigate to any page after 4. This prop is optional of type `number` and its default value is infinity.

* By default the `Pagination` component renders `20` hits per page, so what if we want to restrict the number of hits page, we can do so by importing the `Configure` component.

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Configure,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
				      <Configure hitsPerPage={6} />
							<SearchBox/>
							<Hits hitComponent={Hit} />
                            <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

The `Configure` component allows you to provide raw search parameters to the Algolia API, which means that any props you add to the component will be forwarded to Algolia.

The prop we will use to restrict the number of hits per page is `hitsPerPage`, which takes a number.

# Overview

In this lesson, we will be looking into how we can add pagination to our result page to improve the user experience with our search functionality.

# Implementation

The `Pagination` component displays a pagination toolbar that allows the user to change the current page.

To add the `Pagination` component, we need to import it as follows: 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
							<SearchBox/>
							<Hits hitComponent={Hit} />
                           <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

# Pagination props

* `showFirst` prop is about whether to show a link to the first page or not. The prop value is optional of type `boolean` and is set to `true` by default.

* `showLast` prop is opposite to `showFirst` prop which is about whether to show the last page or not. The props value is optional of type `boolean` and is set to `true` by default.

* `showPrevious` prop is about whether or not to display a link to the previous page. The prop value is optional of type `boolean` and is set to `true` by default.

* `showNext` prop is opposite to `showPrevious`  which is about displaying a link to the next page. The value of this props is optional of type `boolean` and is set to `true` by default. 

* `totalPages` prop allows setting a maximum number of pages to display and allows the user to navigate through them. For example, if you have 10 pages of worthy products and you set it to 4, users can not navigate to any page after 4. This prop is optional of type `number` and its default value is infinity.

* By default the `Pagination` component renders `20` hits per page, so what if we want to restrict the number of hits page, we can do so by importing the `Configure` component.

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Configure,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
				      <Configure hitsPerPage={6} />
							<SearchBox/>
							<Hits hitComponent={Hit} />
                            <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

The `Configure` component allows you to provide raw search parameters to the Algolia API, which means that any props you add to the component will be forwarded to Algolia.

The prop we will use to restrict the number of hits per page is `hitsPerPage`, which takes a number.

# Overview

In this lesson, we will be looking into how we can add pagination to our result page to improve the user experience with our search functionality.

# Implementation

The `Pagination` component displays a pagination toolbar that allows the user to change the current page.

To add the `Pagination` component, we need to import it as follows: 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
							<SearchBox/>
							<Hits hitComponent={Hit} />
                           <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../＄{props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

# Pagination props

* `showFirst` prop is about whether to show a link to the first page or not. The prop value is optional of type `boolean` and is set to `true` by default.

* `showLast` prop is opposite to `showFirst` prop which is about whether to show the last page or not. The props value is optional of type `boolean` and is set to `true` by default.

* `showPrevious` prop is about whether or not to display a link to the previous page. The prop value is optional of type `boolean` and is set to `true` by default.

* `showNext` prop is opposite to `showPrevious`  which is about displaying a link to the next page. The value of this props is optional of type `boolean` and is set to `true` by default. 

* `totalPages` prop allows setting a maximum number of pages to display and allows the user to navigate through them. For example, if you have 10 pages of worthy products and you set it to 4, users can not navigate to any page after 4. This prop is optional of type `number` and its default value is infinity.

* By default the `Pagination` component renders `20` hits per page, so what if we want to restrict the number of hits page, we can do so by importing the `Configure` component.

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Configure,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
				      <Configure hitsPerPage={6} />
							<SearchBox/>
							<Hits hitComponent={Hit} />
                            <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../＄{props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

The `Configure` component allows you to provide raw search parameters to the Algolia API, which means that any props you add to the component will be forwarded to Algolia.

The prop we will use to restrict the number of hits per page is `hitsPerPage`, which takes a number.

Learn how to set a number of products that appear per page instead of showing all of them together and letting the user scroll endlessly.

Introduction to Algolia

Sending and Managing Data in Algolia

Step by Step Implementation

Extending Algolia's Widgets

Implementing the Pagination Component

Overview

Implementation