Εκπαιδευτικό βίντεο ReactJS για αρχάριους

Τι είναι το ReactJS;

ReactJS είναι ένα front-end ανοιχτού κώδικα JavaΒιβλιοθήκη σεναρίων για τη δημιουργία διεπαφών χρήστη. ReactJS Συντηρείται από την Meta (πρώην Facebook) και μια κοινότητα μεμονωμένων προγραμματιστών και εταιρειών. Χρησιμοποιείται ευρέως ως βάση για τη δημιουργία εφαρμογών μίας σελίδας και εφαρμογών για κινητά. Είναι πολύ εύκολο στη χρήση και επιτρέπει στους χρήστες να δημιουργούν επαναχρησιμοποιήσιμα στοιχεία UI.

Πριν γράψετε την πρώτη γραμμή κώδικα React, είναι χρήσιμο να μάθετε τι διαφέρει τη βιβλιοθήκη από την απλή JavaΣενάριο. Η επόμενη ενότητα παρουσιάζει τα βασικά χαρακτηριστικά του.

Χαρακτηριστικά του ReactJS

JSX: Το JSX είναι μια επέκταση του JavaΣενάριο. Αν και δεν είναι υποχρεωτική η χρήση JSX στο React, είναι ένα από τα καλά χαρακτηριστικά και εύκολο στη χρήση.

ΣυστατικάΤα συστατικά είναι σαν καθαρά JavaΣυναρτήσεις σεναρίου που βοηθούν στην εύκολη επεξεργασία του κώδικα, διαιρώντας τη λογική σε επαναχρησιμοποιήσιμο ανεξάρτητο κώδικα. Μπορούμε να χρησιμοποιήσουμε στοιχεία ως συναρτήσεις και στοιχεία ως κλάσεις. Τα στοιχεία έχουν επίσης κατάσταση και props, γεγονός που διευκολύνει τη ζωή. Μέσα σε ένα στοιχείο κλάσης, διατηρούνται η κατάσταση και τα props.

Εικονικό DOM: Το React δημιουργεί ένα εικονικό DOM, δηλαδή μια προσωρινή μνήμη δομής δεδομένων στη μνήμη. Μόνο οι τελικές αλλαγές ενημερώνονται αργότερα στο DOM του προγράμματος περιήγησης, το οποίο διατηρεί την ταχύτητά του.

JavaΕκφράσεις σεναρίου: Οι εκφράσεις JS μπορούν να χρησιμοποιηθούν στα αρχεία JSX χρησιμοποιώντας αγκύλες, για παράδειγμα {}.

Πλεονεκτήματα του ReactJS

Ακολουθούν σημαντικά πλεονεκτήματα/οφέλη από τη χρήση του ReactJS:

• Το ReactJS χρησιμοποιεί ένα εικονικό DOM που χρησιμοποιεί μια προσωρινή μνήμη δομής δεδομένων στη μνήμη και μόνο οι τελικές αλλαγές ενημερώνονται στο DOM του προγράμματος περιήγησης. Αυτό κάνει την εφαρμογή πιο γρήγορη.
• Μπορείτε να δημιουργήσετε στοιχεία της επιλογής σας χρησιμοποιώντας τη λειτουργία στοιχείων React. Τα στοιχεία μπορούν να επαναχρησιμοποιηθούν και είναι επίσης χρήσιμα στη συντήρηση κώδικα.
• Το ReactJS είναι ένα λογισμικό ανοιχτού κώδικα JavaΒιβλιοθήκη σεναρίων, επομένως είναι εύκολο να ξεκινήσετε.
• Το ReactJS έγινε πολύ δημοφιλές σε σύντομο χρονικό διάστημα και τροφοδοτεί προϊόντα όπως το Facebook και... InstagramΧρησιμοποιείται από πολλές διάσημες εταιρείες όπως η Apple, NetflixΚ.λπ.
• Το Meta διατηρεί τη βιβλιοθήκη ReactJS, επομένως είναι καλά συντηρημένη και ενημερωμένη.
• Το ReactJS μπορεί να χρησιμοποιηθεί για την ανάπτυξη εμπλουτισμένης διεπαφής χρήστη τόσο για επιτραπέζιους υπολογιστές όσο και για εφαρμογές για κινητά.
• Εύκολος εντοπισμός σφαλμάτων και δοκιμή καθώς το μεγαλύτερο μέρος της κωδικοποίησης γίνεται μέσα JavaΓραφή αντί για HTML.

