Στήσιμο ενός React Project με το Create React App

React είναι μία από τις πιο δημοφιλείς βιβλιοθήκες JavaScript για την ανάπτυξη front-end εφαρμογών. Είναι μια βιβλιοθήκη ανοιχτού κώδικα που αναπτύχθηκε αρχικά από το Facebook. Το React έγινε γρήγορα δημοφιλές για τη δημιουργία γρήγορων εφαρμογών με JSX – ένα προγραμματιστικό παράδειγμα που συνδυάζει τη JavaScript με μια σύνταξη παρόμοια με την HTML.

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

• Ένα σύστημα build
• Transpiler κώδικα (μετατρέπει τις σύγχρονες συντάξεις σε κώδικα αναγνώσιμο από τον περιηγητή)
• Η βασική δομή καταλόγου για το έργο

Ευτυχώς, αυτές οι μέρες έχουν περάσει ανεπιστρεπτί, χάρη στο Create React App. Είναι ένα υπέροχο εργαλείο που αυτοματοποιεί όλα αυτά τα βήματα. Το Create React App αναλαμβάνει τη μεταγλώττιση κώδικα (transpiling), το linting, τις δοκιμές και τα συστήματα build. Επιπλέον, συνοδεύεται από έναν διακομιστή που υποστηρίζει hot reloading, πράγμα που σημαίνει ανανέωση των ιστοσείδων καθώς γίνονται αλλαγές. Φυσικά, όλα αυτά γίνονται μέσα σε μια οργανωμένη δομή καταλόγου.

Με λίγα λόγια, δεν χρειάζεται να υποβληθείτε στη χειροκίνητη εργασία της διαμόρφωσης συστημάτων build όπως το Webpack, ή transpiler όπως το Babel. Με λιγότερα πράγματα να σας ανησυχούν, είστε ελεύθεροι να εστιάσετε πλήρως στην ανάπτυξη front-end. Το Create React App σάς επιτρέπει να ξεκινήσετε με το React με ελάχιστη προετοιμασία.

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

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

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

• • Έναν σωστά διαμορφωμένο Ubuntu διακομιστή. Μπορείτε να ακολουθήσετε τα βήματα για τη διαμόρφωση ενός διακομιστή Ubuntu στο CloudSigma.
  • Την τελευταία έκδοση του Node.js εγκατεστημένη. Εδώ είναι ένας οδηγός βήμα προς βήμα για την εγκατάσταση του Node.js στο Ubuntu.

Βήμα 1: Δημιουργία ενός αποκλειστικού καταλόγου έργου npm

Για τα πακέτα Node.js, το npm είναι ο προεπιλεγμένος διαχειριστής πακέτων. Θα χρησιμοποιήσουμε npm για να δημιουργήσουμε έναν αποκλειστικό κατάλογο έργου. Θα φιλοξενεί σημαντικά αρχεία όπως το package.json που αποθηκεύει όλα τα μεταδεδομένα σχετικά με το έργο και πρόσθετα εξαρτώμενα modules του Node.js. Το JSON είναι μια τυπική μορφή κοινής χρήσης δεδομένων που βασίζεται σε αντικείμενα JavaScript. Ανατρέξτε στο αυτόν τον οδηγό αν θέλετε να μάθετε περισσότερα για το JSON.

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

Στη συνέχεια, θα πούμε στο npm να ξεκινήσει ένα περιβάλλον ανάπτυξης μέσα στο αρχείο. Θα δημιουργήσει το package.json αρχείο που απαιτείται για το έργο. Αλλάξτε τον τρέχοντα κατάλογο:

Εκτελέστε την npm init εντολή:

Σημειώστε ότι εάν θέλετε αυτός ο κατάλογος να είναι μέρος ενός αποθετηρίου git, τότε συνιστάται να τον ορίσετε πρώτα. Το σενάριο προετοιμασίας θα τον εντοπίσει αυτόματα και θα διαμορφώσει τα πάντα ανάλογα. Μόλις τελειώσει, θα πρέπει να υπάρχει ένα package.json αρχείο στον κατάλογο. Ελέγξτε το με έναν επεξεργαστή κειμένου:

Βήμα 2: Δημιουργία ενός έργου React με το Create React App

