So erstellen Sie eine Basisversion von Product Hunt mit React

Dieses Beispiel und dieses Design zeigen, was ich aus dem Buch "Fullstack React" gelernt habe. Ich empfehle es sehr als eine gute Ressource zum Lernen von React und dessen Ökosystemtechnologien. schau es dir hier an: fullstackreact.com.

Stellen Sie sich vor, Sie wurden als Entwickler mit der Erstellung eines MVP für ein Startup-Produkt beauftragt, das potenziellen Investoren vorgeführt werden muss.

Die Anwendung ist eine von Product Hunt und Reddit inspirierte Abstimmungsanwendung. In der Anwendung werden Produkte in einer Sammlung angezeigt. Benutzer können die besten Produkte bewerten, und die Anwendung sortiert sie automatisch nach der Anzahl der Stimmen, wobei die höchste vor der niedrigsten steht.

Die Funktionen der App, die wir erstellen werden, sind sehr einfach:

  • Benutzer können die vorhandenen / angezeigten Produkte anzeigen.
  • Benutzer können Produkte bewerten, die sie begeistern.
  • Die Produkte werden automatisch nach Stimmenzahl sortiert.

Sie können die Demo hier ansehen.

Schritt 1: Das Wichtigste zuerst

Gehen Sie zuallererst zu Github und laden Sie den Startordner herunter, den ich bereits mit den erforderlichen Einstellungen für unsere Anwendung hier erstellt habe. Kopieren Sie die URL, die Sie über die grüne Klon- / Download-Schaltfläche erhalten haben, und führen Sie sie in der Befehlszeile in Ihrem bevorzugten Pfad aus. Sie müssen Git bereits installiert haben.

Git-Klon-URL

Öffnen Sie den heruntergeladenen Ordner in Ihrem Code-Editor und beobachten Sie die Ordnerdateien und -struktur. Es sieht so aus:

├───src
| ├───app.js
| ├───seed.js
| ├───style.css
└───Verkäufer
    ├───bootstrap-3.3.7-dist
    ├───font-awesome-4.7.0
    ├───react.js
    ├───react-dom.js
    └───babel-standalone.js

Hinweis: Ihr Code-Editor sollte einen Live-Server haben. Auf diese Weise können wir die Dateien an unseren Browser senden, um unsere Arbeit anzuzeigen. Stellen Sie sicher, dass Sie die Erweiterung für Ihren bevorzugten Code-Editor installieren.

Unter dem Ordner src befinden sich die Dateien app.js und seed.js. In der Datei app.js schreiben wir den größten Teil des Codes für unsere Anwendung. Die Datei seed.js enthält bereits die Datenerfassung der anzuzeigenden Produkte.

Unsere Datei seed.js enthält den folgenden Code

window.Seed = (function () {
    Funktion generateVoteCount () {
      return Math.floor ((Math.random () * 50) + 15);
    }
    const products = [
      {
        id: 1,
        Titel: "Gelber Eimer",
        Beschreibung: "Know-how für den Bau von Sandburgen nach Bedarf",
        URL: "#",
        Stimmen: generateVoteCount (),
        submitterAvatarUrl: 'images / avatars / daniel.jpg',
        productImageUrl: 'images / products / image-aqua.png',
      },
                                ...
    ];
    return {products: products};
  } ());

Dieser Code erstellt eine Funktion generateVoteCount (), die wir später erläutern werden, und ein Produktarray, das die Daten unserer Produkte enthält. Sie werden als selbstaufrufende Funktion verpackt und an das Fensterobjekt unseres Browsers angehängt. Auf diese Weise können wir von überall auf sie zugreifen.

Die Seed-Funktion gibt schließlich ein Objekt mit einer Eigenschaft von Produkten und einem Wert von Produkten zurück. Dies bedeutet, dass wir bei der Ausführung von Seed.products jedes Produktobjekt an uns zurücksenden müssen.

Die Datei react.js ist der Code, der den React-Core selbst enthält. Darüber hinaus ist "react-dom.js" der Code, mit dem wir in HTML DOM erstellte React-Komponenten rendern können. Schließlich ist babel-standalone.js der Babel-Code, der den erweiterten JSX- und ES6-Code, mit dem wir arbeiten werden, in ES5-Code umwandelt (die häufigste JavaScript-Spezifikation, die die meisten alten und aktuellen Browser heute unterstützen).

Schritt 2: Komponenten erstellen