Μειονεκτήματα του ReactJS

Ακολουθούν τα μειονεκτήματα/μειονεκτήματα της χρήσης του ReactJS:

• Το μεγαλύτερο μέρος του κώδικα είναι γραμμένο σε JSX, δηλαδή, η HTML και η CSS αποτελούν μέρος του JavaΣενάριο. Μπορεί να είναι αρκετά περίπλοκο, καθώς τα περισσότερα άλλα πλαίσια προτιμούν το keeping HTML ξεχωριστά από το JavaΚωδικός σεναρίου.
• Το μέγεθος του αρχείου του ReactJS είναι συγκριτικά μεγάλο.

Γνωρίζοντας τους συμβιβασμούς, είστε έτοιμοι να ρυθμίσετε το React. Ο πιο γρήγορος τρόπος για να το δοκιμάσετε είναι απευθείας από ένα CDN, το οποίο καλύπτουμε πρώτα. Στη συνέχεια ακολουθούν οι ρυθμίσεις που βασίζονται σε npm για πραγματικά έργα.

Χρήση ReactJS από το CDN

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

Μεταβείτε στον ιστότοπο τεκμηρίωσης του React για να λάβετε τους συνδέσμους CDN, δηλαδή, https://legacy.reactjs.org/docs/cdn-links.htmlκαι θα λάβετε τα απαραίτητα αρχεία που εξηγούνται στην παρακάτω εικόνα.

Για dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Για την παραγωγή

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Αντικαταστήστε εκδοχή με την έκδοση React που θέλετε τόσο για το react.development.js όσο και για το react-dom.development.js. Χρησιμοποιούμε την έκδοση 16 σε αυτήν τη σελίδα, επομένως τα παρακάτω παραδείγματα εκτελούνται αμετάβλητα.

Σε περίπτωση που σκοπεύετε να χρησιμοποιήσετε τα αρχεία CDN, φροντίστε να διατηρήσετε το χαρακτηριστικό crossorigin για να αποφύγετε προβλήματα μεταξύ τομέων. Ο κώδικας ReactJS δεν μπορεί να εκτελεστεί απευθείας στο πρόγραμμα περιήγησης και πρέπει να μετατραπεί χρησιμοποιώντας το Babel σε απλό. JavaΣκριπτ πριν από την εκτέλεση στο πρόγραμμα περιήγησης.

Εδώ είναι το σενάριο BabelJS που μπορεί να χρησιμοποιηθεί:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Ακολουθεί το παράδειγμα ReactJS που λειτουργεί χρησιμοποιώντας αρχεία CDN και το σενάριο BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Παραγωγή:

Θα εξετάσουμε τις λεπτομέρειες του κώδικα στο επόμενο κεφάλαιο. Ας δούμε πώς λειτουργεί εδώ με αρχεία CDN. Η χρήση του σεναρίου Babel απευθείας δεν είναι καλή πρακτική και οι νεοφερμένοι θα πρέπει να το χρησιμοποιούν μόνο για να μάθουν το ReactJS προς το παρόν. Στην παραγωγή, θα πρέπει να εγκαταστήσετε το React χρησιμοποιώντας το πακέτο npm.

Χρήση πακέτων NPM