Σε αυτό το βήμα, θα καλέσουμε το Create React App για να δημιουργήσουμε το δείγμα του έργου μας React. Αυτό το σενάριο θα αντιγράψει όλα τα απαραίτητα σε έναν νέο κατάλογο μαζί με όλες τις εξαρτήσεις. Ο npm διαχειριστής πακέτων συνοδεύεται επίσης από το εργαλείο npx. Χρησιμοποιείται για την εκτέλεση εκτελέσιμων πακέτων. Θα το χρησιμοποιήσουμε για να εκτελέσουμε το σενάριο Create React App χωρίς να κατεβάσουμε πραγματικά το έργο.

Η εκτέλεση θα τρέξει το create-react-app στον καθορισμένο κατάλογο. Θα εκτελέσει επίσης τις εντολές npm install για την εγκατάσταση των εξαρτήσεων. Για ευκολία στη χρήση, θα χρησιμοποιήσουμε το όνομα cloudsigma-react-react-tutorial. Εκτελέστε την ακόλουθη εντολή:

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

Βήμα 3: Εφαρμογή των React-Scripts

Now, we’ll have a brief overview of the various react-scripts that were installed during the installation.

• • We’ll run the test script to execute the test code.
  • The build script will create a minified version of our project (for the production environment).
  • Finally, the eject script offers complete control over customization.

First, check the content of the React project directory:

Here is a description of each file:

• • node_modules/: This directory contains all the external JavaScript libraries to be used by the app. It’s rarely necessary to tinker around here.
  • public/: It hosts some base HTML, JSON, and image files. It serves as the root of the project.
  • src/: This directory contains the React JavaScript codes for our project. This is where we’ll spend most of our time. We’ll explore this directory further in the next part of the guide.
  • .gitignore: It’s a file that describes what directories git will ignore, for example, the node_modules directory. Generally, it’s better to exclude directories that contain large files or host log files that aren’t necessary to be included in version control. In this case, it will also include some React-specific directories.
  • README.md: It’s a markdown file containing lots of useful info about Create React App. For example, it includes a summary of commands links for advanced configuration. For now, we don’t have business with it. However, as the project progresses, you’ll add more documentation about the project.

The files package.json and package-lock.json are used by npm. When running the initial npx command, it created the base project. When the additional dependencies were installed, it created package-lock.json. npm uses package-lock.json to ensure that packages are matching the exact versions. This way, if someone else installs your project, they also get identical dependencies. As it’s created and managed automatically, you rarely need to touch it.

The last file we need to talk about is package.json. It contains metadata about the project. For example, the metadata could entail a project title, version number, and dependencies. It also includes the scripts you can use to run the project. Check out the content of the package.json file:

It’s a JSON file with various objects. Have a look at the object scripts. It contains four different scripts:

• • start
  • build
  • test
  • eject

These scripts are listed according to their importance. The start script initiates the local development server. Next, we will elaborate on how you can use the rest of the scripts.

• • The Build Script

For running an npm script, the command structure is as follows:

To run the build script, use the following command:

It will start the process of compiling the codes into a usable bundle. Once finished, check out the output directory:

Notice that there’s a new directory build/ available. It contains a minified and optimized version of the other files. It’s recommended to put it in the .gitignore file as we can always generate it using the build script.

• • The Test Script

The test script is one of those scripts that don’t require the run parameter for npm to run it. However, it will still work fine with it. When run, this script will start a test runner called Jest. The tester searches for any project file with file extensions .spec.js ή test.js and runs those files.

The following npm command will run the test script:

There are a few things to note in the output. Remember that the test runner only looks for files with specific extensions? In this case, there’s only a single test suite (only one file with .test.js επέκταση). Περιέχει μόνο μια δοκιμή. Το Jest μπορεί να ανιχνεύσει αυτόματα δοκιμές στην ιεραρχία κώδικα, επομένως είστε ελεύθεροι να φωλιάσετε δοκιμές σε έναν κατάλογο.

