前往首頁v1.12文件

    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 提供者

    <InstantSearch> 是 InstantSearch 函式庫的根提供者元件。它採用兩個屬性：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 包裝函式元件內新增 SearchBox 和 InfiniteHits 元件。Hits 元件透過 hitComponent 屬性接受自訂的 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 儀表板中建立專案。請查看我們的入門指南，以取得逐步指示。