Vorschläge

Produkte & Ressourcen

Was ist Algolia?

Algolia ermöglicht es modernen Entwicklern, erstklassige Such- und Entdeckungserlebnisse ohne DevOps zu erstellen.
Bibliotheken für alle gängigen Sprachen und Frameworks machen es einfach, das Nutzererlebnis zu bereichern. 
Erfahren Sie mehr über die Algolia-Produkte
Fügen Sie Ihren React-Anwendungen eine Autovervollständigung hinzu

Die React InstantSearch UI-Bibliothek bietet vorgefertigte, anpassbare und flexible UI-Widgets, mit denen Sie Ihre eigenen Sucherlebnisse gestalten können –entdecken Sie die Beispiele. Sie verfügt über Funktionen für serverseitiges Rendering und Routing, ist Open Source, produktionsreif und wird von Algolia gepflegt.
Erste Schritte mit React InstantSearch

Funktionen

  • Bietet vorgefertigte UI-Komponenten, die den Best-Practice-Prinzipien für React entsprechen und unabhängig von externen Frameworks sind

  • Integrieren Sie die Funktion in Ihre bestehende Benutzeroberfläche oder App oder nutzen Sie die InstantSearch-Vorlagen

  • Enthält ein Standard-CSS-Design, das vollständig anpassbar ist

  • Verwaltet die gesamte Geschäftslogik für Suchanfragen, Antworten und Zustände

  • Schrittweise Anpassung von Komponenten (verwenden, erweitern oder anpassen)

Version

  • Kompatibel mit allen aktuellen Versionen der zugrunde liegenden React-Bibliothek

  • Der Code ist vollständig Open Source und auf GitHub verfügbar.

  • Starten Sie Ihre Anwendung mit „create-instantsearch-app“, NPM, …

Verwandte Integrationen

Los geht’s

CSS (HIER EIN KOSTENLOSES KONTO ERÖFFNEN)

 

        
          
            
body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }


        

      

    



    

      
        
KOMPONENTEN IMPORTIEREN


      
      
    
    


    

      

        

        
          
            
import {

  InstantSearch,

  Highlight,

  Hits,

  SearchBox,

} from 'react-instantsearch-hooks-web';


        

      

    



    

      
        
SUCHE


      
      
    
    


    

      

        

        
          
            
// Create the App component

class App extends Component {

  render() {

    return (

      <div className="ais-InstantSearch">

        <h1>React InstantSearch e-commerce demo</h1>

        <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>

          <div className="right-panel">

            <SearchBox />

            <Hits hitComponent={Hit} />

          </div>

        </InstantSearch>

      </div>

    );

  }

}





function Hit(props) {

  return (

    <div>

      <img src={props.hit.image} align="left" alt={props.hit.name} />

      <div className="hit-name">

        <Highlight attribute="name" hit={props.hit} />

      </div>

      <div className="hit-description">

        <Highlight attribute="description" hit={props.hit} />

      </div>

      <div className="hit-price">${props.hit.price}</div>

    </div>

  );

}


        

      

    




    

        

            

   







    



            

                
                    Kostenlos loslegen
                
    













    



            

                
                    Entwicklerdokumentation entdecken
                
    







    







    





  
  

        
      

    

      Overlay 1
    

  

      Overlay 2
    

  
  

    

      

            





    

        

            
Nutzen Sie Algolia optimal

            

                
            

            

                    







    



            

                
                    Los geht’s