Επιπλέον, το Jest δεν εκτελεί απλώς τη δοκιμή μία φορά και τερματίζει. Συνεχίζει να εκτελεί τη δοκιμή στο τερματικό. Εάν γίνουν αλλαγές στον πηγαίο κώδικα, θα εκτελέσει ξανά τις δοκιμές. Το Jest επιτρέπει επίσης τον περιορισμό των δοκιμών που θα εκτελεστούν. Για παράδειγμα, πατώντας 0, μπορείτε να πείτε στο Jest να δοκιμάσει μόνο εκείνα τα αρχεία που άλλαξαν. Καθώς οι σουίτες δοκιμών μεγαλώνουν, αυτή η επιλογή εξοικονομεί πολύ χρόνο. Για να βγείτε από το Jest test runner, πατήστε q.

• • Το Eject Script

Το eject script αντιγράφει όλες τις εξαρτήσεις και τα αρχεία ρυθμίσεων στο έργο, προσφέροντάς σας πλήρη έλεγχο του κώδικα. Κάνοντας αυτό, ωστόσο, αφαιρείτε το έργο από την ενσωματωμένη εργαλειοθήκη του Create React App. Μόλις εκτελεστεί, δεν υπάρχει τρόπος να το αναιρέσετε.

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

Ένα αξιοσημείωτο μειονέκτημα του Create React App είναι ότι επειδή διαχειρίζεται όλες τις ρυθμίσεις μόνο του, δεν προσφέρει πλήρη προσαρμογή του έργου. Για τα περισσότερα έργα, αυτό δεν αποτελεί πρόβλημα. Ωστόσο, εάν θέλετε να αποκτήσετε τον πλήρη έλεγχο του έργου, τότε θα πρέπει να κάνετε eject τον κώδικα. Μόλις γίνει eject, δεν θα μπορείτε να κάνετε ενημέρωση σε νέες εκδόσεις του Create React App. Πρέπει να διαχειρίζεστε χειροκίνητα όλες τις βελτιώσεις.

Βήμα 4: Εκκίνηση Διακομιστή

Τώρα, θα ξεκινήσουμε τον τοπικό διακομιστή και θα εκτελέσουμε το έργο σε ένα πρόγραμμα περιήγησης ιστού. Για να ξεκινήσουμε τον διακομιστή, έχουμε ένα άλλο σενάριο πρόχειρο. Η εκτέλεσή του δεν απαιτεί την εντολή npm run . Όταν εκτελείται, το σενάριο ξεκινά έναν τοπικό διακομιστή, εκτελεί τον κώδικα του έργου, εκκινεί έναν watcher και ακούει για αλλαγές κώδικα. Οι αλλαγές εμφανίζονται απευθείας στο πρόγραμμα περιήγησης. Η ακόλουθη εντολή θα ξεκινήσει τον διακομιστή:

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

Όπως δείχνει το αποτέλεσμα, το Create React App χρησιμοποιεί τη θύρα 3000 για την εξυπηρέτηση του έργου. Εάν η θύρα χρησιμοποιούνταν ήδη, τότε το Create React App θα χρησιμοποιήσει την επόμενη διαθέσιμη θύρα. Εάν έχετε ρυθμίσει ένα τείχος προστασίας, τότε πρέπει να επιτρέπει την κίνηση στη θύρα 3000 (ή στη θύρα που αναφέρει το Create React App). Μπορείτε να μάθετε περισσότερα σχετικά με τη διαχείριση του τείχους προστασίας UFW εδώ.

Για να βγείτε από τον διακομιστή, πατήστε Ctrl+C από το παράθυρο του τερματικού. Θα τερματίσει τη διαδικασία που εκτελείται (το στιγμιότυπο του διακομιστή).

Βήμα 5: Τροποποίηση Αρχικής Σελίδας

Στη συνέχεια, θα μάθουμε πώς να τροποποιούμε κώδικες που είναι αποθηκευμένοι στον κατάλογο public/. Περιέχει τη βασική σελίδα HTML και χρησιμεύει ως η ρίζα του έργου. Αν και μπορεί να μην χρειαστεί να το επεξεργαστείτε περαιτέρω στο μέλλον, χρησιμεύει ως η βάση του έργου.

Αρχικά, εκκινήστε τον διακομιστή με npm, στη συνέχεια μεταβείτε στον κατάλογο public/ :

