Ξεκινώντας με το React.js

React.js είναι ένα ευέλικτο και βασισμένο σε στοιχεία Βιβλιοθήκη JavaScript για δημιουργώντας διαλογικές διεπαφές χρήστη. Ήταν δημιουργημένο και ανοιχτό από το Facebook και χρησιμοποιείται από πολλές κορυφαίες εταιρείες τεχνολογίας όπως Dropbox, AirBnB, PayPal και Netflix. Το React επιτρέπει στους προγραμματιστές να να δημιουργήσετε εφαρμογές βαρέων δεδομένων που μπορεί να ενημερωθεί ανώδυνα από επαναφέροντας μόνο τα απαραίτητα στοιχεία.

Ανταπόκριση είναι η Προβολή στρώματος από το MVC σχεδιασμό λογισμικού, και κυρίως επικεντρώνεται στο χειρισμό DOM. Καθώς αυτές τις μέρες ο καθένας μιλάει για το React, σε αυτή τη θέση, ρίχνουμε μια ματιά στο πώς μπορείτε ξεκινήστε με αυτό.

Εγκατάσταση React

Μπορείτε να εγκαταστήσετε το React είτε με τον διαχειριστή πακέτων npm ή από προσθέτοντας τις απαραίτητες βιβλιοθήκες με μη αυτόματο τρόπο στη σελίδα HTML. Συνιστάται χρησιμοποιώντας το React με τη Babel που σας επιτρέπει να χρησιμοποιήστε τη σύνταξη ECMAScript6 και το JSX στον κωδικό σας React.

Αν θέλεις εγκαταστήστε το Μη αυτόματη αντίδραση, τα επίσημα έγγραφα συνιστούν να χρησιμοποιήστε αυτό το αρχείο HTML. Μπορείτε να κατεβάσετε τη σελίδα κάνοντας κλικ στο Αρχείο> Αποθήκευση σελίδας ως ... στο πρόγραμμα περιήγησής σας. Τα σενάρια που θα χρειαστείτε (React, React DOM, Babel) θα λάβετε επίσης στη λήψη react-example_files / ντοσιέ. Στη συνέχεια, προσθέστε τις ακόλουθες ετικέτες δέσμης ενεργειών στο τμήμα του εγγράφου HTML:

Αντί να τα κατεβάζετε, μπορείτε να προσθέσετε τα σενάρια React από το CDN επισης.

Μπορείτε επίσης να χρησιμοποιήσετε το εξομοιούμενες εκδόσεις από τα παραπάνω αρχεία JavaScript:

Αν προτιμάτε εγκαταστήστε το React με npm, ο καλύτερος τρόπος είναι να χρησιμοποιήσετε το Δημιουργία εφαρμογής React Το Github repo δημιουργήθηκε από το Facebook Incubator - αυτή είναι και η λύση που προτείνουν τα αρχεία React. Εκτός από το React, επίσης περιέχει Webpack, Babel, Autoprefixer, ESLint και άλλα εργαλεία ανάπτυξης. Για να ξεκινήσετε, χρησιμοποιήστε τις ακόλουθες εντολές CLI:

 npm εγκατάσταση -g δημιουργία-αντιδράσει-app δημιουργία-αντιδράσει-app my-app cd my-app npm έναρξη

Όταν είστε έτοιμοι, μπορείτε πρόσβαση στη νέα σας εφαρμογή React στο localhost: 3000 URL:

Αν θέλετε να διαβάσετε περισσότερα σχετικά πώς να εγκαταστήσετε το React, δείτε το οδηγίες εγκατάστασης των εγγράφων.

React και JSX

Αν και δεν είναι υποχρεωτικό, μπορείτε χρησιμοποιήστε τη σύνταξη JSX στις εφαρμογές σας React. JSX αντιπροσωπεύει JavaScript XML, και αυτό μεταφράζεται σε τακτική JavaScript. Το μεγάλο πλεονέκτημα του JSX είναι αυτό σας επιτρέπει να συμπεριλάβετε HTML στα αρχεία σας JavaScript, επομένως καθιστά ευκολότερη την οριοθέτηση των στοιχείων React.

Εδώ είναι τα πιο σημαντικά πράγματα που πρέπει να γνωρίζετε για το JSX:

Ετικέτες που ξεκινήστε με πεζά (κατώτερη περίπτωση καμήλας) ως κανονικά στοιχεία HTML.
Ετικέτες που ξεκινήστε με κεφαλαία (ανώτερη θήκη καμήλας) ως αντιδραστήρια.
Οποιοσδήποτε κωδικός γραμμένο μέσα σε σγουρές αγκύλες ... ερμηνεύονται ως κυριολεκτικά JavaScript.

Αν θέλετε να μάθετε περισσότερα σχετικά με πώς να χρησιμοποιήσετε το JSX με το React δείτε αυτή τη σελίδα από τα έγγραφα και για το προεπιλεγμένη τεκμηρίωση JSX μπορείτε να ρίξετε μια ματιά στο wiki του JSX.

Δημιουργία στοιχείων React

Η αντίδραση έχει α αρχιτεκτονική βασισμένη σε στοιχεία στην οποία δημιουργούν οι προγραμματιστές επαναχρησιμοποιήσιμα εξαρτήματα για την επίλυση διαφορετικών προβλημάτων. Ένα συστατικό React είναι κατασκευασμένο από μερικούς ή πολλούς Στοιχεία αντίδρασης που είναι τις μικρότερες μονάδες εφαρμογών React.

Παρακάτω, μπορείτε να δείτε ένα απλό παράδειγμα ενός στοιχείου React που προσθέτει ένα κουμπί κλικ σε μια σελίδα HTML. Στο HTML, προσθέτουμε a