Βεβαιωθείτε ότι έχετε εγκαταστήσει το Node.js. Εάν δεν είναι εγκατεστημένο, ακολουθήστε αυτό το σεμινάριο για το Node.js (https://www.guru99.com/node-js-tutorial.html) εγκατάσταση.

Μόλις εγκαταστήσετε το Node.js, δημιουργήστε έναν φάκελο reactproj/.

Για να ξεκινήσετε με τη ρύθμιση του έργου, εκτελέστε την εντολή npm init.

Έτσι θα φαίνεται η δομή των φακέλων:

reactproj\
package.json

Τώρα θα εγκαταστήσουμε τα πακέτα που χρειαζόμαστε.

Εδώ είναι η λίστα με τα πακέτα για το ReactJS. Καρφιτσώνουμε το React στην έκδοση 16, ώστε το ReactDOM.render Τα παραδείγματα σε αυτήν τη σελίδα εκτελούνται ακριβώς όπως φαίνεται:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Ανοίξτε τη γραμμή εντολών και εκτελέστε τις παραπάνω εντολές μέσα στον φάκελο reactproj/.

Δημιουργήστε ένα φάκελο src / όπου θα τοποθετηθεί όλος ο κώδικας JS. Όλος ο κώδικας για το έργο ReactJS θα είναι διαθέσιμος στον φάκελο src/. Δημιουργήστε ένα αρχείο index.js και εισαγάγετε τα react και react-dom, όπως φαίνεται παρακάτω.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Έχουμε γράψει τον βασικό κώδικα για το ReactJS. Θα εξηγήσουμε τις λεπτομέρειες στο επόμενο κεφάλαιο. Θέλουμε να εμφανίσουμε Γεια σας, από Guru99 Σεμινάρια, και το ίδιο δίνεται στο στοιχείο DOM με αναγνωριστικό "root". Λαμβάνεται από το αρχείο index.html, το οποίο είναι το αρχείο έναρξης, όπως φαίνεται παρακάτω.

Δημιουργήστε έναν φάκελο public/ και προσθέστε το index.html σε αυτόν όπως φαίνεται παρακάτω.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Το πακέτο react-scripts θα αναλάβει τη μεταγλώττιση του κώδικα και την εκκίνηση του διακομιστή για την εμφάνιση του αρχείου HTML, δηλαδή του index.html. Πρέπει να προσθέσετε την εντολή στο package.json που θα αναλάβει τη χρήση των react-scripts για τη μεταγλώττιση του κώδικα και την εκκίνηση του διακομιστή, όπως φαίνεται παρακάτω:

 "scripts": {
    "start": "react-scripts start"
  }

Αφού εγκαταστήσετε όλα τα πακέτα και προσθέσετε την παραπάνω εντολή, το τελικό πακέτο.json έχει ως εξής:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Για να ξεκινήσετε τη δοκιμή του ReactJS, εκτελέστε την εντολή:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Θα ανοίξει το πρόγραμμα περιήγησης με το URL http://localhost:3000/ όπως φαίνεται παρακάτω:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Θα χρησιμοποιήσουμε την ίδια διαδικασία για να εκτελέσουμε το JavaΑρχεία σεναρίου και στα επόμενα κεφάλαια. Προσθέστε όλα τα αρχεία .js και .jsx στον φάκελο src/. Η δομή των αρχείων θα έχει ως εξής:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Πώς να δημιουργήσετε το πρώτο σας πρόγραμμα React Project Setup

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

Βήμα 1) Εισαγάγετε τα πακέτα react.
1. Για να ξεκινήσουμε με το ReactJS, πρέπει πρώτα να εισάγουμε τα πακέτα react ως εξής.

import React from 'react';
import ReactDOM from 'react-dom';

2. Αποθηκεύστε το αρχείο ως index.js στον φάκελο src/.

Βήμα 2) Γράψτε απλά Code.
Θα γράψουμε έναν απλό κώδικα σε αυτό το σεμινάριο React JS, όπου θα εμφανίσουμε το μήνυμα «Γεια σας, από Guru99 εκπαιδευτικά βίντεο!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render θα προσθέσει το ετικέτα στο στοιχείο με id root. Ακολουθεί το αρχείο HTML που έχουμε:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Βήμα 3) Συγκεντρώστε το Code.

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

Εδώ είναι η δομή του φακέλου:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Έχουμε προσθέσει τις εντολές για τη μεταγλώττιση του τελικού αρχείου στο package.json ως εξής:

"scripts": {
    "start": "react-scripts start"
  },

