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 the previous lesson, we talked about the root component of our search functionality and the composition of the search feature. 


In this lesson, we will start implementing the building blocks of the search functionality by starting to import the `SearchBox` and the `Hits` component.

## `SearchBox`

The `SearchBox` component is used to perform a text-based search query on Algolia by the user, which is the main entry point of any search functionality.

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

class App extends React.Component {
	render() {
		return (
	        <div>
				<InstantSearch>
					<SearchBox/>
				</InstantSearch>
			</div>
		);
	}
}
```

### SearchBox props

**`searchAsYouType`**: By default, searches follow an `onChange` event as it triggers search as you type. If `searchAsYouType` is set to false, searches are made after an `onClick` event or on pressing __Enter__.

**`onSubmit`**: It's optional and takes a function as a prop that gets triggered on the `submit` event of the `SearchBox`.

**`onReset`** It's optional and takes a function as a prop that gets triggered on the `reset` event of the `SearchBox`. 

**`onClick`**: It's optional and takes a function as a prop that gets triggered on the `click` event of the `SearchBox` or on pressing __Enter__.

**`translations`**: It's optional and takes in option object:   


- `submitTitle`
- `resetTitle`
- `placeholder`

## `Hits`

The `Hits` component is used to display the list of results and gets updated when a search query is triggered with filtered results returned from Algolia based on the searched text.

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

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
					<SearchBox/>
					 <Hits hitComponent={Hit} />
				</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>
  );
};
```

### Hits props

`hitComponent` takes in a function as a prop, which renders each hit from the result.

To see the above component in action, run the code below.

# Overview

In the previous lesson, we talked about the root component of our search functionality and the composition of the search feature. 


In this lesson, we will start implementing the building blocks of the search functionality by starting to import the `SearchBox` and the `Hits` component.

# `SearchBox`

The `SearchBox` component is used to perform a text-based search query on Algolia by the user, which is the main entry point of any search functionality.

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

class App extends React.Component {
	render() {
		return (
	        <div>
				<InstantSearch>
					<SearchBox/>
				</InstantSearch>
			</div>
		);
	}
}
```

## SearchBox props

**`searchAsYouType`**: By default, searches follow an `onChange` event as it triggers search as you type. If `searchAsYouType` is set to false, searches are made after an `onClick` event or on pressing __Enter__.

**`onSubmit`**: It's optional and takes a function as a prop that gets triggered on the `submit` event of the `SearchBox`.

**`onReset`** It's optional and takes a function as a prop that gets triggered on the `reset` event of the `SearchBox`. 

**`onClick`**: It's optional and takes a function as a prop that gets triggered on the `click` event of the `SearchBox` or on pressing __Enter__.

**`translations`**: It's optional and takes in option object:   


- `submitTitle`
- `resetTitle`
- `placeholder`

# `Hits`

The `Hits` component is used to display the list of results and gets updated when a search query is triggered with filtered results returned from Algolia based on the searched text.

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

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
					<SearchBox/>
					 <Hits hitComponent={Hit} />
				</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>
  );
};
```

## Hits props

`hitComponent` takes in a function as a prop, which renders each hit from the result.

To see the above component in action, run the code below.

# Overview

In the previous lesson, we talked about the root component of our search functionality and the composition of the search feature. 


In this lesson, we will start implementing the building blocks of the search functionality by starting to import the `SearchBox` and the `Hits` component.

# `SearchBox`

The `SearchBox` component is used to perform a text-based search query on Algolia by the user, which is the main entry point of any search functionality.

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

class App extends React.Component {
	render() {
		return (
	        <div>
				<InstantSearch>
					<SearchBox/>
				</InstantSearch>
			</div>
		);
	}
}
```

## SearchBox props

**`searchAsYouType`**: By default, searches follow an `onChange` event as it triggers search as you type. If `searchAsYouType` is set to false, searches are made after an `onClick` event or on pressing __Enter__.

**`onSubmit`**: It's optional and takes a function as a prop that gets triggered on the `submit` event of the `SearchBox`.

**`onReset`** It's optional and takes a function as a prop that gets triggered on the `reset` event of the `SearchBox`. 

**`onClick`**: It's optional and takes a function as a prop that gets triggered on the `click` event of the `SearchBox` or on pressing __Enter__.

**`translations`**: It's optional and takes in option object:   


- `submitTitle`
- `resetTitle`
- `placeholder`

# `Hits`

The `Hits` component is used to display the list of results and gets updated when a search query is triggered with filtered results returned from Algolia based on the searched text.

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

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
					<SearchBox/>
					 <Hits hitComponent={Hit} />
				</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>
  );
};
```

## Hits props

`hitComponent` takes in a function as a prop, which renders each hit from the result.

To see the above component in action, run the code below.

Discover what you can do with the SearchBox and Hits components and try them yourself in this lesson.

Introduction to Algolia

Sending and Managing Data in Algolia

Step by Step Implementation

Extending Algolia's Widgets

Implementing a Search Box and Results Component

Overview

`SearchBox`