Ο κατάλογος θα περιέχει αρχεία όπως favicon.ico, logo192.png, logo512.png, κ.λπ. Αυτά είναι εικονίδια που θα έβλεπε ένας χρήστης που επισκέπτεται την ιστοσελίδα στην καρτέλα, στο πρόγραμμα περιήγησης ή στο τηλέφωνό του. Το πρόγραμμα περιήγησης θα επιλέξει αυτόματα αυτό με το κατάλληλο μέγεθος. Τελικά, θα τα αντικαταστήσετε με εικονίδια κατάλληλα για το έργο σας. Προς το παρόν, θα τα αφήσουμε ως έχουν.

Το αρχείο manifest.json φιλοξενεί ένα δομημένο σύνολο μεταδεδομένων. Περιγράφει το έργο, παραθέτει διαθέσιμα εικονίδια και πολλά άλλα.

Το αρχείο robots.txt φιλοξενεί πληροφορίες για web crawlers. Οι ανιχνευτές ιστού (web crawlers) “σαρώνουν” τον Παγκόσμιο Ιστό, ευρετηριάζοντας σελίδες για μηχανές αναζήτησης. Δεν υπάρχει λόγος να τροποποιήσετε το αρχείο εκτός εάν έχετε συγκεκριμένο λόγο. Για παράδειγμα, μπορεί να θέλετε να κάνετε ορισμένες διευθύνσεις URL για συγκεκριμένο περιεχόμενο να μην είναι εύκολα προσβάσιμες. Προσθέστε την τοποθεσία στο robots.txtκαι δεν θα ευρετηριαστεί από τις μηχανές αναζήτησης.

Το αρχείο index.html είναι η ρίζα της εφαρμογής μας. Κάθε φορά που αποκτάτε πρόσβαση στην εφαρμογή, αυτό είναι το αρχείο που εξυπηρετείται. Αυτό είναι το αρχείο που βλέπετε στην οθόνη. Ας του ρίξουμε μια γρήγορη ματιά. Ανοίξτε το σε έναν επεξεργαστή κειμένου:

Είναι ένα αρκετά σύντομο αρχείο. Σημειώστε ότι δεν υπάρχει εικόνα ή λέξεις στο <body>. Το React δημιουργεί αυτά τα περιεχόμενα χρησιμοποιώντας τη δική του μηχανή και τα εισάγει χρησιμοποιώντας JavaScript. Ωστόσο, το React πρέπει να γνωρίζει πού να εισάγει τον κώδικα. Το αρχείο index.html εξυπηρετεί αυτόν τον σκοπό.

Ας αλλάξουμε το <title> σε My React App:

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

Όπως μπορείτε να δείτε, ο τίτλος της καρτέλας άλλαξε σε My React App. Εάν δεν άλλαξε αυτόματα, τότε ανανεώστε τη σελίδα πατώντας F5 ή Ctrl+R.

Ας επιστρέψουμε στον επεξεργαστή κειμένου. Όλα τα έργα React πρέπει να ξεκινούν από ένα στοιχείο ρίζας. Μπορεί να υπάρχουν περισσότερα από ένα σε μια σελίδα. Ωστόσο, τουλάχιστον ένα είναι υποχρεωτικό. Λέει στο React πού να τοποθετήσει όλους τους κώδικες HTML που δημιουργούνται. Στο δικό μας index.html, βρείτε τη θέση του στοιχείου <div id="root">. Είναι το <div> που θα χρησιμοποιήσει το React για μελλοντικές αλλαγές. Δοκιμάστε να αλλάξετε την τιμή του id από root σε base:

 

 

Μετά από αυτό, ανανεώστε τη σελίδα στο πρόγραμμα περιήγησης. Δεν θα εμφανίσει κανένα περιεχόμενο. Όπως δείχνουν τα Εργαλεία προγραμματιστή ιστού του Firefox, εμφανίζει ένα σφάλμα:

Επιστρέψτε στον επεξεργαστή κειμένου και αλλάξτε την τιμή του id ξανά σε root:

Βήμα 6: Ετικέτα επικεφαλίδας και αλλαγές στυλ

Μέχρι στιγμής, έχουμε ξεκινήσει τον τοπικό διακομιστή και κάναμε μικρές αλλαγές στο αρχείο HTML ρίζας. Τώρα, θα εργαστούμε με τα στοιχεία React που βρίσκονται στον κατάλογο src/ . Θα κάνουμε αλλαγές στον κώδικα CSS και JavaScript. Οι αλλαγές θα εφαρμοστούν αυτόματα χρησιμοποιώντας hot reloading.

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