Για να μεταγλωττίσετε το τελικό αρχείο, εκτελέστε την ακόλουθη εντολή:

npm run start

Όταν εκτελείτε την παραπάνω εντολή, θα μεταγλωττίσει τα αρχεία και θα σας ειδοποιήσει εάν υπάρχει κάποιο σφάλμα. Εάν όλα φαίνονται καλά, θα ανοίξει το πρόγραμμα περιήγησης και θα εκτελέσει τη σελίδα στη διεύθυνση http://localhost:3000/

Εντολή: npm έναρξη εκτέλεσης:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Βήμα 4) Ελέγξτε την έξοδο.
The URL http://localhost:3000 θα ανοίξει στο πρόγραμμα περιήγησης μόλις ολοκληρωθεί η μεταγλώττιση του κώδικα, όπως φαίνεται παρακάτω:

Πώς να ρυθμίσετε το React με το Vite (Σύγχρονη Προσέγγιση)

Η παραπάνω ρύθμιση των react-scripts προέρχεται από το Create React App (CRA), το οποίο ήταν το βασικό εργαλείο εκκίνησης για χρόνια. Η ομάδα React απέσυρε επίσημα το Create React App τον Φεβρουάριο του 2025, επομένως τα νέα έργα θα πρέπει να χρησιμοποιούν ένα σύγχρονο εργαλείο δημιουργίας. Η πιο δημοφιλής επιλογή σήμερα είναι Ζει, το οποίο ξεκινάει πιο γρήγορα και παράγει μικρότερες κατασκευές.

Δείτε πώς μπορείτε να δημιουργήσετε ένα νέο έργο React με το Vite:

Βήμα 1) Εκτελέστε την εντολή scaffolding στο τερματικό σας:

npm create vite@latest my-react-app -- --template react

Βήμα 2) Μετακινηθείτε στον φάκελο και εγκαταστήστε τις εξαρτήσεις:

cd my-react-app
npm install

Βήμα 3) Ξεκινήστε τον διακομιστή ανάπτυξης:

npm run dev

Το Vite παρέχει την εφαρμογή στο http://localhost:5173/ από προεπιλογή και επαναφορτώνεται αμέσως όταν αποθηκεύετε ένα αρχείο.

Βασικές διαφορές από την παλαιότερη ρύθμιση σε αυτήν τη σελίδα:

• Το αρχείο εισαγωγής είναι src/main.jsx αντί για src/index.js.
• Εγκαθιστά την πιο πρόσφατη έκδοση του React, η οποία χρησιμοποιεί δημιουργίαRoot αντί για το ReactDOM.render.
• Το index.html βρίσκεται στη ρίζα του έργου, όχι στο public/.
• Οι κατασκευές παράγονται με npm run build σε έναν φάκελο dist/.

Για ανάγκες πλήρους στοίβας, όπως δρομολόγηση και απόδοση διακομιστή, η ομάδα React συνιστά επίσης πλαίσια όπως Next.jsΌλα όσα μαθαίνετε στα παρακάτω κεφάλαια — JSX, components, state και props — εφαρμόζονται αμετάβλητα σε ένα έργο Vite ή Next.js.

Τι είναι το JSX;

Το JSX είναι μια επέκταση του JavaΣενάριο. Είναι ένα πρότυπο σεναρίου όπου θα έχετε τη δύναμη να χρησιμοποιείτε HTML και JavaΣενάριο μαζί.

Εδώ είναι ένα απλό παράδειγμα κώδικα JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Γιατί χρειαζόμαστε το JSX στο React;

Για ένα UI, χρειαζόμαστε HTML και κάθε στοιχείο στο DOM θα έχει συμβάντα προς διαχείριση, αλλαγές κατάστασης κ.λπ.

Στην περίπτωση του React, μας επιτρέπει να χρησιμοποιήσουμε HTML και JavaΔημιουργήστε ένα σενάριο στο ίδιο αρχείο και φροντίστε τις αλλαγές κατάστασης στο DOM με αποτελεσματικό τρόπο.

Εκφράσεις σε JSX

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