δοχείο με το "myDiv" ID που θα είναι με το στοιχείο React. Δημιουργούμε το στοιχείο μας React μέσα σε ένα

   Κάνουμε το στοιχείο React με το ReactDOM.render () μέθοδος οι οποίες λαμβάνει δύο απαιτούμενες παραμέτρους, ο Στοιχείο αντίδρασης () και το δοχείο του (document.getElementById ('myDiv')). Μπορείτε να διαβάσετε περισσότερα σχετικά πώς λειτουργούν τα στοιχεία React στο “Στοιχεία rendering” τμήμα των εγγράφων.
 Δημιουργία εξαρτημάτων
 Αντιδραστήρια είναι επαναχρησιμοποιήσιμες, ανεξάρτητες μονάδες UI στην οποία μπορείτε εύκολα να ενημερώσετε τα δεδομένα. Ένα στοιχείο μπορεί να κατασκευαστεί από ένα ή περισσότερα στοιχεία React. Υποστήριξη είναι αυθαίρετες εισόδους μπορείτε να χρησιμοποιήσετε για να μεταβιβάσετε δεδομένα σε ένα στοιχείο. Το στοιχείο React λειτουργεί παρόμοια με τις λειτουργίες JavaScript - κάθε φορά που γίνεται επίκληση του δημιουργεί κάποια έξοδο.
 Μπορείτε να χρησιμοποιήσετε είτε το κλασική σύνταξη λειτουργίας ή το νέο Σύνταξη κλάσης ES6 προς το ορίστε ένα στοιχείο React. Σε αυτό το άρθρο, θα χρησιμοποιήσω το τελευταίο, καθώς η Babel μας επιτρέπει να χρησιμοποιήσουμε το ECMAScript 6. Εάν ενδιαφέρεστε για τον τρόπο δημιουργίας ενός στοιχείου χωρίς ES6, ρίξτε μια ματιά στη σελίδα Components and Props των εγγράφων.
 Παρακάτω, μπορείτε να δείτε το απλό στοιχείο React πρόκειται να δημιουργήσουμε ως παράδειγμα. Είναι μια βασική ειδοποίηση που βλέπει ο χρήστης μετά τη σύνδεση σε έναν ιστότοπο. Υπάρχουν τρία κομμάτια δεδομένων που θα το κάνουν αλλαγή από περίπτωση σε περίπτωση: το όνομα του χρήστη, ο αριθμός των μηνυμάτων και ο αριθμός των ειδοποιήσεων, θα τα περάσουμε ως στηρίγματα.
  
Κάθε στοιχείο React είναι μια τάξη JavaScript που επεκτείνει το React.Component βασική κατηγορία. Το συστατικό μας θα καλείται Στατιστικά στοιχεία δεδομένου ότι παρέχει στον χρήστη μια βασική στατιστική. Αρχικά, εμείς δημιουργήστε το Στατιστικά στοιχεία τάξη με το class Στατιστικά επεκτείνει React.Component ... σύνταξη, τότε εμείς να το καταστήσει στην οθόνη καλώντας το ReactDOM.render () (έχουμε ήδη χρησιμοποιήσει το τελευταίο στην προηγούμενη ενότητα).
  class Στατιστικά επεκτείνει το React.Component render () return (  Γεια σας this.props.name, έχετε this.props.notifications νέες ειδοποιήσεις και this.props.messages νέα μηνύματα. 
 ) ·  ReactDOM.render ( , document.getElementById ("myStats")). 
 Το πρώτο επιχείρημα της ReactDOM.render () μέθοδος αποτελείται από το όνομα του στοιχείου React (), και τα στηρίγματα του (όνομα, κοινοποιήσεις, και μηνυμάτων) με τις τιμές τους. Όταν δηλώνουμε τις τιμές των στηρίξεων, πρέπει να είναι οι χορδές συνημμένο σε εισαγωγικά (σαν "John Doe") και αριθμητικές τιμές μέσα σε σγουρά (σαν 3).
 Σημειώστε ότι λόγω της JavaScript, εμείς μεταχειρισμένος όνομα τάξης αντί τάξη για να μεταβιβάσει ένα χαρακτηριστικό κλάσης σε μια ετικέτα HTML (className = "σύνοψη").
 Η σελίδα HTML που ταιριάζει είναι η εξής:
          
    
 Στο React docs, υπάρχουν πολλά άλλα δροσερά παραδείγματα πώς να δημιουργήσετε και να διαχειριστείτε τα στοιχεία React, και τι άλλο πρέπει να γνωρίζετε για τα στηρίγματα.
 Περαιτέρω ανάγνωση
 Με το React, το Facebook παρουσιάστηκε ένα νέο είδος πλαισίου στην ανάπτυξη του front-end που προκαλεί το μοτίβο σχεδιασμού MV *. Αν θέλετε να καταλάβετε καλύτερα πώς λειτουργεί και τι μπορείτε και τι δεν μπορείτε να επιτύχετε με αυτό, μπορείτε να βρείτε μερικά ενδιαφέροντα άρθρα που μπορούν να σας βοηθήσουν:
 Η δημοσίευση του blog στο Facebook γιατί έκτισαν το React.
 Το υπέροχο blog του Andrew Ray για το καλό και το κακό του React.
 Κωδικοποιητής ενεργοποιημένος πώς αντιπαραβάλλουν το React και το AngularJS.
 Το κομμάτι σκέψης του FreeCodeCamp σχετικά με το εάν Το MVC είναι νεκρό στο μπροστινό μέρος.
 Το άρθρο του HackerNoon πώς να βελτιστοποιήσετε την απόδοση που σχετίζεται με το React.