<commit_before>---
title: Getting started tutorial
layout: main.pug
category: gettingstarted
withHeadings: true
---

## Welcome to React InstantSearch

React InstantSearch is the ultimate toolbox for creating instant-search
experiences using [React](https://facebook.github.io/react/) and [Algolia](https://www.algolia.com/).

In this tutorial, you'll learn how to:

 - install `react-instantsearch` in your [React](https://facebook.github.io/react/) project
 - bootstrap an app using the `<InstantSearch>` component
 - display results from Algolia
 - add widgets to filter the results
 - connect your own component to the search

## Before we start

As mentionned earlier, React InstantSearch is meant to be used with `Algolia`.

Therefore, you'll need the credentials to an Algolia index. Here are
the credentials to an already configured index:
 - `appId`: `latency`
 - `searchKey`: `3d9875e51fbd20c7754e65422f7ce5e1`
 - `indexName`: `bestbuy`

It contains sample data for an e-commerce website.

This guide also expects you to have a working [React](https://facebook.github.io/react/) project. To follow this
guide in the best conditions, we suggest you use
[create-react-app](https://github.com/facebookincubator/create-react-app#getting-started) which
is the official React-CLI from Facebook.

## Install `react-instantsearch`

React InstantSearch is available in the [npm](https://www.npmjs.com) registry. Install it:

```shell
yarn add react-instantsearch
```

Note: we use `yarn` to install dependencies but React InstantSearch is also installable via `npm`.

## Add the <InstantSearch> component

The [<InstantSearch>](widgets/InstantSearch.html) component that will connect to Algolia
and that will synchronise all the widgets together. It maintains the state
of the search, does the queries, and provides the results to the widgets so
that they can update themselves if needed.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import {InstantSearch} from 'react-instantsearch/dom';

const App = () =>
  <InstantSearch
    appId="latency"
    apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
    indexName="bestbuy"
  >
    // Search widgets will go there
  </InstantSearch>

// Needed only if you're js app doesn't do it already.
// Create-react-app does it for you
ReactDOM.render(<App />, document.querySelector('#app'));
```

`appId`, `apiKey` and `indexName` are mandatory. Those props are the
credentials of your application in Algolia. They can be found in your [Algolia
dashboard](https://www.algolia.com/api-keys).

Congratulations 🎉 Your application is now connected to Algolia! This wrapper
will provide a context so that the instantsearch widgets you add inside
can interact with the search.

In this section we've seen:
 - how to connect a part of a [React](https://facebook.github.io/react/) application to Algolia
 - configure your credentials

 > To get more *under the hood* information about the `<InstantSearch>` wrapper
 > component, [read our guide](guide/<InstantSearch>.html).

## Load the theme

We do not inject any CSS in your application by default, only CSS class names are declared
on our widgets. It's your responsibility to then load a theme. We provide an Algolia theme
that should be a good start.

Just include it in your webpage:
```html
<link rel="stylesheet" href="https://unpkg.com/react-instantsearch-theme-algolia@2.0.0/style.min.css">
```

Read the [styling](guide/Styling_widgets.html) guide for more information.

## Display results

The core of a search experience is to display results. By default, React InstantSearch
will do a query at the start of the page and will retrieve the most relevant hits.

To display results, we are gonna use the [Hits](widgets/Hits.html) widget. This widget will
display all the results returned by Algolia, and it will update when there
are new results.

While we're doing that, let's create a new component for the search so we<commit_msg>doc(getting-started): fix version for CSS theme (#1842)<commit_after>---
title: Getting started tutorial
layout: main.pug
category: gettingstarted
withHeadings: true
---

## Welcome to React InstantSearch

React InstantSearch is the ultimate toolbox for creating instant-search
experiences using [React](https://facebook.github.io/react/) and [Algolia](https://www.algolia.com/).

In this tutorial, you'll learn how to:

 - install `react-instantsearch` in your [React](https://facebook.github.io/react/) project
 - bootstrap an app using the `<InstantSearch>` component
 - display results from Algolia
 - add widgets to filter the results
 - connect your own component to the search

## Before we start

As mentionned earlier, React InstantSearch is meant to be used with `Algolia`.

Therefore, you'll need the credentials to an Algolia index. Here are
the credentials to an already configured index:
 - `appId`: `latency`
 - `searchKey`: `3d9875e51fbd20c7754e65422f7ce5e1`
 - `indexName`: `bestbuy`

It contains sample data for an e-commerce website.

This guide also expects you to have a working [React](https://facebook.github.io/react/) project. To follow this
guide in the best conditions, we suggest you use
[create-react-app](https://github.com/facebookincubator/create-react-app#getting-started) which
is the official React-CLI from Facebook.

## Install `react-instantsearch`

React InstantSearch is available in the [npm](https://www.npmjs.com) registry. Install it:

```shell
yarn add react-instantsearch
```

Note: we use `yarn` to install dependencies but React InstantSearch is also installable via `npm`.

## Add the <InstantSearch> component

The [<InstantSearch>](widgets/InstantSearch.html) component that will connect to Algolia
and that will synchronise all the widgets together. It maintains the state
of the search, does the queries, and provides the results to the widgets so
that they can update themselves if needed.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import {InstantSearch} from 'react-instantsearch/dom';

const App = () =>
  <InstantSearch
    appId="latency"
    apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
    indexName="bestbuy"
  >
    // Search widgets will go there
  </InstantSearch>

// Needed only if you're js app doesn't do it already.
// Create-react-app does it for you
ReactDOM.render(<App />, document.querySelector('#app'));
```

`appId`, `apiKey` and `indexName` are mandatory. Those props are the
credentials of your application in Algolia. They can be found in your [Algolia
dashboard](https://www.algolia.com/api-keys).

Congratulations 🎉 Your application is now connected to Algolia! This wrapper
will provide a context so that the instantsearch widgets you add inside
can interact with the search.

In this section we've seen:
 - how to connect a part of a [React](https://facebook.github.io/react/) application to Algolia
 - configure your credentials

 > To get more *under the hood* information about the `<InstantSearch>` wrapper
 > component, [read our guide](guide/<InstantSearch>.html).

## Load the theme

We do not inject any CSS in your application by default, only CSS class names are declared
on our widgets. It's your responsibility to then load a theme. We provide an Algolia theme
that should be a good start.

Just include it in your webpage:
```html
<link rel="stylesheet" href="https://unpkg.com/react-instantsearch-theme-algolia@2.1.0/style.min.css">
```

Read the [styling](guide/Styling_widgets.html) guide for more information.

## Display results

The core of a search experience is to display results. By default, React InstantSearch
will do a query at the start of the page and will retrieve the most relevant hits.

To display results, we are gonna use the [Hits](widgets/Hits.html) widget. This widget will
display all the results returned by Algolia, and it will update when there
are new results.

While we're doing that, let's create a new component for the search so we
{'fraction_non_alphanumeric': 0.08993440968718466, 'fraction_numerical': 0.011856710393541877, 'mean_word_length': 4.56811797752809, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 18, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3686330', 'n_tokens_mistral': 2362, 'n_tokens_neox': 2229, 'n_words': 973}