Σε προηγούμενα παραδείγματα ReactJS, είχαμε γράψει κάτι σαν:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Θα αλλάξουμε τώρα τον παραπάνω κώδικα για να προσθέσουμε εκφράσεις. Οι εκφράσεις χρησιμοποιούνται μέσα σε αγκύλες {} και επεκτείνονται κατά τη διάρκεια της εκτέλεσης. Οι εκφράσεις στο React είναι οι ίδιες με JavaΕκφράσεις σεναρίου.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Ας δοκιμάσουμε τώρα το ίδιο στο πρόγραμμα περιήγησης.

Μπορείτε να δείτε στο παραπάνω στιγμιότυπο οθόνης ότι η έκφραση {display} δεν αντικαθίσταται. Το React δεν γνωρίζει τι να κάνει όταν μια έκφραση χρησιμοποιείται μέσα σε ένα αρχείο .js.

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

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Έχουμε προσθέσει τον απαιτούμενο κώδικα και θα χρησιμοποιήσουμε το αρχείο test.jsx στο index.js. Θέλουμε το h1tag μεταβλητή που θα χρησιμοποιηθεί μέσα στο index.js, επομένως η ίδια εξάγεται όπως φαίνεται παραπάνω στο test.jsx.

Εδώ είναι ο τροποποιημένος κώδικας στο index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Για να χρησιμοποιήσουμε το test.jsx στο index.js, πρέπει πρώτα να το εισαγάγουμε όπως φαίνεται παρακάτω:

import h1tag from './test.jsx';

Μπορούμε να χρησιμοποιήσουμε το h1tag τώρα στο ReactDOM.render όπως φαίνεται παρακάτω:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Εδώ είναι η έξοδος όταν ελέγχουμε το ίδιο στο πρόγραμμα περιήγησης:

Τι είναι τα Components στο ReactJS;

Τα συστατικά είναι σαν καθαρά JavaΣυναρτήσεις σεναρίου που βοηθούν στην εύκολη επεξεργασία του κώδικα, διαιρώντας τη λογική σε επαναχρησιμοποιήσιμο ανεξάρτητο κώδικα.

Στοιχεία ως συναρτήσεις

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Δημιουργήσαμε μια συνάρτηση που ονομάζεται Γεια σας που επιστρέφει μια ετικέτα h1, όπως φαίνεται παραπάνω. Το όνομα της συνάρτησης λειτουργεί ως στοιχείο, όπως φαίνεται παρακάτω:

const Hello_comp = <Hello />;
export default Hello_comp;

Το στοιχείο Γεια σας χρησιμοποιείται ως ετικέτα HTML, δηλ. , που έχει ανατεθεί στο Hello_comp μεταβλητή και η ίδια εξάγεται χρησιμοποιώντας την εντολή export.

Ας χρησιμοποιήσουμε τώρα αυτό το στοιχείο στο αρχείο index.js όπως φαίνεται παρακάτω:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Εδώ είναι η έξοδος στο πρόγραμμα περιήγησης:

Κατηγορία ως στοιχείο

Ακολουθεί ένα παράδειγμα ReactJS που χρησιμοποιεί μια κλάση ως στοιχείο.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Μπορούμε να χρησιμοποιήσουμε το στοιχείο Hello στο αρχείο index.js ως εξής:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Το στοιχείο Hello χρησιμοποιείται ως ετικέτα HTML, δηλαδή, .

Εδώ είναι η έξοδος του ίδιου.

Στοιχεία Κλάσης έναντι Στοιχείων Συνάρτησης και Γάντζων

Έχετε δει και τους δύο τρόπους για να γράψετε ένα στοιχείο, ποιον από τους δύο πρέπει να χρησιμοποιήσετε; Αυτή η σελίδα διδάσκει τα στοιχεία κλάσης επειδή καθιστούν σαφείς τις έννοιες κατάστασης και κύκλου ζωής, κάτι που είναι πολύτιμο για αρχάριους και εξακολουθεί να εμφανίζεται σε παλαιότερες βάσεις κώδικα. Ωστόσο, από τότε που το React 16.8 εισήγαγε το Hooks, τα στοιχεία συνάρτησης μπορούν επίσης να διατηρούν την κατάσταση και αποτελούν το συνιστώμενο στυλ για όλο τον νέο κώδικα.