Υπάρχουν πολλά αρχεία JavaScript και CSS εδώ. Θα τα εξετάσουμε ένα προς ένα.

• ServiceWorker.js

Είναι ένα σημαντικό αρχείο εάν θέλετε να δημιουργήσετε προοδευτικές εφαρμογές ιστού. Αυτός ο service worker προσφέρει διάφορες λειτουργίες όπως ειδοποιήσεις push, προσωρινή αποθήκευση εκτός σύνδεσης κ.λπ. Προς το παρόν, θα το αφήσουμε ως έχει.

• SetupTests.js and App.test.js

Όπως υποδηλώνει η ονομασία αυτών των αρχείων, χρησιμοποιούνται για τη δοκιμή αρχείων. Κάθε φορά που εκτελούσαμε το σενάριο test χρησιμοποιώντας το npm, εκτελούσε αυτά τα αρχεία. Το αρχείο setupTests.js περιέχει μερικές προσαρμοσμένες μεθόδους expect.

Ας ρίξουμε μια ματιά στο App.test.js. Ανοίξτε το σε έναν επεξεργαστή κειμένου:

Περιέχει μια βασική δοκιμή που αναζητά τη φράση learn react για να είναι παρούσα στο έγγραφο. Εάν έχετε ανοιχτή την καρτέλα του προγράμματος περιήγησης, μπορείτε να δείτε τη φράση στη σελίδα. Σε αντίθεση με άλλες δοκιμές μονάδας, οι δοκιμές του React είναι διαφορετικές. Επειδή τα στοιχεία μπορούν να περιλαμβάνουν οπτικές πληροφορίες όπως markup (και λογική για τη διαχείριση δεδομένων), οι παραδοσιακές δοκιμές μονάδας δεν λειτουργούν εύκολα. Από αυτή την άποψη, οι δοκιμές React περιγράφονται καλύτερα ως μια μορφή λειτουργικών δοκιμών ή δοκιμών ολοκλήρωσης.

• Αρχεία CSS

Υπάρχουν διάφορα αρχεία στυλ διαθέσιμα: App.css, index.css, και logo.svg. Μπορείτε να ακολουθήσετε διάφορες μεθόδους για τη μορφοποίηση στο React. Ο ευκολότερος τρόπος είναι να γράψετε απλό CSS, καθώς δεν απαιτείται πρόσθετη διαμόρφωση.

Σας επιτρέπεται να εισάγετε απευθείας CSS σε ένα component. Αυτό επιτρέπει τον διαχωρισμό των αρχείων CSS ώστε να εφαρμόζονται μόνο σε ένα μεμονωμένο component. Στην πραγματικότητα δεν διαχωρίζετε το CSS από τη JavaScript. Αντίθετα, ομαδοποιείτε όλα τα σχετικά στοιχεία (CSS, JavaScript, εικόνες και markup) μαζί.

Ανοίξτε το App.css με έναν επεξεργαστή κειμένου:

Είναι ένα τυπικό αρχείο CSS χωρίς ειδικούς προεπεξεργαστές CSS. Μπορείτε να τους προσθέσετε αργότερα αν θέλετε. Το Create React App προσπαθεί να είναι ουδέτερο, προσφέροντας παράλληλα μια σταθερή εμπειρία έτοιμη προς χρήση.

Ας κάνουμε μια αλλαγή και ας τη δούμε στην πράξη. Αλλάξτε την τιμή του background-color σε blue:

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

• • Index.js

Τώρα, ήρθε η ώρα να κάνετε αλλαγές στον κώδικα React JavaScript. Ανοίξτε το index.js χρησιμοποιώντας έναν επεξεργαστή κειμένου:

Στην κορυφή, εισάγει React, ReactDOM, index.css, App, και serviceWorker. Εισάγοντας το React, αντλούμε τον κώδικα που απαιτείται για τη μετατροπή του JSX σε JavaScript. ReactDOM είναι ο κώδικας που συνδέει τον κώδικα React με το βασικό στοιχείο ( index.html, για παράδειγμα). Δείτε την ακόλουθη γραμμή:

Καθοδηγεί το React να βρει ένα id με την ετικέτα root και να εισαγάγει τους κώδικες React εκεί. <App/> είναι το ριζικό στοιχείο και όλα διακλαδίζονται από εκεί.

