Πώς να δημιουργήσετε μια βασική έκδοση του προϊόντος Hunt χρησιμοποιώντας το React

Αυτό το παράδειγμα και το σχέδιο μοιράζονται αυτό που έμαθα από το βιβλίο Fullstack React. Το συνιστώ ανεπιφύλακτα ως μια καλή πηγή για τη μάθηση του React και των τεχνολογιών του οικοσυστήματος. ελέγξτε το εδώ: fullstackreact.com.

Φανταστείτε ότι ως υπεύθυνος ανάπτυξης, σας έχει ανατεθεί η δημιουργία ενός MVP για ένα προϊόν εκκίνησης που πρέπει να αποδειχθεί σε πιθανούς επενδυτές.

Η εφαρμογή είναι μια εφαρμογή ψηφοφορίας εμπνευσμένη από το Product Hunt και το Reddit. Στην εφαρμογή, τα προϊόντα εμφανίζονται σε μια συλλογή. Οι χρήστες μπορούν να αναβαθμίσουν τα καλύτερα προϊόντα και η εφαρμογή θα τα ταξινομήσει αυτόματα σύμφωνα με τον αριθμό των ψήφων, τοποθετώντας το υψηλότερο πριν το χαμηλότερο.

Τα χαρακτηριστικά της εφαρμογής που θα χτίζουμε είναι πολύ απλά:

  • Οι χρήστες μπορούν να δουν τα υπάρχοντα / εμφανιζόμενα προϊόντα.
  • Οι χρήστες μπορούν να αυξήσουν τα προϊόντα που τους ευχαριστούν.
  • Τα προϊόντα ταξινομούνται αυτόματα ανάλογα με τον αριθμό των ψηφοφοριών.

Μπορείτε να δείτε το demo εδώ.

Βήμα 1: πρώτα πράγματα πρώτα

Πρώτα απ 'όλα, κατευθυνθείτε στο Github και κατεβάστε το φάκελο εκκίνησης που έχω ήδη δημιουργήσει με την απαραίτητη ρύθμιση για την εφαρμογή μας εδώ. Αντιγράψτε τη διεύθυνση URL που παρέχεται από το πράσινο κλώνος / κουμπί λήψης και εκτελέστε την προτιμώμενη διαδρομή στη γραμμή εντολών. Πρέπει να έχετε ήδη εγκαταστήσει το git.

git clone URL

Αφού κατεβάσετε το φάκελο, ανοίξτε το στον επεξεργαστή κώδικα και παρατηρήστε τα αρχεία φακέλων και τη δομή. Μοιάζει με αυτό:

├─────────
| ├────app.js
| ├───seed.js
| ├───Style.css
└─────────────────
    ├─boatstrap-3.3.7-dist
    ├─────────── 4.7.0
    ├────ctct.js
    ├─ɑreact-dom.js
    └─── babel-standalone.js

Σημείωση: Ο επεξεργαστής κώδικα πρέπει να έχει ζωντανό διακομιστή. Αυτό μας επιτρέπει να προβάλλουμε τα αρχεία στον περιηγητή μας για να δούμε το έργο μας. Βεβαιωθείτε ότι έχετε εγκαταστήσει την επέκταση για τον επεξεργαστή κωδικών που προτιμάτε.

Κάτω από το φάκελο src υπάρχουν αρχεία app.js και seed.js. Το αρχείο app.js είναι όπου θα γράψουμε το μεγαλύτερο μέρος του κώδικα για την εφαρμογή μας. Το αρχείο seed.js περιέχει ήδη τη συλλογή δεδομένων των προϊόντων που θα εμφανιστούν.

Το αρχείο μας seed.js περιέχει τον ακόλουθο κώδικα

window.Seed = (λειτουργία () {
    συνάρτηση generateVoteCount () {
      επιστροφή Math.floor ((Math.random () * 50) + 15).
    }}
    const προϊόντα = [
      {
        id: 1,
        τίτλος: 'Yellow Pail',
        περιγραφή: «Ειδική τεχνογνωσία κατασκευής κάστρων άμμου κατά παραγγελία»,
        url: '#',
        ψήφοι: generateVoteCount (),
        submitterAvatarUrl: 'images / avatars / daniel.jpg',
        productImageUrl: 'εικόνες / προϊόντα / εικόνα-aqua.png',
      },
                                ...
    ] ·
    επιστροφή {προϊόντα: προϊόντα};
  } ()).