Ακολουθεί το παράδειγμα κατάστασης από αυτήν τη σελίδα που ξαναγράφτηκε με το useState Hook:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Και οι δύο εκδόσεις αποδίδουν το ίδιο αποτέλεσμα. Μάθετε τη σύνταξη της κλάσης που χρησιμοποιείται στα παρακάτω κεφάλαια και, στη συνέχεια, εξασκηθείτε στη μετατροπή κάθε παραδείγματος σε Hooks.

Τι είναι μια κατάσταση στο ReactJS;

Ένα κράτος είναι ένα JavaΑντικείμενο script, παρόμοιο με τα props, που περιέχει δεδομένα που θα χρησιμοποιηθούν με την απόδοση ReactJS. Τα δεδομένα κατάστασης είναι ένα ιδιωτικό αντικείμενο και χρησιμοποιούνται μέσα σε στοιχεία μέσα σε μια κλάση.

Παράδειγμα κράτους

Ακολουθεί ένα λειτουργικό παράδειγμα για το πώς να χρησιμοποιήσετε την state μέσα σε μια κλάση.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Αυτό είναι αυτό που παίρνουμε όταν το δοκιμάζουμε στο πρόγραμμα περιήγησης:

Τι είναι τα Props στο ReactJS;

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

Υποστηρικτικά στοιχεία για τη λειτουργία

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

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Όπως φαίνεται παραπάνω, έχουμε προσθέσει το msg αποδίδουν στο στοιχείο. Το ίδιο μπορεί να προσπελαστεί ως στηρίγματα μέσα στη συνάρτηση Hello, η οποία είναι ένα αντικείμενο που θα έχει το msg λεπτομέρειες χαρακτηριστικών, και το ίδιο χρησιμοποιείται ως έκφραση.

Το στοιχείο χρησιμοποιείται στο index.js ως εξής:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Εδώ είναι η έξοδος στο πρόγραμμα περιήγησης:

Στηρίγματα στο στοιχείο της τάξης

Για να έχουμε πρόσβαση στα props σε μια κλάση, μπορούμε να το κάνουμε ως εξής:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

The msg Το χαρακτηριστικό μεταβιβάζεται στο στοιχείο στο index.js ως εξής:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Αυτή είναι η έξοδος στο πρόγραμμα περιήγησης:

Ελέγξτε επίσης: - Οδηγός AngularJS για αρχάριους: Μάθετε το AngularJS βήμα προς βήμα

Κύκλος ζωής ενός στοιχείου

Έχοντας καλύψει τα components, την κατάσταση και τα props, το επόμενο βήμα είναι η κατανόηση του πότε το React καλεί τις μεθόδους του component σας. Ένας κύκλος ζωής component χωρίζεται σε στάδια Αρχικοποίησης, Τοποθέτησης, Ενημέρωσης και Αποσύνδεσης.

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

Ένα στοιχείο στο ReactJS έχει τα ακόλουθα στάδια:

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

Εδώ θα έχει τα προεπιλεγμένα στηρίγματα και την κατάσταση στο αρχικό επίπεδο.

ΒάσηΣε αυτήν τη φάση, το στοιχείο αποδίδεται μέσα στο DOM. Έχουμε έκθεση στις ακόλουθες μεθόδους στην κατάσταση τοποθέτησης:

• render(): Έχετε αυτήν τη μέθοδο για όλα τα στοιχεία που δημιουργήθηκαν. Επιστρέφει τον κόμβο HTML.
• componentDidMount(): Αυτό καλείται αμέσως μετά την προσθήκη του στοιχείου στο DOM.

ΕνημέρωσηΣε αυτήν την κατάσταση, ο χρήστης αλληλεπιδρά με το DOM και αυτό ενημερώνεται. Για παράδειγμα, εισάγετε κάτι στο πλαίσιο κειμένου, επομένως οι ιδιότητες κατάστασης ενημερώνονται.

