Πώς να μάθετε το React - Ένας χάρτης πορείας από αρχάριους έως προχωρημένους

Ε, παιδιά!

Αυτός ο οδηγός απευθύνεται σε άτομα που ξεκινούν με το React. Έχω επιμεληθεί προσεκτικά τα καλύτερα βίντεο και άρθρα σε κάθε ενότητα για να διευκολύνω τη μάθηση.

Σημείωση: Δεν συνδέομαι με κανέναν από τους ιστότοπους που αναφέρονται παρακάτω. Είναι καθαρά η δική μου άποψη.

Προαπαιτούμενα

  1. Βασικές γνώσεις HTML, CSS και JavaScript.
  2. Βασική κατανόηση των χαρακτηριστικών ES6. Εδώ είναι το άρθρο μου που εξηγεί μερικές από τις δυνατότητες ES6.

    Για να ξεκινήσετε, πρέπει τουλάχιστον να γνωρίζετε τις ακόλουθες δυνατότητες:

    1. Αφήστε

    2. Συν

    3. Λειτουργίες βέλους

    4. Εισαγωγές και εξαγωγές

    5. Μαθήματα

  3. Βασική κατανόηση του τρόπου χρήσης του npm.

Ξεκινώντας

Μπορείτε να χρησιμοποιήσετε διαδικτυακούς επεξεργαστές κώδικα για εξάσκηση ή μπορείτε να χρησιμοποιήσετε τη Δημιουργία εφαρμογής React.

Έχω δημιουργήσει ένα περιβάλλον ανάπτυξης στο JSFiddle και στο Codepen.

Για να κατανοήσετε όλες τις βασικές αρχές του React, μπορείτε να ξεκινήσετε με τα ακόλουθα σεμινάρια:

React επίσημη τεκμηρίωση από την React

Οδηγός για αρχάριους στο React από τον Kent C. Dodds

Βασικές αρχές του React από τον Samer Buna

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

Τώρα, ρίξτε μια ματιά στο επίσημο σεμινάριο του React:

React Επίσημος οδηγός από το React

Είναι ένα καλογραμμένο άρθρο που καλύπτει τις βασικές αρχές του React. Και εξηγεί επίσης πολύ συγκεκριμένα τα συγκεκριμένα θέματα.

Τελευταίο αλλά όχι λιγότερο σημαντικό, μάθετε πώς να συνδέεστε σε API με εφαρμογές React:

Ανάκτηση API με React.js από τον Ethan Jarrell

Ξεκινήστε να χτίζετε κάποια έργα

  1. Απλή εφαρμογή todo
  2. Απλή εφαρμογή αριθμομηχανής
  3. Δημιουργήστε ένα καλάθι αγορών
  4. Εμφανίστε τα στατιστικά στοιχεία του GitHub χρησιμοποιώντας το GitHub API

Αντιδράστε το δρομολογητή

Το React Router σάς βοηθά να δημιουργείτε διαδρομές στις εφαρμογές μιας σελίδας. Είναι πολύ ισχυρό και εύκολο στη χρήση με την εφαρμογή React.

Για να ξεκινήσετε:

Εκπαιδευτικό πρόγραμμα React Router από τον Paul Sherman

Αντιδράστε το δρομολογητή και εισαγάγετε το SPA από το Learn Code Academy

Routing React εφαρμογές από Scotch.io

Αυτά τα άρθρα είναι παραπάνω από αρκετά για να ξεκινήσετε τη δρομολόγηση του React.

Εργα

  1. Μια απλή εφαρμογή CURD
  2. Κλώνος ειδήσεων χάκερ

Εάν ενδιαφέρεστε πραγματικά να μάθετε πολλά για το δρομολογητή, ανατρέξτε στον ακόλουθο οδηγό:

Πλήρης οδηγός React Router από την React Training

Webpack

Το Webpack είναι ένα διάσημο πρόγραμμα δέσμης στοιχείων JavaScript. Το Webpack σάς βοηθά να διατηρείτε εξαρτήσεις ως στατικά αρχεία για το έργο σας, ώστε οι προγραμματιστές να μην χρειάζεται να το κάνουν.

Το Webpack διαθέτει επίσης φορτωτές. Οι φορτωτές βοηθούν στην εκτέλεση συγκεκριμένων εργασιών γύρω από το έργο σας.

Για να μάθετε περισσότερα σχετικά με το Webpack, ακολουθήστε τα παρακάτω σεμινάρια.

Πότε και γιατί να χρησιμοποιήσετε το Webpack από τον Andrew Ray

Σεμινάριο Webpack από το Learn Code Academy

Για να ρυθμίσετε το τοπικό σας περιβάλλον React χρησιμοποιώντας το Webpack, μπορείτε να ανατρέξετε στο ακόλουθο repo GitHub:

Αντιδράστε το πρότυπο SPA από τον Hanif Roshan

Νομίζω ότι τα παραπάνω μαθήματα είναι αρκετά για να ξεκινήσετε με το Webpack. Ωστόσο, για να μάθετε σε βάθος μπορείτε να ανατρέξετε στους παρακάτω οδηγούς:

Εισαγωγή στο Webpack της SurviveJS

Επίσημα έγγραφα Webpack

Απόδοση διακομιστή

Η απόδοση διακομιστή είναι ένα από τα πιο όμορφα χαρακτηριστικά του React. Μπορεί να χρησιμοποιηθεί με οποιαδήποτε από τις τεχνολογίες back-end.

Server Side Rendering (SSR) στο React σάς βοηθά να δημιουργήσετε στοιχεία στο διακομιστή και να το αποδώσετε ως HTML στο πρόγραμμα περιήγησής σας. Και όταν λαμβάνονται όλες οι λειτουργικές μονάδες JavaScript στο πρόγραμμα περιήγησης, το React παίρνει τη σκηνή. Απλός!

Πρώτα απ 'όλα, ρίξτε μια ματιά στο React-DOM API:

React-DOM API από την React

Και ακολουθήστε τα παρακάτω σεμινάρια για να μάθετε σε βάθος:

Αντιδράστε την απόδοση διακομιστή από τον Tyler McGinnis

Αντιδράστε την απόδοση διακομιστή δρομολογητή από την Roilan Salinas

React Server side rendering guide από τον Dennis Brotzky

Redux

Το Redux είναι μια βιβλιοθήκη JavaScript που αναπτύχθηκε για τη διατήρηση των καταστάσεων εφαρμογής. Όταν δημιουργείτε μια σύνθετη εφαρμογή, θα προσθέσει γενικά έξοδα για τη διαχείριση καταστάσεων σε όλα τα στοιχεία. Το Redux σάς βοηθά να αποθηκεύσετε όλες τις πολιτείες σας σε μία μόνο πηγή. Και φυσικά, το React παίζει καλά με το Redux :)

Για να ξεκινήσετε:

Εκμάθηση Reduxαπό την Learn Code Academy

Εκμάθηση Redux για αρχάριους από τον Valentino Gagliardi

React Redux από CSS Tricks

Αυτά τα σεμινάρια είναι παραπάνω από αρκετά για να ξεκινήσετε με το Redux. Ωστόσο, δεν μπορώ να αντισταθώ στην αναφορά του παρακάτω οδηγού. Αξίζει τον κόπο :)

Ξεκινώντας με το Redux από τον Dan Abramov

Πόροι

Φοβερή αντίδραση

Αν σας αρέσει το άρθρο, μην ξεχάσετε να το μοιραστείτε :)