Αυτός ο κώδικας δημιουργεί μια συνάρτηση generateVoteCount () την οποία θα εξηγήσουμε αργότερα και μια σειρά προϊόντων που περιέχει τα δεδομένα των προϊόντων μας. Είναι τυλιγμένα ως μια αυτόκλητη λειτουργία και είναι προσαρτημένα στο αντικείμενο παραθύρου του προγράμματος περιήγησης. Με αυτόν τον τρόπο μπορούμε να έχουμε πρόσβαση σε αυτά οπουδήποτε τους θέλουμε.

Η λειτουργία Seed επιστρέφει τελικά ένα αντικείμενο με μια ιδιότητα προϊόντων και μια αξία προϊόντων. Αυτό σημαίνει ότι, αν εκτελέσουμε προϊόντα Seed.products, θα πρέπει να έχουμε όλα τα αντικείμενα του προϊόντος μας επιστραφούν.

Το αρχείο react.js είναι ο κώδικας που περιέχει τον πυρήνα του React. Επίσης, αντιδράστε-dom.js είναι ο κώδικας που μας βοηθά να καταστήσουμε τα στοιχεία React που δημιουργήσαμε στο HTML DOM. Τέλος, ο babel-standalone.js είναι ο κώδικας Babel που μεταφέρει τον προηγμένο κώδικα JSX και ES6 με τον οποίο θα δουλέψουμε στον κώδικα ES5 (η πιο συνηθισμένη προδιαγραφή JavaScript που υποστηρίζουν σήμερα τα παλαιότερα και τρέχοντα προγράμματα περιήγησης).

Βήμα 2: Δημιουργία εξαρτημάτων

Πρέπει να δημιουργήσουμε δύο στοιχεία React. Θα καλέσουμε τη γονική συνιστώσα ProductList και η συλλογή των παιδικών εξαρτημάτων που θα φιλοξενήσει θα είναι Procuct.

Μέσα στο αρχείο app.js, δημιουργήστε το γονικό στοιχείο κάνοντας αυτό:

class ProductList επεκτείνει το React.Component {
    render () {
        const προϊόντα = Seed.products.map ((προϊόν) => (
            <Προϊόν
            id = {product.id}
            title = {product.title}
            περιγραφή = {product.description}
            url = {product.url}
            ψήφοι = {product.votes}
            submitterAvatarUrl = {product.submitterAvatarUrl}
            productImageUrl = {product.productImageUrl}
            />
        )).
        ΕΠΙΣΤΡΟΦΗ (
            
                

Δημοφιλή προϊόντα                 
                {προϊόντα}                      ) ·     }} }} ReactDOM.render (, document.getElementById ('περιεχόμενο'));

Στο γονικό στοιχείο, σκοπεύουμε να δημιουργήσουμε ένα παιδικό στοιχείο βασισμένο σε κάθε αντικείμενο που είναι προσβάσιμο από τα προϊόντα Seed.products. Έτσι, δημιουργήσαμε κάποια στηρίγματα. Τώρα ας δηλώσουμε στην πραγματικότητα το παιδικό συστατικό που βρίσκεται ακόμα στο ίδιο αρχείο με το όνομα Προϊόν:

class Προϊόν επεκτείνει React.Component {
    render () {
        ΕΠΙΣΤΡΟΦΗ (
          
            
            
                
                
                                                      
                                                                                       {this.props.votes}                                  
                                             {this.props.title}                                          

{this.props.description}                                                     

                 Υποβλήθηκε από:                                                                                             ) ·       }} }}

Μπορούμε να αναφερθούμε στο React.Component και στο ReactDOM.render επειδή έχουμε ήδη φορτώσει τα αρχεία react.js και react-dom.js. Είναι διαθέσιμα για χρήση, παρόλο που βρισκόμαστε στο αρχείο app.js. Έχοντας δημιουργήσει το στοιχείο, το ReactDOM.render (whatComponent, όπου) το μετατρέπει στο DOM.

Όταν τρέχετε τον ζωντανό σας διακομιστή, θα πρέπει να έχετε την ακόλουθη οθόνη:

στατικά εξαρτήματα

Βήμα 3: προσθέστε διαδραστικότητα

Μέχρι στιγμής έχουμε κατορθώσει να κωδικοποιήσουμε τα στοιχεία της εφαρμογής μας - αλλά εξακολουθούν να είναι στατικά. Πώς μπορούμε να τα κάνουμε διαδραστικά;

Στην κωδικοποίηση εφαρμογών React, ακολουθήστε αυτήν τη γενική διαδικασία:

  • Χωρίστε το UI της εφαρμογής σε στοιχεία
  • Δημιουργήστε μια στατική έκδοση της εφαρμογής
  • Προσδιορίστε ποια δεδομένα είναι μια κατάσταση
  • Καθορίστε σε ποια στοιχεία θα πρέπει να ζήσει κάθε κομμάτι του κράτους
  • Αρχικές καταστάσεις σκληρού κώδικα
  • Προσθέστε αντίστροφη ροή δεδομένων από το παιδί στο γονέα μέσω των στηρίξεων
  • Προσθήκη επικοινωνίας διακομιστή