Ακολουθούν οι μέθοδοι που είναι διαθέσιμες στην κατάσταση ενημέρωσης:

• shouldComponentUpdate(): καλείται πριν από την επαναποτύπωση. Σας επιτρέπει να αποφασίσετε εάν το στοιχείο πρέπει να ενημερωθεί. Η επιστροφή true επαναποδίδει το στοιχείο.
• componentDidUpdate(): καλείται μετά την ενημέρωση του στοιχείου.

Αποπροσάρτηση: Αυτή η κατάσταση εμφανίζεται όταν το στοιχείο δεν απαιτείται ή αφαιρείται.

Η ακόλουθη μέθοδος είναι διαθέσιμη στην κατάσταση αποσύνδεσης:

• componentWillUnmount(): καλείται ακριβώς πριν την αφαίρεση ή την καταστροφή του στοιχείου.

Παράδειγμα Λειτουργίας Μεθόδων Κύκλου Ζωής

Ακολουθεί ένα λειτουργικό παράδειγμα που δείχνει τις μεθόδους που καλούνται σε κάθε στάδιο.

Παράδειγμα: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Όταν ελέγχετε την έξοδο στο πρόγραμμα περιήγησης:

Στην κονσόλα του προγράμματος περιήγησης λαμβάνετε:

Όταν ο χρήστης εισάγει στο πλαίσιο κειμένου:

Στην κονσόλα, εμφανίζονται τα ακόλουθα μηνύματα:

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

Εργασία με Φόρμες

Στο ReactJS, στοιχεία εισόδου HTML όπως , και <select /> έχουν τη δική τους κατάσταση και πρέπει να ενημερώνονται όταν ο χρήστης αλληλεπιδρά, χρησιμοποιώντας τη μέθοδο setState().

Σε αυτό το κεφάλαιο, θα δούμε πώς να εργαζόμαστε με φόρμες στο ReactJS.

Ακολουθεί ένα παράδειγμα εργασίας:

μορφή.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Για τα πεδία εισόδου, πρέπει να διατηρήσουμε την κατάσταση, επομένως για αυτό το React παρέχει μια ειδική μέθοδο που ονομάζεται setState, το οποίο βοηθά στη διατήρηση της κατάστασης κάθε φορά που υπάρχει αλλαγή. Σε μια πραγματική εφαρμογή, καλέστε επίσης event.preventDefault() inside formSubmit για να σταματήσει το πρόγραμμα περιήγησης από το να φορτώσει ξανά τη σελίδα κατά την υποβολή.

Χρησιμοποιήσαμε τα συμβάντα onChange και onClick στο πλαίσιο κειμένου και κουμπί υποβολής. Όταν ο χρήστης πληκτρολογεί μέσα στο πλαίσιο κειμένου, καλείται το συμβάν onChange και το πεδίο ονόματος μέσα στο αντικείμενο state ενημερώνεται, όπως φαίνεται παρακάτω:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Η έξοδος στο πρόγραμμα περιήγησης είναι η εξής:

Βήμα 1) Πληκτρολογήστε το όνομά σας στο πλαίσιο κειμένου:

Βήμα 2) Κάντε κλικ στο κουμπί υποβολής:

Εργασία με συμβάντα στο ReactJS

Οι φόρμες είναι μόνο μία πηγή αλληλεπίδρασης χρήστη. Η εργασία με συμβάντα στο ReactJS είναι η ίδια με τον τρόπο που θα την είχατε κάνει στο JavaΣενάριο. Μπορείτε να χρησιμοποιήσετε όλους τους χειριστές συμβάντων που χρησιμοποιούνται στο JavaΣενάριο. Η μέθοδος setState() χρησιμοποιείται για την ενημέρωση της κατάστασης όταν ο χρήστης αλληλεπιδρά με οποιοδήποτε στοιχείο HTML.

Ακολουθεί ένα λειτουργικό παράδειγμα για το πώς να χρησιμοποιήσετε συμβάντα στο ReactJS.

συμβάντα.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

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

