How to use React and Elasticsearch to achieve efficient full-text retrieval

How to use React and Elasticsearch to achieve efficient full-text retrieval

Introduction:
With the advent of the era of information explosion, full-text retrieval has become an efficient way to obtain and A way to manage large amounts of information. React and Elasticsearch are both very popular technologies at the moment, and their combination can help us achieve efficient full-text search functions. This article will introduce in detail how to use React and Elasticsearch to implement full-text retrieval, and provide specific code examples.

1. Install and configure Elasticsearch

First, we need to install and configure Elasticsearch. You can go to the Elasticsearch official website (https://www.elastic.co/cn/downloads/elasticsearch) to download the installation package suitable for your operating system, and install and configure it according to the official documentation. Once completed, start the Elasticsearch service.

2. Create React Project

Before we start, we need to create a React project. Open the command line and execute the following command:

npx create-react-app search-demo cd search-demo npm start

At this point, a new React project has been created and started.

3. Install and configure the Elasticsearch plug-in

In the root directory of the React project, execute the following command to install the elasticsearch plug-in:

npm install @elastic/elasticsearch

Then create it in the src directory An elasticsearch.js file and add the following code:

import { Client } from '@elastic/elasticsearch'; const client = new Client({ node: 'http://localhost:9200' }); export default client;

In this way we have completed the installation and configuration of Elasticsearch.

4. Create search component

Create the Search.js file in the src directory and add the following code:

import React, { useState } from 'react'; import client from './elasticsearch'; function Search() { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]); const handleSearch = async () => { const response = await client.search({ index: 'your_index_name', body: { query: { match: { content: searchTerm } } } }); const hits = response.body.hits.hits; setSearchResults(hits); }; return ( 
  setSearchTerm(e.target.value)} /> 搜索 {searchResults.map(result => ( 
{result._source.content}
 ))} 
 ); } export default Search;

In the above code, we first The elasticsearch module was introduced and a Search component was created. This component contains an input box and a search button, as well as divs used to display search results. In the handleSearch function, we obtain the search results by calling the elasticsearch search interface and update the searchResults status.

5. Use the search component in App.js

Open the App.js file and add the following code to it:

import React from 'react'; import Search from './Search'; function App() { return ( 
  
 ); } export default App;

So we are The Search component is introduced in the App component.

6. Run the project

Now, you can run the React project through the command line.

npm start

Open the browser and visit http://localhost:3000, you will see a page containing a search input box. Enter keywords in the input box and click the search button to get the search results.

Conclusion:
Through the above steps, we successfully used React and Elasticsearch to implement efficient full-text retrieval function. React provides a platform for quickly building UI, while Elasticsearch provides a powerful full-text search engine. Their combination allows us to easily develop powerful full-text search applications. I hope this article can be helpful to readers and can play a greater role in practice.

Reference materials:

• React official documentation: https://reactjs.org/
• Elasticsearch official documentation: https://www.elastic.co/ guide/index.html

The above is the detailed content of How to use React and Elasticsearch to achieve efficient full-text retrieval. For more information, please follow other related articles on the PHP Chinese website!