Παρατηρήστε ότι εισαγάγαμε επίσης αρχεία CSS (όπως index.css) αλλά στην πραγματικότητα δεν κάναμε τίποτα με αυτό. Με την εισαγωγή, στην πραγματικότητα λέμε στο Webpack μέσω των σεναρίων του React να συμπεριλάβει τους κώδικες CSS στο τελικό μεταγλωττισμένο πακέτο. Διαφορετικά, τα στυλ CSS δεν θα εμφανιστούν.

• App.js

Στη συνέχεια, θα ρίξουμε μια ματιά στο App.js. Ανοίξτε το σε έναν επεξεργαστή κειμένου:

 

Ας δούμε πώς η αλλαγή του περιεχομένου του επηρεάζει το έργο μας. Αλλάξτε το περιεχόμενο της <p>ετικέτας:

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

Βουαλά! Κάνατε τις πρώτες σας μικροαλλαγές σε συστατικό του React!

Υπάρχει ένα ακόμα πράγμα που πρέπει να προσέξετε. Δείτε το στοιχείο <img>:

Παρατηρήστε ότι το logo περνιέται μέσα σε αγκύλες. Κάθε φορά που περνάτε ιδιότητες (που δεν είναι συμβολοσειρές ή αριθμοί), πρέπει να περνιούνται μέσα σε αγκύλες. Στη συνέχεια, το React θα τις αντιμετωπίσει ως αντικείμενα JavaScript αντί για συμβολοσειρές.

Σε αυτήν την περίπτωση, η εφαρμογή δεν εισάγει πραγματικά την εικόνα. Αντίθετα, είναι μια αναφορά στην εικόνα. Όταν το Webpack δημιουργεί το έργο, τοποθετεί την εικόνα στην κατάλληλη θέση. Μπορούμε να το επαληθεύσουμε στο πρόγραμμα περιήγησης. Ανοίξτε τα Web Developer Tools στο Firefox:

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

Step 7: Project Building

Σε αυτό το βήμα, θα μάθουμε πώς να μεταγλωττίζουμε το έργο σε ένα πακέτο έτοιμο για ανάπτυξη. Εκκινήστε το τερματικό και εκτελέστε το σενάριο build του έργου:

Ο μεταγλωττιστής θα δημιουργήσει τον αποκλειστικό κατάλογο build/όπου θα τοποθετήσει το αποτέλεσμα. Για να δείτε τι κάνει η διαδικασία μεταγλώττισης, ανοίξτε το index.html αρχείο από τον κατάλογο build/:

Όπως μπορείτε να δείτε, όλοι οι κώδικες έχουν μεταγλωττιστεί και ελαχιστοποιηθεί στην μικρότερη δυνατή χρησιμοποιήσιμη κατάσταση. Η αναγνωσιμότητα δεν αποτελεί πρόβλημα, καθώς δεν πρόκειται για το τμήμα του κώδικα που βλέπει ο χρήστης. Οι ελαχιστοποιημένοι κώδικες καταλαμβάνουν λιγότερο χώρο, διατηρώντας παράλληλα όλες τις λειτουργίες τους. Σε αντίθεση με γλώσσες όπου τα κενά διαστήματα είναι πολύ σημαντικά (για παράδειγμα, η Python), οι γλώσσες του ιστού (HTML, CSS και JavaScript) δεν απαιτούν σωστή απόσταση για να τις ερμηνεύσει το πρόγραμμα περιήγησης.

Τελικές Σκέψεις

Σε αυτόν τον οδηγό, δείξαμε με επιτυχία πώς να δημιουργήσετε μια εφαρμογή React. Δείξαμε επίσης ορισμένες βασικές ρυθμίσεις παραμέτρων χρησιμοποιώντας εργαλεία δημιουργίας JavaScript χωρίς περίπλοκες τεχνικές λεπτομέρειες. Αυτή είναι η βασική αξία που προσφέρει το Create React App. Δεν χρειάζεται να γνωρίζετε τα πάντα για να ξεκινήσετε με το React. Σας επιτρέπεται να μην μάθετε τα περίπλοκα βήματα δημιουργίας, εστιάζοντας αποκλειστικά στον κώδικα React.

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

Καλό προγραμματισμό!