Χρησιμοποιήσαμε τα γεγονότα αλλάζουμε onClick στο πλαίσιο κειμένου και το κουμπί. Όταν ο χρήστης πληκτρολογεί μέσα στο πλαίσιο κειμένου, το αλλάζουμε καλείται το συμβάν και το πεδίο ονόματος μέσα στο αντικείμενο state ενημερώνεται, όπως φαίνεται παρακάτω:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Εδώ είναι η έξοδος στο πρόγραμμα περιήγησης:

Όταν ένας χρήστης εισάγει το όνομα:

Όταν ο χρήστης κάνει κλικ στο κουμπί Κάντε κλικ εδώ:

Εργασία με Inline CSS στο ReactJS

Μόλις τα στοιχεία σας διαχειριστούν δεδομένα και συμβάντα, το τελευταίο βήμα είναι η διαμόρφωση του στυλ τους. Θα ρίξουμε μια ματιά σε ένα λειτουργικό παράδειγμα για να κατανοήσουμε το ενσωματωμένο CSS στο ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Έχω προσθέσει το στυλ color: 'red' στην ετικέτα h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Η έξοδος στο πρόγραμμα περιήγησης είναι η εξής:

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

Εργασία με εξωτερικό CSS στο ReactJS

Ας δημιουργήσουμε ένα εξωτερικό αρχείο CSS. Για αυτό, δημιουργήστε έναν φάκελο css/ και προσθέστε το style.css σε αυτόν.

style.css

.h1tag {
color:red;
}

Προσθέστε το style.css στο αρχείο index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Τώρα ας προσθέσουμε την κλάση στην ετικέτα h1 στο αρχείο .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Το χαρακτηριστικό className λαμβάνει τις λεπτομέρειες της κλάσης. Σημειώστε ότι το JSX χρησιμοποιεί className αντί για το χαρακτηριστικό HTML class, επειδή η class είναι μια δεσμευμένη λέξη-κλειδί στο JavaΣενάριο. Τώρα ας το δοκιμάσουμε στο πρόγραμμα περιήγησης.

Αυτό βλέπετε όταν ελέγχετε την ετικέτα h1 στο πρόγραμμα περιήγησης:

Μπορείτε να δείτε ότι η κλάση="h1tag" προστέθηκε με επιτυχία στην ετικέτα h1.

Γιατί το ReactDOM.render αντικαταστάθηκε από το createRoot

Κάθε παράδειγμα σε αυτήν τη σελίδα προσαρτά την εφαρμογή με το ReactDOM.render, το οποίο είναι σωστό για το React 16 και το 17, τις εκδόσεις στις οποίες στοχεύει αυτό το μάθημα. Το React 18, που κυκλοφόρησε τον Μάρτιο του 2022, αντικατέστησε αυτό το σημείο εισόδου με το createRoot API και το React 19 αφαίρεσε εντελώς το ReactDOM.render. Ο λόγος είναι η ταυτόχρονη εκτέλεση: το createRoot επιτρέπει στο React να προετοιμάζει πολλές εκδόσεις του UI ταυτόχρονα, να διακόπτει την απόδοση χαμηλής προτεραιότητας και να διατηρεί τηνping και οι κινούμενες εικόνες είναι ομαλές. Χαρακτηριστικά όπως η αυτόματη ομαδοποίηση, το useTransition και η ροή με βάση την αγωνία εξαρτώνται όλα από αυτό.

Το σύγχρονο αντίστοιχο του index.js που χρησιμοποιείται σε αυτήν τη σελίδα μοιάζει με αυτό:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Όλα τα άλλα που μάθατε εδώ — components, JSX, state, props και events — λειτουργούν με τον ίδιο τρόπο μετά από αυτήν την αλλαγή μίας γραμμής στο σημείο εισόδου. Διαφορές έκδοσης όπως αυτή εμφανίζονται συχνά στο Ερωτήσεις συνέντευξης Reaction JS, επομένως αξίζει να κατανοήσετε και τα δύο API.

Συχνές Ερωτήσεις

Ελέγξτε επίσης: - Κορυφαίες 70 ερωτήσεις και απαντήσεις συνέντευξης React (Ενημερώθηκε)