Δημιουργήστε την εφαρμογή React, δημιουργήστε την πρώτη σας εφαρμογή με το React Ubuntu 20.04

Στο επόμενο άρθρο θα ρίξουμε μια ματιά πώς μπορούμε να δημιουργήσουμε την πρώτη μας εφαρμογή με το ReactJS στο Ubuntu 20.04 χρησιμοποιώντας το Δημιουργία εφαρμογής React. Το ReactJS είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που χρησιμοποιείται για τη δημιουργία της διεπαφής χρήστη, που διατηρείται από το Facebook και την κοινότητα προγραμματιστών. Το ReactJS μπορεί να χρησιμοποιηθεί για την ανάπτυξη εφαρμογών ιστού ή εφαρμογών για κινητά.

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

Εγκατάσταση του React στο Ubuntu 20.04

Για να εγκαταστήσουμε το React στο σύστημά μας, πρέπει πρώτα να γνωρίζουμε τι είναι το npm και να κατανοήσουμε γιατί τα χρειαζόμαστε. Το Npm σημαίνει Node Package Managerκαι είναι το μεγαλύτερο μητρώο λογισμικού ανοιχτού κώδικα στον κόσμο. Περιέχει περισσότερα από 800.000 πακέτα κώδικα. Το Npm είναι δωρεάν στη χρήση και οποιοδήποτε δημόσιο λογισμικό μπορεί να ληφθεί και να χρησιμοποιηθεί χωρίς εγγραφή ή σύνδεση.

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

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

να εγκαταστήστε nodejs, το οποίο περιλαμβάνει npm, θα πρέπει να ανοίξουμε μόνο ένα τερματικό (Ctrl + Alt + T) και να εκτελέσουμε την ακόλουθη εντολή:

sudo apt install nodejs

Μετά την ολοκλήρωση της εγκατάστασης npm, μπορούμε ελέγξτε την έκδοση και την έκδοση του κόμβου. Μπορούμε να το κάνουμε με την εντολή:

npm -v

Η έκδοση του εγκατεστημένου npm εξαρτάται από την ημερομηνία εγκατάστασης, καθώς η ενημέρωση εκτελείται συχνά. Είναι απαραίτητο να βεβαιωθούμε ότι έχουμε εγκαταστήσει μια έκδοση υψηλότερη από 5.

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

node -v

Εάν δεν έχετε εγκαταστήσει την τελευταία έκδοση του npm στο σύστημά σας, μπορείτε να ενημερώσετε το Node Package Manager (npm) στην πιο πρόσφατη έκδοση εκτέλεση αυτής της εντολής στο τερματικό:

sudo npm install -g npm@latest

Εγκαταστήστε το create-react-app

Για να εγκαταστήσουμε ένα παραγωγικό περιβάλλον React, θα χρειαστεί να διαμορφώσουμε εργαλεία όπως το babel, το webpack κ.λπ., το οποίο είναι πολύπλοκο για τη διαμόρφωση για αρχάριους στον κόσμο του React. Αλλά μπορούμε να βρούμε διάφορα εργαλεία που θα μας βοηθήσουν στη διαμόρφωση. Μεταξύ αυτών θα βρούμε create-react-app, το οποίο είναι το ευκολότερο εργαλείο για χρήση και διαμόρφωση.

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

Δημιουργήστε την εφαρμογή React για να διαμορφώσετε το περιβάλλον ανάπτυξης ώστε να μπορείτε να χρησιμοποιήσετε τις πιο πρόσφατες λειτουργίες Javascript, παρέχοντας μια καλή εμπειρία ανάπτυξης και βελτιστοποιώντας την εφαρμογή σας για παραγωγή. Όπως αναφέρεται στον ιστότοπό τους, είναι απαραίτητο να έχετε εγκατεστημένο το μηχάνημα Node> = 8.10 και npm> = 5.6 στο μηχάνημά σας.

Μπορούμε εγκαταστήστε create-react-app χρησιμοποιώντας npm. Για να γίνει αυτό, σε ένα τερματικό (Ctrl + Alt + T) θα χρειαστεί να εκτελέσουμε μόνο την ακόλουθη εντολή εγκατάστασης:

sudo npm install -g create-react-app

Μόλις ολοκληρωθεί η εγκατάσταση της εφαρμογής create-react-app στο σύστημά μας, μπορούμε ελέγξτε την εγκατεστημένη έκδοση εκτελώντας την ακόλουθη εντολή:

create-react-app --version

Δημιουργία της πρώτης εφαρμογής React

Η πρώτη μας εφαρμογή React μπορεί να δημιουργηθεί χρησιμοποιώντας απλώς την εφαρμογή create-react-app. Θα πρέπει να χρησιμοποιήσουμε μόνο την ακόλουθη εντολή:

create-react-app mi-primera-app

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

Εκτέλεση της εφαρμογής React

Μόλις δημιουργηθεί το έργο React, θα πρέπει να μετακινηθούμε στον κατάλογο έργου και να εκτελέσουμε την εφαρμογή React χρησιμοποιώντας την ακόλουθη εντολή στο τερματικό (Ctrl + Alt + T):

npm start

Η εντολή έναρξη npm ξεκινήστε τον διακομιστή ανάπτυξης που θα εκτελέσει ολόκληρη τη διαδικασία κατασκευής.

Το τερματικό θα μας πει ότι πρέπει ανοίξτε το πρόγραμμα περιήγησης και φορτώστε την εφαρμογή που θα εκτελεστεί στο url http: // localhost: 3000 από προεπιλογή. Όταν ανοίξει το πρόγραμμα περιήγησης, θα δείτε το λογότυπο και τα κείμενα του React στην οθόνη.

Απεγκαταστήστε το create-react-app και το npm

Χρήστες μπορούμε να απεγκαταστήσουμε οποιαδήποτε βιβλιοθήκη εγκατεστημένη από το npm χρησιμοποιώντας την εντολή απεγκατάσταση npm. Εκτελέστε την ακόλουθη εντολή στο τερματικό (Ctrl + Alt + T) για απεγκατάσταση δημιουργία-αντίδραση-εφαρμογή:

sudo npm uninstall -g create-react-app

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

sudo apt remove nodejs

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