Δεν συνηθίζουμε να κάνουμε όλα τα παραπάνω, αλλά αφήνουμε να προχωρήσουμε με το κράτος. Το μόνο κομμάτι των δεδομένων στην εφαρμογή μας που μπορεί να θεωρηθεί κρατικό ή συνεχώς μεταβαλλόμενο είναι ο αριθμός των ψήφων. Θυμηθείτε: αυτό είναι ιδιοκτησία στη συλλογή των προϊόντων στο αρχείο seed.js. Οι ψήφοι είναι σε κάθε αντικείμενο του προϊόντος, έτσι αντιπροσωπεύει την κατάσταση μας.

Γνωρίζοντας την κατάσταση μας, από πού την προετοιμάζουμε; Τα κράτη της React είναι αυτοτελείς σε ορισμένα συστατικά, σε αντίθεση με τα σκαλιά που περνούν κάτω. Ο αριθμός των ψήφων ως κράτους ανήκει στο , αλλά επειδή η συλλογή των προϊόντων που έχουμε δημιουργείται από το , αρχικοποιούμε την κατάσταση εκεί. Στο , κάντε αυτό πριν τη μέθοδο rendering ():

κατασκευαστής () {
        σούπερ();
        this.state = {
            προϊόντα: []
        }}
    }}

Κατά την αρχικοποίηση της κατάστασης σε μια συνιστώσα, προσπαθούμε να καθορίσουμε τι θα πρέπει να μοιάζει με την ακεραιότητα. Τα προϊόντα μας είναι ένας πίνακας, επομένως χρησιμοποιούμε έναν άδειο πίνακα. Αρχικοποιούμε το μέσα στο constructor () {}, επειδή αυτό είναι το κομμάτι του κώδικα που τρέχει όταν δημιουργείται το στοιχείο μας.

Αφήνει το στοιχείο μας να διαβάσει τα προϊόντα από τη δική του κατάσταση αντί από ένα αρχείο. Προσθέτω:
 componentDidMount () {
 this.setState ({προϊόντα: Seed.products})
 }}
 για να ρυθμίσετε την κατάσταση που θα χρησιμοποιήσει. Επίσης, ενημερώστε τα προϊόντα const = Seed.products σε const products = this.state.products. Για να κάνετε τη JavaScript ταξινομημένη σύμφωνα με τον μεγαλύτερο αριθμό ψήφων, γράψτε αυτό αντί:

const προϊόντα = this.state.products.sort ((a, b) {
    Β.Τίτλοι - α
});

Το είδος JavaScript (); χρησιμοποιεί μια λειτουργία σύγκρισης μέσα. Μπορείτε να το μάθετε σε μια τεκμηρίωση.

Βήμα 4: χειριστείτε την αύξηση των χρημάτων

Ας κατευθυνθούμε προς την υπερσύνδεση που περιβάλλει το στίγμα-awesome, caret-up εικονίδιο και να δημιουργήσετε μια λειτουργία χρησιμοποιώντας το onClick.


    
 

Αφού ορίσαμε τη λειτουργία, ας το δημιουργήσουμε. Μέσα στο στοιχείο του Προϊόντος, δημιουργήστε ένα passTheId (); λειτουργία:

κατασκευαστής () {
        σούπερ();
        this.passTheId = this.passTheId.bind (αυτό);
    }}
    passTheId () {
        console.log ('Η ταυτότητα θα περάσει');
    }}

Συνδέσαμε τη συνάρτηση με αυτήν τη λέξη-κλειδί, επειδή μόνο οι ενσωματωμένες λειτουργίες όπως το render () έχουν πρόσβαση στη χρήση αυτής της λέξης.

Αφήνει να δημιουργηθεί μια άλλη λειτουργία στο στοιχείο ProductList. Αυτός θα ενημερώσει την κατάσταση που εργάζεται με τη λειτουργία handleUpVote του κατασκευαστικού στοιχείου.

handleProductUpVote = (productId) => {
    const nextProducts = this.state.products.map ((προϊόν) => {
      αν (product.id === productId) {
        επιστροφή Object.assign ({}, προϊόν, {
          ψήφοι: product.votes + 1,
        });
      } else {
        προϊόν επιστροφής;
      }}
    });
    this.setState ({
      προϊόντα: nextProducts,
    });
  }}

