React Functional Components, Props και JSX - React.js Tutorial για αρχάριους

Το React είναι μια από τις πιο δημοφιλείς βιβλιοθήκες JavaScript για τη δημιουργία διεπαφών χρήστη.

Εάν θέλετε να γίνετε προγραμματιστής front-end ή να βρείτε μια δουλειά ανάπτυξης ιστού, πιθανώς θα επωφεληθήκατε από την εκμάθηση του React σε βάθος.

Σε αυτήν την ανάρτηση, θα μάθετε μερικά από τα βασικά στοιχεία του React όπως τη δημιουργία ενός στοιχείου, τη σύνταξη JSX και το Props. Εάν δεν έχετε καθόλου ή λίγη εμπειρία με το React, αυτή η ανάρτηση είναι για εσάς.

Για αρχάριους, δείτε πώς μπορείτε να εγκαταστήσετε το React.

Τι είναι το JSX;

Το πρώτο πράγμα που θα συνειδητοποιήσετε μετά την εγκατάσταση του πρώτου έργου React είναι ότι μια συνάρτηση JavaScript επιστρέφει κάποιο κώδικα HTML:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Πρόκειται για μια ειδική και έγκυρη επέκταση σύνταξης για το React που ονομάζεται JSX (JavaScript XML). Κανονικά σε έργα που σχετίζονται με το frontend, διατηρούμε κώδικα HTML, CSS και JavaScript σε ξεχωριστά αρχεία. Ωστόσο, στο React, αυτό λειτουργεί λίγο διαφορετικά.

Στα έργα React, δεν δημιουργούμε ξεχωριστά αρχεία HTML, επειδή το JSX μας επιτρέπει να γράφουμε HTML και JavaScript σε συνδυασμό στο ίδιο αρχείο, όπως στο παραπάνω παράδειγμα. Μπορείτε, ωστόσο, να διαχωρίσετε το CSS σε άλλο αρχείο.

Στην αρχή, το JSX μπορεί να φαίνεται λίγο περίεργο. Αλλά μην ανησυχείτε, θα το συνηθίσετε.

Το JSX είναι πολύ πρακτικό, επειδή μπορούμε επίσης να εκτελέσουμε οποιονδήποτε κώδικα JavaScript (λογική, συναρτήσεις, μεταβλητές και ούτω καθεξής) μέσα στο HTML απευθείας χρησιμοποιώντας σγουρά τιράντες {}, όπως αυτό:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Επίσης, μπορείτε να εκχωρήσετε ετικέτες HTML σε μεταβλητές JavaScript:

const message = 

React is cool!

;

Εναλλακτικά, μπορείτε να επιστρέψετε HTML μέσα σε λογική JavaScript (όπως περιπτώσεις αν-αλλιώς):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Δεν θα αναφερθώ σε περισσότερες λεπτομέρειες του JSX, αλλά φροντίστε να λάβετε υπόψη τους ακόλουθους κανόνες κατά τη σύνταξη του JSX:

  • Οι ετικέτες HTML και συστατικών πρέπει πάντα να είναι κλειστές
  • Ορισμένα χαρακτηριστικά όπως "class" γίνονται "className" (επειδή η κλάση αναφέρεται σε κλάσεις JavaScript), "tabindex" γίνεται "tabIndex" και πρέπει να είναι γραμμένο camelCase
  • Δεν μπορούμε να επιστρέψουμε περισσότερα από ένα στοιχεία HTML ταυτόχρονα, οπότε φροντίστε να τα τυλίξετε μέσα σε μια γονική ετικέτα:
return ( 

Hello

World

);
  • ή εναλλακτικά, μπορείτε να τα τυλίξετε με κενές ετικέτες:
return (  

Hello

World

);

Μπορείτε επίσης να παρακολουθήσετε το φροντιστήριο React for Beginners για περισσότερες πληροφορίες:

Τι είναι τα λειτουργικά και τα εξαρτήματα τάξης;

Αφού συνηθίσετε τη σύνταξη JSX, το επόμενο πράγμα που πρέπει να κατανοήσετε είναι η δομή του React που βασίζεται σε συστατικά.

Εάν επανεξετάσετε τον κωδικό παραδείγματος στην κορυφή αυτής της ανάρτησης, θα δείτε ότι ο κωδικός JSX επιστρέφεται από μια συνάρτηση. Αλλά η συνάρτηση App () δεν είναι μια συνηθισμένη συνάρτηση - είναι στην πραγματικότητα ένα στοιχείο. Τι είναι λοιπόν ένα συστατικό;

Τι είναι ένα συστατικό;

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

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

Το React έχει δύο τύπους συστατικών: λειτουργικόκαι τάξη. Ας δούμε το καθένα τώρα με περισσότερες λεπτομέρειες.

Λειτουργικά συστατικά

Ο πρώτος και προτεινόμενος τύπος εξαρτήματος στο React είναι λειτουργικά συστατικά. Ένα λειτουργικό στοιχείο είναι βασικά μια συνάρτηση JavaScript / ES6 που επιστρέφει ένα στοιχείο React (JSX). Σύμφωνα με τα επίσημα έγγραφα της React, η παρακάτω συνάρτηση είναι ένα έγκυρο λειτουργικό στοιχείο:

function Welcome(props) { return 

Hello, {props.name}

; }

Εναλλακτικά, μπορείτε επίσης να δημιουργήσετε ένα λειτουργικό στοιχείο με τον ορισμό της λειτουργίας βέλους:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Αυτή η συνάρτηση είναι ένα έγκυρο στοιχείο React επειδή δέχεται ένα μόνο όρισμα αντικειμένου "props" (που σημαίνει ιδιότητες) με δεδομένα και επιστρέφει ένα στοιχείο React. - reactjs.org

Για να μπορέσετε να χρησιμοποιήσετε ένα στοιχείο αργότερα, πρέπει πρώτα να το εξαγάγετε, ώστε να μπορείτε να το εισαγάγετε κάπου αλλού:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

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

import Welcome from './Welcome'; function App() { return ( ); }

Λοιπόν, ένα λειτουργικό συστατικό στο React:

  • είναι μια συνάρτηση JavaScript / ES6
  • πρέπει να επιστρέψει ένα στοιχείο React (JSX)
  • ξεκινά πάντα με κεφαλαίο γράμμα (σύμβαση ονομασίας)
  • παίρνει στηρίγματα ως παράμετρο, εάν είναι απαραίτητο

Τι είναι τα συστατικά της τάξης;

Ο δεύτερος τύπος στοιχείου είναι το στοιχείο κλάσης. Τα στοιχεία κλάσης είναι κλάσεις ES6 που επιστρέφουν JSX. Παρακάτω, βλέπετε την ίδια λειτουργία καλωσορίσματος, αυτή τη φορά ως στοιχείο κλάσης:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Διαφορετικά από λειτουργικά στοιχεία, τα στοιχεία κλάσης πρέπει να έχουν μια πρόσθετη μέθοδο απόδοσης () για την επιστροφή του JSX

Γιατί να χρησιμοποιήσετε εξαρτήματα τάξης;

Συνήθιζα να χρησιμοποιούμε στοιχεία κλάσης λόγω του "state". Στις παλαιότερες εκδόσεις του React (έκδοση <16.8), δεν ήταν δυνατή η χρήση κατάστασης σε λειτουργικά στοιχεία.

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

Αυτό άλλαξε με την εισαγωγή του React Hooks, και τώρα μπορούμε επίσης να χρησιμοποιήσουμε καταστάσεις σε λειτουργικά στοιχεία. (Θα καλύψω την κατάσταση και τα άγκιστρα στις ακόλουθες αναρτήσεις μου, οπότε μην με πειράζει για τώρα).

Ένα συστατικό κλάσης:

  • είναι μια κλάση ES6, θα είναι ένα στοιχείο μόλις «επεκτείνει» ένα στοιχείο React.
  • παίρνει το Props (στον κατασκευαστή) εάν χρειαστεί
  • πρέπει να έχει απόδοση ()μέθοδος για την επιστροφή JSX

Τι είναι το Props in React;

Μια άλλη σημαντική έννοια των συστατικών είναι ο τρόπος επικοινωνίας. Το React έχει ένα ειδικό αντικείμενο που ονομάζεται prop (σημαίνει ιδιοκτησία) το οποίο χρησιμοποιούμε για τη μεταφορά δεδομένων από το ένα στοιχείο στο άλλο.

Αλλά να είστε προσεκτικοί - υποστηρίζει μόνο μεταφορά δεδομένων σε μονόδρομη ροή (μόνο από εξαρτήματα γονέα σε παιδί). Δεν είναι δυνατόν με στηρίγματα να μεταβιβάζουμε δεδομένα από παιδί σε γονέα ή σε στοιχεία στο ίδιο επίπεδο.

Ας επανεξετάσουμε τη λειτουργία App () παραπάνω για να δούμε πώς να μεταφέρουμε δεδομένα με στηρίγματα.

Πρώτον, πρέπει να ορίσουμε ένα στήριγμα στο Welcome Component και να του δώσουμε μια τιμή:

import Welcome from './Welcome'; function App() { return ( ); }

Τα στηρίγματα είναι προσαρμοσμένες τιμές και κάνουν επίσης τα στοιχεία πιο δυναμικά. Δεδομένου ότι το στοιχείο Welcome είναι το παιδί εδώ, πρέπει να ορίσουμε στηρίγματα στον γονέα του (App), ώστε να μπορέσουμε να περάσουμε τις τιμές και να πάρουμε το αποτέλεσμα απλά μεταβαίνοντας στο prop "name":

function Welcome(props) { return 

Hello, {props.name}

; }

Το React Props είναι πραγματικά χρήσιμο

Έτσι, οι προγραμματιστές React χρησιμοποιούν στηρίγματα για τη διαβίβαση δεδομένων και είναι χρήσιμα για αυτήν την εργασία. Τι γίνεται όμως με τη διαχείριση δεδομένων; Τα στηρίγματα χρησιμοποιούνται για τη μετάδοση δεδομένων και όχι για το χειρισμό τους. Θα καλύψω τη διαχείριση δεδομένων με το React στις μελλοντικές αναρτήσεις μου εδώ στο freeCodeCamp.

Εν τω μεταξύ, εάν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη του React & Web, μη διστάσετε να εγγραφείτε στο κανάλι μου στο YouTube.

Ευχαριστούμε που το διαβάσατε!