Comment implémenter une recherche standard à l’aide de React

Avoir une intégration de recherche fonctionnelle améliorera l’interaction de l’utilisateur sur votre site Web. Apprenons à ajouter une recherche standard en texte intégral à votre application Web React.

L’intégration de la recherche vous permet de trouver facilement des éléments sur une application Web. Grâce à l’intégration de la recherche, vous pouvez rechercher un article/produit sans passer par le stress du défilement manuel pour trouver l’article ou le produit spécifique.

L’intégration de la recherche désigne le processus de mise en œuvre d’une entrée de recherche utilisateur sur une application Web pour aider à interroger la valeur recherchée à partir d’une base de données connectée.

Avoir une intégration de recherche fonctionnelle améliorera l’interaction de l’utilisateur sur votre site Web. Cela offrira aux utilisateurs une meilleure expérience lors de la navigation dans votre application Web.

Cet article comprend un guide étape par étape pour la mise en œuvre de l’intégration de la recherche dans une application Web.

Dans cet article, vous apprendrez :

• Qu’est-ce que l’intégration de la recherche ?
• Types d’intégration de recherche
• Qu’est-ce que React-router-dom ?
• La meilleure approche pour mettre en œuvre une recherche standard

Conditions préalables

Pour comprendre ce tutoriel, vous aurez besoin de :

• React v16 ou plus récent
• Une compréhension de base de React
• Une compréhension de base de Node.js
• Un éditeur de texte

Types d’intégration de recherche

Il existe deux types importants de recherche de texte :

• Recherche en texte intégral: Une recherche en texte intégral est une forme de recherche qui compare chaque mot de la demande de recherche à chaque mot de la base de données.
• Recherche partielle de texte : La recherche de texte partielle se produit lorsque vous entrez une partie d’un mot de requête, mais la base de données parvient toujours à trouver le mot entier.

La recherche de texte la plus fiable est la recherche de texte intégral. Ce type de recherche vous offre une meilleure expérience lors de la recherche d’un produit/article sur une application Web. C’est le type sur lequel nous allons nous concentrer aujourd’hui.

Avant de plonger dans l’aspect code de la publication, il y a quelques termes supplémentaires que vous devez connaître pour effectuer une recherche en texte intégral :

• Routage : Lorsque vous cliquez sur un élément (lien, bouton) dans une application, le routage vous permet de vous déplacer entre différentes parties de l’application Web. Cela rend la transition des pages transparente sans avoir à recharger ou à restituer la page entière.
• React-routeur-dom : Il s’agit d’une bibliothèque React permettant de créer un routage dynamique dans une application Web React à l’aide du package react-router-dom.

La meilleure approche pour mettre en œuvre une recherche standard

Commençons par configurer notre environnement de projet. Tout d’abord, créez un répertoire de projet.

mkdir siApp

Ensuite, initialisez Yarn dans le répertoire du projet.

yarn init

On vous posera quelques questions, puis il générera automatiquement un fichier package.json qui contiendra les réponses aux questions auxquelles vous avez répondu précédemment. Voir la structure de base ci-dessous.

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "index.js",
  "author": "sproff",
  "license": "MIT",
},

Noter: Si vous ne répondez pas aux questions requises, il sélectionnera automatiquement une réponse par défaut pour vous.

Vous pouvez maintenant commencer à installer vos packages. Mais pour ce tutoriel, j’installerai Express.js.

yarn add express

Le package sera ajouté aux dépendances dans votre fichier package.json. Voir la structure ci-dessous.

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "index.js",
  "author": "sproff",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
  },

Comme vous pouvez le constater, le package Express est désormais une dépendance. Maintenant, créons un Bonjour le monde application à l’intérieur du index.js dossier.

const express = require("express")
const app = express()
const port = 9000

app.get("https://www.telerik.com/", (req, res) => {
  res.send("Hello World!")
})

app.listen(port, () => {
  console.log(`Server is running on PORT:${port}`)
})

Après avoir configuré votre fichier index.js, exécutez node index.js dans votre borne. Ensuite, allez dans votre navigateur et visitez localhost:9000. Vous devriez voir votre message : « Hello World ».

Ensuite, nous devons configurer le contrôleur de recherche dans votre application Node.js. Créez un dossier dans votre dossier parent appelé controllerspuis créez un fichier à l’intérieur appelé product.controller.js.

const searchProduct = async (req, res, next) => {
  try {
    const { q } = req.query;
    const products = await Product.find({ name: { $regex: q, $options: 'i' } });
  
    if (products.length < 1) throw new ErrorHandler(404, 'No product found');

    res.status(201).json({
      status: 'success',
      message: 'Product has been found successfully',
      products,
    });
  } catch (error) {
    next(error);
  }
};

Noter: Pour configurer un contrôleur, vous devez avoir créé un schéma et d’autres configurations de base pour permettre à votre application de fonctionner.

Dans le code ci-dessus, nous avons commencé par déclarer une instruction try-catch, puis nous avons assigné requête paramètres. Ensuite, nous avons déclaré une variable qui contiendra un attribut Mongoose de trouver.

La trouver L’attribut a tendance à interroger la base de données chaque fois que vous saisissez une lettre/un mot particulier. Ensuite vous validez votre réponse en vérifiant si le produit est disponible ou non en créant une instruction conditionnelle.