Τα κράτη της React θα πρέπει να αντιμετωπίζονται ως αμετάβλητα. Δηλαδή, δεν πρέπει να τροποποιούνται άμεσα. Η παραπάνω λειτουργία θα το κάνει χρησιμοποιώντας το Object.assign () του JavaScript, δημιουργώντας ένα φαινομενικά νέο πίνακα που ονομάζεται nextProducts. Αυτό είναι παρόμοιο με το υφιστάμενο κράτος, αλλά έχει μια μεταβολή στον αριθμό των ψήφων. Το επόμενοProducts θα οριστεί ως νέα κατάσταση. Φαίνεται περίεργο να κάνουμε πράγματα με αυτό τον τρόπο, αλλά αυτό συνιστά η ομάδα της React να βελτιώσει τις επιδόσεις.

Θέλουμε να μεταβιβάσουμε το αναγνωριστικό του προϊόντος από το παιδικό εξάρτημα προϊόντος στο γονικό συστατικό του ProductList, έτσι ώστε να είναι διαθέσιμο το handleProductUpVote διαθέσιμο στο παιδί ως στηρίγματα:

const productComponents = products.map ((προϊόν) => (
      <Προϊόν
        κλειδί = {'product-' + product.id}
        id = {product.id}
        title = {product.title}
        περιγραφή = {product.description}
        url = {product.url}
        ψήφοι = {product.votes}
        submitterAvatarUrl = {product.submitterAvatarUrl}
        productImageUrl = {product.productImageUrl}
        onVote = {this.handleProductUpVote}
      />
    )).

Προσθέσαμε onVote = {this.handleProductUpVote}. Έτσι στο επίπεδο παιδιού, μπορούμε να έχουμε πρόσβαση σε αυτό μέσω this.props

passTheId () {
        console.log ('Η ταυτότητα θα περάσει');
        this.props.onVote (this.props.id)
    }}

Το σύνολο του αρχείου app.js θα πρέπει να έχει την εξής μορφή:

class ProductList επεκτείνει το React.Component {
    state =
        προϊόντα: [],
      },
      componentDidMount () {
        this.setState ({προϊόντα: Seed.products});
      }}
      handleProductUpVote = (productId) => {
        const nextProducts = this.state.products.map ((προϊόν) => {
          αν (product.id === productId) {
            επιστροφή Object.assign ({}, προϊόν, {
              ψήφοι: product.votes + 1,
            });
          } else {
            προϊόν επιστροφής;
          }}
        });
        this.setState ({
          προϊόντα: nextProducts,
        });
      }}
    render () {
        const προϊόντα = this.state.products.sort ((a, b) => (
            Β.Τίτλοι - α
        )).
        const productComponents = products.map ((προϊόν) => (
            <Προϊόν
              κλειδί = {'product-' + product.id}
              id = {product.id}
              title = {product.title}
              περιγραφή = {product.description}
              url = {product.url}
              ψήφοι = {product.votes}
              submitterAvatarUrl = {product.submitterAvatarUrl}
              productImageUrl = {product.productImageUrl}
              onVote = {this.handleProductUpVote}
            />
          )).
        ΕΠΙΣΤΡΟΦΗ (
            
                

Δημοφιλή προϊόντα                 
                {productComponents}                      ) ·     }} }}

class Προϊόν επεκτείνει React.Component {
    κατασκευαστής () {
        σούπερ();
        this.passTheId = this.passTheId.bind (αυτό);
    }}
    passTheId () {
        console.log ('Η ταυτότητα θα περάσει');
        this.props.onVote (this.props.id);
    }}
    render () {
        ΕΠΙΣΤΡΟΦΗ (
          
            
            
                
                
                                     
                
                                                                                       {this.props.votes}                                  
                                             {this.props.title}                                          

                        {this.props.description}                                                     

                 Υποβλήθηκε από:                                               
            
            
          
        ) ·
      }}
}}
ReactDOM.render (, document.getElementById ('περιεχόμενο'));

Ανανεώστε το πρόγραμμα περιήγησης και θα πρέπει να δείτε την εφαρμογή εργασίας. Προβολή επίδειξης.

Μπορείτε να μοιραστείτε, να σχολιάσετε ή να κάνετε ερωτήσεις. Για τον τελικό κώδικα, επισκεφτείτε αυτόν τον σύνδεσμο github και κλωνοποιήστε τον στον υπολογιστή σας.

Εάν σας άρεσε αυτό το άρθρο, δώστε μου κάποιες claps έτσι ώστε περισσότεροι άνθρωποι να το δουν. Ευχαριστούμε που το διαβάσατε.

Μπορείτε να διαβάσετε περισσότερα από το γράψιμό μου στο blog μου: Stellar Code.