Wir müssen zwei React-Komponenten erstellen. Wir werden die übergeordnete Komponente ProductList aufrufen, und die darin enthaltene Auflistung der untergeordneten Komponenten ist Procuct.

Erstellen Sie in der Datei app.js die übergeordnete Komponente, indem Sie dies tun:

Klasse ProductList erweitert React.Component {
    render () {
        const products = Seed.products.map ((product) => (
            
        ));
        Rückkehr (
            
                

Beliebte Produkte                 
                {Produkte}                      );     } } ReactDOM.render (, document.getElementById ('content'));

In der übergeordneten Komponente möchten wir eine untergeordnete Komponente basierend auf jedem Objekt erstellen, auf das über Seed.products zugegriffen werden kann. Also haben wir ein paar Requisiten aufgestellt. Jetzt deklarieren wir die untergeordnete Komponente tatsächlich noch in derselben Datei namens "Product":

Klasse Produkt erweitert React.Component {
    render () {
        Rückkehr (
          
            
            
                
                
                                                      
                                                                                       {this.props.votes}                                  
                                             {this.props.title}                                          

{this.props.description}                                                     

                 Eingereicht von:                                                                                             );       } }

Wir können auf React.Component und ReactDOM.render verweisen, da wir die Dateien react.js und react-dom.js bereits geladen haben. Sie können verwendet werden, obwohl wir uns derzeit in der Datei "app.js" befinden. Nachdem die Komponente erstellt wurde, rendert ReactDOM.render (whatComponent, where) sie in das DOM.

Wenn Sie Ihren Live-Server ausführen, sollte der folgende Bildschirm angezeigt werden:

statische Komponenten

Schritt 3: Interaktivität hinzufügen

Bisher konnten wir die Komponenten unserer App codieren - aber sie sind immer noch statisch. Wie können wir sie interaktiv machen?

Gehen Sie beim Codieren von React Apps wie folgt vor:

  • Teilen Sie die App-Benutzeroberfläche in Komponenten auf
  • Erstellen Sie eine statische Version der App
  • Bestimmen Sie, welche Daten ein Zustand sind
  • Bestimmen Sie, in welchen Komponenten jedes Stück des Staates leben soll
  • Hardcode-Anfangszustände
  • Fügen Sie den inversen Datenfluss von Kind zu Eltern über Requisiten hinzu
  • Serverkommunikation hinzufügen

Wir werden nicht all das oben Genannte tun, aber lasst uns mit dem Staat beginnen. Die einzige Dateneinheit in unserer App, die als zustandsbehaftet oder sich ständig ändernd angesehen werden kann, ist die Anzahl der Stimmen. Denken Sie daran: Dies ist eine Eigenschaft der Produktsammlung in unserer Datei seed.js. Stimmen sind in jedem Produktgegenstand, also repräsentiert es unseren Zustand.

Wenn wir unseren Zustand kennen, wo initialisieren wir ihn? Im Gegensatz zu Requisiten, die weitergegeben werden, sind die Zustände in React in bestimmten Komponenten eigenständig. Die Anzahl der Stimmen als Bundesstaat ist im Besitz von , aber da die Sammlung von Produkten aus generiert wird, initialisieren wir den Bundesstaat dort. Führen Sie dies in vor der render () -Methode aus:

Konstrukteur() {
        Super();
        this.state = {
            Produkte: []
        }
    }

Beim Initialisieren des Status in einer Komponente versuchen wir zu definieren, wie sie aussehen soll, während sie leer bleibt. Unsere Produkte sind ein Array, daher verwenden wir ein leeres Array. Wir initialisieren es innerhalb von constructor () {}, da dies der Code ist, der ausgeführt wird, wenn unsere Komponente erstellt wird.

Lassen Sie unsere Komponente Produkte aus ihrem eigenen Status statt aus einer Datei lesen. Hinzufügen:
 componentDidMount () {
 this.setState ({products: Seed.products})
 }
 um den zu verwendenden Status festzulegen. Aktualisieren Sie außerdem const products = Seed.products auf const products = this.state.products. Um JavaScript nach der höchsten Stimmenzahl zu sortieren, schreiben Sie stattdessen Folgendes:

const products = this.state.products.sort ((a, b) {
    b.votes - a.votes
});

Die JavaScript-Sortierung (); verwendet eine Vergleichsfunktion im Inneren. Dies können Sie in einer Dokumentation nachlesen.