Ensuite, nous devons créer une nouvelle application React avec react-router-dom.

yarn create react-app my-app react-router-dom

Maintenant, nous devons configurer l’itinéraire. Pour configurer votre itinéraire, créez un dossier appelé itinéraires puis créez un fichier dans le dossier appelé route.js.

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route path="https://www.telerik.com/search">
          <SearchResults />
        </Route>
        <Route exact path="https://www.telerik.com/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
};

Le code ci-dessus contient la route qui gérera la transition de vos pages.

• Naviguer dans Routeur peut être renommé en n’importe quel nom, il est donc renommé en Routeur pour faire court, ce qui est également la convention de dénomination standard.
• Routeur sert de div parental qui enveloppera toutes les routes ; sans le routeur, vos itinéraires ne fonctionneront pas.
• Changer fait ce que son nom l’indique : il vous permet de naviguer d’une page à l’autre.
• Itinéraire est la balise principale qui imbrique votre composant. Il spécifie les pages qui doivent être affichées chaque fois que vous cliquez sur un lien spécifique. Il faut quelques accessoires appelés chemin et exact.

Ensuite, nous devons créer un nouveau fichier pour l’entrée de recherche. Accédez à votre dossier parent, créez un sous-dossier appelé composantpuis créez le fichier d’entrée de recherche à l’aide de la commande ci-dessous.

touch SearchInput.jsx

Collez le code suivant dans SearchInput.jsx.

import React, { useState} from "react";
import { useHistory } from "react-router-dom";

export const SearchInput = () =>
{
  const [search, setSearch] = useState("");
  const history = useHistory();
  return (
    <div>
      <InputGroup>
       <Input
        onChange={(e) => {
        setSearch(e.target.value)
        }}
        type="search"
        placeholder="Search product"
       />
       <InputRightElement>
        <div>
          <button onClick={() => history.push(`/search?query=${search}`)} >Search</button>
        </div>
       </InputRightElement>
      </InputGroup>
    </div>
  )
}

Un état est créé dans le code ci-dessus pour écouter votre entrée ; la setSearch gère le onChange un événement; et le search state gère le rendu d’entrée, qui sera déclenché lorsque vous cliquez sur le bouton de recherche.

La useHistory hook donne accès à l’instance d’historique, qui est utilisée pour naviguer. L’action exécutée à l’intérieur du button tag signifie que vous écoutez un onClick événement qui déclenchera la history.push. Cela vous poussera vers un autre itinéraire (/search) créé précédemment, puis stockera votre entrée dans le search Etat.

La search state sera transmis en tant que requête à la nouvelle route (/search), puis restituera la sortie en fonction des résultats de la base de données.

Ensuite, créez un nouveau fichier pour les résultats de la recherche. Accédez à votre dossier parent, créez un sous-dossier appelé pagespuis créez le fichier d’entrée de recherche à l’aide de la commande ci-dessous.

touch SearchResults.jsx

Collez le code suivant dans SearchResults.jsx.

import React, { useEffect, useState } from "react";
import { Link, useLocation, useParams } from "react-router-dom";

export const SearchResults = () => {
  const [searchResults, setSearchResults] = useState([]);
  const [error, setError] = useState(false);
  const location = useLocation();
  const query = new URLSearchParams(location.search).get("query");
  const { slug } = useParams();
  useEffect(() => {
    const searchProduct = async () => {
      try {
        const { data } = await axios.get(`API_URL/search?q=${query}`); setSearchResults(data.products);
        } catch (error) {
         setError(error.response?.data?.message);
         }
        };
         searchProduct();
       }, []);

  return (
    <div>
      {searchResults.map((searchResult) => (
        <div
          key={searchResult.id}
          <p>{searchResult.name}</p>
        </div>
      ))}
    </div>
  )
}

Ci-dessus, nous avons créé deux crochets React qui sont les useState et le useEffect. Deux états différents ont été créés, qui sont les searchResults et error États.

La useState hook déclare des variables d’état pour conserver certaines valeurs entre les appels de fonction, et il renvoie une paire de valeurs : l’état actuel et une fonction qui le met à jour. La useEffect hook aide à la récupération des données, tandis que le searchResults state gère les données provenant d’une API spécifique. Enfin, le Erreur state gère les erreurs provenant des actions globales.

La useLocation hook renvoie l’objet location représentant l’URL actuelle. Il sert de redirection vers une autre page chaque fois que vous cliquez sur un composant. Le crochet est ensuite attaché au requête variable où un événement le déclenchera.

L’URL de l’API est associée à une requête de recherche qui permettra à l’entrée utilisateur stockée de déclencher la .find attribut dans Mongoose, qui a été déclaré plus tôt. La setSearchResults state écoutera les résultats obtenus à partir de l’API, puis les rendra à l’utilisateur à l’aide d’une fonction de mappage en mappant avec le Résultats de recherche Etat.

Conclusion

Enfin, nous avons créé une entrée de recherche fonctionnelle avec des résultats de recherche standard sans aucune bibliothèque externe nécessaire. Nous avons abordé les différents types de recherche de texte, discuté de ce qu’est react-router-dom et mis en évidence une manière standard d’effectuer une recherche en texte intégral.