返回首页v1.14文档

    React 快速入门

    将即时搜索体验集成到你的 React 应用程序中。

    1. 创建一个 React 应用程序

    使用 Vite 模板创建你的 React 应用程序

    npm create vite@latest my-app -- --template react

    2. 安装搜索组件库

    导航到你的 React 应用程序并安装 react-instantsearch、@meilisearch/instant-meilisearch 和 instantsearch.css。

    npm install react-instantsearch @meilisearch/instant-meilisearch instantsearch.css

    3. 初始化搜索客户端

    使用以下 URL 和 API 密钥连接到包含 Steam 视频游戏数据的 Meilisearch 实例。

    import React from 'react';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

    4. 添加 InstantSearch provider

    <InstantSearch> 是 InstantSearch 库的根 provider 组件。它接受两个 props：searchClient 和 索引名称。

    import React from 'react';
import { InstantSearch } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

const App = () => (
  <InstantSearch
    indexName="steam-videogames"
    searchClient={searchClient}
  >
  </InstantSearch>
);

export default App

    5. 添加搜索栏并列出搜索结果

    在 InstantSearch wrapper 组件内添加 SearchBox 和 InfiniteHits 组件。Hits 组件通过 hitComponent prop 接受一个自定义的 Hit 组件，这允许自定义每个搜索结果的渲染方式。

    导入 CSS 库以设置搜索组件的样式。

    import React from 'react';
import { InstantSearch, SearchBox, InfiniteHits } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import 'instantsearch.css/themes/satellite.css';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

const App = () => (
  <InstantSearch
    indexName="steam-videogames"
    searchClient={searchClient}
  >
    <SearchBox />
    <InfiniteHits hitComponent={Hit} />
  </InstantSearch>
);

const Hit = ({ hit }) => (
  <article key={hit.id}>
    <img src={hit.image} alt={hit.name} />
    <h1>{hit.name}</h1>
    <p>${hit.description}</p>
  </article>
);
export default App
    提示

    使用以下 CSS 类为你的组件添加自定义样式：.ais-InstantSearch、.ais-SearchBox、.ais-InfiniteHits-list、.ais-InfiniteHits-item

    6. 启动应用程序并开始即时搜索

    通过运行以下命令启动应用程序

    npm run dev

    现在打开你的浏览器并导航到你的 React 应用程序 URL (例如 localhost:3000)，然后开始搜索。

    React app search UI with a search bar at the top and search results for a few video games

    遇到问题？查看我们的 在线演示 中的实际代码！

    下一步

    想要搜索您自己的数据吗？ 创建一个项目 在 Meilisearch 仪表盘中。查看我们的 入门指南 获取分步说明。