Οδηγός ReactJS για αρχάριους: Μάθετε με Παράδειγμα βήμα προς βήμα

Τι είναι το ReactJS;

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

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

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

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

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

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

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

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

Το ReactJS χρησιμοποιεί εικονικό dom που κάνει χρήση της κρυφής μνήμης της δομής δεδομένων στη μνήμη και μόνο οι τελικές αλλαγές ενημερώνονται στο dom browser. Αυτό κάνει την εφαρμογή πιο γρήγορη.
Μπορείτε να δημιουργήσετε στοιχεία της επιλογής σας χρησιμοποιώντας τη δυνατότητα react component. Τα εξαρτήματα μπορούν να επαναχρησιμοποιηθούν και επίσης βοηθούν στη συντήρηση του κώδικα.
Το Reactjs είναι μια βιβλιοθήκη javascript ανοιχτού κώδικα, επομένως είναι εύκολο να ξεκινήσετε.
Το ReactJS έχει γίνει πολύ δημοφιλές σε σύντομο χρονικό διάστημα και διατηρείται από το Facebook και το Instagram. Χρησιμοποιείται από πολλές διάσημες εταιρείες όπως η Apple, NetflixΚ.λπ.
Το Facebook διατηρεί το ReactJS, τη βιβλιοθήκη, επομένως διατηρείται καλά και ενημερώνεται.
Το ReactJS μπορεί να χρησιμοποιηθεί για την ανάπτυξη εμπλουτισμένης διεπαφής χρήστη τόσο για επιτραπέζιους υπολογιστές όσο και για εφαρμογές για κινητά.
Εύκολος εντοπισμός σφαλμάτων και δοκιμή καθώς το μεγαλύτερο μέρος της κωδικοποίησης γίνεται μέσα Javascript παρά σε Html.

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

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

Το μεγαλύτερο μέρος του κώδικα είναι γραμμένο σε JSX, δηλαδή, το Html και το css είναι μέρος του javascript, μπορεί να είναι αρκετά μπερδεμένο καθώς τα περισσότερα άλλα πλαίσια προτιμούν να διατηρούν το Html ξεχωριστά από τον κώδικα javascript.
Το μέγεθος αρχείου του ReactJS είναι μεγάλο.

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

Για να ξεκινήσουμε να δουλεύουμε με το react, πρέπει πρώτα να εγκαταστήσουμε το reactjs. Μπορείτε εύκολα να ξεκινήσετε να χρησιμοποιείτε το reactjs χρησιμοποιώντας τα αρχεία javascript CDN, όπως φαίνεται παρακάτω.

Μεταβείτε στον επίσημο ιστότοπο του reactjs για να λάβετε τους συνδέσμους CDN, π.χ. https://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.developement.js. Μπορείτε να φιλοξενήσετε τα αρχεία στο τέλος σας για να ξεκινήσετε να εργάζεστε με το reactjs.

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

Εδώ είναι το σενάριο 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

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

Αφού εγκαταστήσετε το nodejs, δημιουργήστε έναν φάκελο reactproj/.

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

Έτσι θα μοιάζει η δομή του φακέλου:

reactproj\
package.json

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

Ακολουθεί η λίστα των πακέτων για το reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Δημιουργήστε ένα φάκελο src / όπου όλος ο κώδικας js θα μπει σε αυτόν τον φάκελο. Όλος ο κώδικας για το έργο reactjs θα είναι διαθέσιμος στο φάκελο src/. Δημιουργήστε ένα αρχείο index.js και προσθέστε import 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 Tutorials και το ίδιο δίνεται στο στοιχείο dom με id “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",
  "devDependencies": {
    "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>

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

reatproj/
	 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) Γράψτε απλό κώδικα.
Θα γράψουμε έναν απλό κώδικα σε αυτό το σεμινάριο React JS, όπου θα εμφανίσουμε το μήνυμα "Γεια σας, από το Guru99 Tutorials!"

ReactDOM.render(

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

ReactDOM.render θα προσθέσει το ετικέτα στο στοιχείο με ρίζα αναγνωριστικού. Εδώ είναι το αρχείο html που έχουμε:

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

Βήμα 3) Καταρτίστε τον Κώδικα.

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

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

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

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

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

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

npm run start

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

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

C:\reactproj>npm run start

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

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

Τι είναι το JSX;

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

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

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

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

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

Στην περίπτωση του React, μας επιτρέπει να χρησιμοποιούμε Html και javascript στο ίδιο αρχείο και να φροντίζουμε τις αλλαγές κατάστασης στο 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 είναι ίδιες με τις εκφράσεις javascript.

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;

Προσθέσαμε τον απαιτούμενο κώδικα και θα χρησιμοποιήσουμε το αρχείο text.jsx στο index.js. Θέλουμε το h1tag μεταβλητή που θα χρησιμοποιηθεί μέσα στο script.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;

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

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

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 μεταβλητή και το ίδιο εξάγεται με χρήση εξαγωγής.

Ας χρησιμοποιήσουμε τώρα αυτό το στοιχείο στο αρχείο 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')
);

Το Component Hello χρησιμοποιείται ως ετικέτα Html, π.χ. .

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

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

Μια κατάσταση είναι ένα αντικείμενο javascript παρόμοιο με τα props που έχουν δεδομένα που θα χρησιμοποιηθούν με την απόδοση του reactjs. Τα δεδομένα κατάστασης είναι ένα ιδιωτικό αντικείμενο και χρησιμοποιούνται σε στοιχεία μέσα σε μια κλάση.

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

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

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;

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

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

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

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')
);

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

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