Schritt 4: Handle upvoting

Gehen wir zu dem Hyperlink, der das beeindruckende Symbol für das Einrichten von Schriftarten umgibt, und erstellen Sie mit onClick eine Funktion.


    
 

Nachdem wir die Funktion definiert haben, können wir sie tatsächlich erstellen. Erstellen Sie in der Product-Komponente eine passTheId (); Funktion:

Konstrukteur() {
        Super();
        this.passTheId = this.passTheId.bind (this);
    }
    passTheId () {
        console.log ('ID wird übergeben');
    }

Wir haben die Funktion an dieses Schlüsselwort gebunden, da nur eingebaute Funktionen wie render () Zugriff auf dieses Wort haben.

Erstellen Sie eine weitere Funktion in der ProductList-Komponente. Dieser aktualisiert den Status, der mit der handleUpVote-Funktion der Product-Komponente arbeitet.

handleProductUpVote = (productId) => {
    const nextProducts = this.state.products.map ((product) => {
      if (product.id === productId) {
        Objekt zuweisen ({}, Produkt, {
          Stimmen: product.votes + 1,
        });
      } else {
        Produkt zurückgeben;
      }
    });
    this.setState ({
      Produkte: nextProducts,
    });
  }

Zustände in Reaktion sollten als unveränderlich behandelt werden. Das heißt, sie sollten nicht direkt geändert werden. Die obige Funktion erledigt dies mithilfe von Object.assign () in JavaScript, indem sie ein scheinbar neues Array mit dem Namen nextProducts erstellt. Dies ähnelt dem bestehenden Zustand, hat jedoch eine Änderung der Stimmenzahl zur Folge. nextProducts wird dann als neuer Status festgelegt. Es scheint seltsam, Dinge auf diese Weise zu tun, aber das ist es, was das React-Team empfiehlt, um die Leistung zu verbessern.

Wir möchten die ID des Produkts von der untergeordneten Product-Komponente an die übergeordnete ProductList-Komponente übergeben. Daher können wir handleProductUpVote dem untergeordneten Produkt als Requisiten zur Verfügung stellen:

const productComponents = products.map ((Produkt) => (
      
    ));

Wir haben onVote = {this.handleProductUpVote} hinzugefügt. Auf Kinderebene können wir also über this.props darauf zugreifen

passTheId () {
        console.log ('ID wird übergeben');
        this.props.onVote (this.props.id)
    }

Ihre gesamte app.js-Datei sollte folgendermaßen aussehen:

Klasse ProductList erweitert React.Component {
    state = {
        Produkte: [],
      };
      componentDidMount () {
        this.setState ({products: Seed.products});
      }
      handleProductUpVote = (productId) => {
        const nextProducts = this.state.products.map ((product) => {
          if (product.id === productId) {
            Objekt zuweisen ({}, Produkt, {
              Stimmen: product.votes + 1,
            });
          } else {
            Produkt zurückgeben;
          }
        });
        this.setState ({
          Produkte: nextProducts,
        });
      }
    render () {
        const products = this.state.products.sort ((a, b) => (
            b.votes - a.votes
        ));
        const productComponents = products.map ((Produkt) => (
            
          ));
        Rückkehr (
            
                

Beliebte Produkte                 
                {productComponents}                      );     } }

Klasse Produkt erweitert React.Component {
    Konstrukteur() {
        Super();
        this.passTheId = this.passTheId.bind (this);
    }
    passTheId () {
        console.log ('ID wird übergeben');
        this.props.onVote (this.props.id);
    }
    render () {
        Rückkehr (
          
            
            
                
                
                                     
                
                                                                                       {this.props.votes}                                  
                                             {this.props.title}                                          

                        {this.props.description}                                                     

                 Eingereicht von:                                               
            
            
          
        );
      }
}
ReactDOM.render (, document.getElementById ('content'));

Aktualisieren Sie Ihren Browser und Sie sollten die funktionierende App sehen. Demo ansehen.

Fühlen Sie sich frei zu teilen, zu kommentieren oder Fragen zu stellen. Um den endgültigen Code zu erhalten, besuchen Sie diesen Github-Link und klonen Sie ihn auf Ihren Computer.

Wenn dir dieser Artikel gefallen hat, gib mir ein paar Klicks, damit mehr Leute ihn sehen. Danke fürs Lesen.

Sie können mehr von meinem Schreiben auf meinem Blog lesen: Stellar Code.