Για να αποκτήσουμε πρόσβαση στα στηρίγματα μιας τάξης μπορούμε να το κάνουμε ως εξής:

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 βήμα προς βήμα

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

Ένας κύκλος ζωής εξαρτημάτων χωρίζεται σε στάδια εκκίνησης, τοποθέτησης, ενημέρωσης και αποπροσάρτησης.

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

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

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

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

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

componentDidMount(): Καλείται επίσης όταν το Component μόλις προστεθεί στο dom.

render(): Έχετε αυτήν τη μέθοδο για όλα τα στοιχεία που δημιουργήθηκαν. Επιστρέφει τον κόμβο Html.

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

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

shouldComponentUpdate() : καλείται όταν το στοιχείο ενημερώνεται.

componentDidUpdate() : μετά την ενημέρωση του στοιχείου.

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

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

Component willUnmount(): καλείται όταν το Component αφαιρεθεί ή καταστραφεί.

Παράδειγμα εργασίας

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

Παράδειγμα: 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, που βοηθά στη διατήρηση της κατάστασης κάθε φορά που υπάρχει αλλαγή.

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

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) Εισαγάγετε το όνομά σας στο πλαίσιο κειμένου:

Κάντε κλικ στο κουμπί υποβολής

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

Η εργασία με συμβάντα στο reactjs είναι η ίδια όπως θα κάνατε στο javascript. Μπορείτε να χρησιμοποιήσετε όλους τους χειριστές συμβάντων που χρησιμοποιούνται στο javascript. Η μέθοδος 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;

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

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

Θα ρίξουμε μια ματιά σε ένα παράδειγμα εργασίας για να κατανοήσουμε τη λειτουργία του inline 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;

Έχω προσθέσει χρώμα: στυλ «κόκκινο» στην ετικέτα 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>
    <script src = "out/script.min.js"></script>
  </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 δίνονται οι λεπτομέρειες της κλάσης. Τώρα ας δοκιμάσουμε στο πρόγραμμα περιήγησης.

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

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

Σύνοψη

Το ReactJS είναι ένα front-end ανοιχτού κώδικα JavaΒιβλιοθήκη σεναρίων για τη δημιουργία της διεπαφής χρήστη. Συντηρείται από το Facebook και χρησιμοποιείται από πολλές εταιρείες σήμερα για ανάπτυξη διεπαφής χρήστη.
Τα βασικά χαρακτηριστικά του ReactJS περιλαμβάνουν JSX, στοιχεία (λειτουργικά στοιχεία και στοιχεία που βασίζονται σε κλάσεις), τον κύκλο ζωής ενός στοιχείου, στηρίγματα και υποστήριξη κατάστασης για ένα στοιχείο, που εργάζονται με εκφράσεις javascript.
Η ρύθμιση του έργου του ReactJS εξηγείται χρησιμοποιώντας αρχεία CDN και επίσης χρησιμοποιώντας πακέτα npm για τη δημιουργία του έργου.
Το JSX είναι μια επέκταση της Javascript. Είναι ένα πρότυπο σενάριο όπου θα έχετε τη δύναμη να χρησιμοποιείτε Html και javascript μαζί.
Τα στοιχεία είναι σαν καθαρές συναρτήσεις Javascript που βοηθούν να γίνει ο κώδικας εύκολος διαχωρίζοντας τη λογική σε επαναχρησιμοποιήσιμο ανεξάρτητο κώδικα.
Μια κατάσταση είναι ένα αντικείμενο javascript παρόμοιο με τα props που έχουν δεδομένα που θα χρησιμοποιηθούν με την απόδοση του reactjs. Τα δεδομένα κατάστασης είναι ένα ιδιωτικό αντικείμενο και χρησιμοποιούνται σε στοιχεία μέσα σε μια κλάση.
Τα στηρίγματα είναι ιδιότητες που χρησιμοποιούνται μέσα σε ένα εξάρτημα.
Ένας κύκλος ζωής εξαρτημάτων χωρίζεται σε στάδια εκκίνησης, τοποθέτησης, ενημέρωσης και αποπροσάρτησης.
Στο reactjs στοιχεία εισόδου html όπως , και το <select /> έχει τη δική του κατάσταση και πρέπει να ενημερώνεται όταν ο χρήστης αλληλεπιδρά χρησιμοποιώντας τη μέθοδο setState().
Η εργασία με συμβάντα στο reactjs είναι η ίδια όπως θα κάνατε στο javascript. Μπορείτε να χρησιμοποιήσετε όλους τους χειριστές συμβάντων που χρησιμοποιούνται στο javascript. Η μέθοδος setState() χρησιμοποιείται για την ενημέρωση της κατάστασης όταν ο χρήστης αλληλεπιδρά με οποιοδήποτε στοιχείο Html.
Το ReactJS σάς επιτρέπει να εργάζεστε με εξωτερικό css καθώς και με inline css χρησιμοποιώντας έκφραση javascript.

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

Μπορεί να σας αρέσει:

5 καλυτερα React Courses με…

Τι είναι το ReactJS;

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

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

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

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

Για dev

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

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

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

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

Τι είναι το JSX;

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

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

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

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

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

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

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

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

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

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

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

Παράδειγμα εργασίας

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

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

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

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

Σύνοψη