Πώς να ρυθμίσετε μια εφαρμογή React με δέμα
Για μεγάλο χρονικό διάστημα το Webpack ήταν ένα από τα μεγαλύτερα εμπόδια στην είσοδο για κάποιον που θέλει να μάθει το React. Υπάρχει πολλή διαμόρφωση boilerplate που μπορεί να προκαλέσει σύγχυση, ειδικά αν είστε νέοι στο React.
Ακόμα και σε μια συζήτηση που προσπαθεί να δείξει πόσο εύκολο είναι να ρυθμιστεί το React, μπορεί να είναι πολύ δύσκολο να δοκιμάσετε και να μάθετε κάθε βήμα στη διαδικασία εγκατάστασης.
Όχι πολύ καιρό αφότου το React βγήκε για πρώτη φορά από το beta, η ομάδα στο Facebook έφτιαξε την εφαρμογή create-react-app. Ήταν μια προσπάθεια να κάνουμε το spinning μια (πολύ πλήρως φορτωμένη έκδοση του) React app τόσο απλή όσο η πληκτρολόγηση μιας μόνο εντολής:
npx create-react-app my-app
Ομορφη! Και ειλικρινά, αυτό; Η μέθοδος δημιουργίας μιας νέας εφαρμογής React είναι καταπληκτική αν θέλετε κάτι που έχει πολλά κουδούνια και σφυρίγματα από την αρχή και είστε εντάξει με το να ξεκινήσετε την εφαρμογή σας ως μια αρκετά βαρύ / μεγάλη εφαρμογή.
Αυτή η βαρύτητα προέρχεται από τις πολλές εξαρτήσεις, τους φορτωτές, τα πρόσθετα και ούτω καθεξής που εγκαθίστανται αυτόματα καθώς node_modules
καταλαμβάνουν πολύ χώρο για κάθε εφαρμογή. Η παρακάτω συνοπτική εικόνα του Finder προέρχεται από μία από τις εφαρμογές μου για δημιουργία αντιδράσεων. ;


Παρουσιάζοντας το δέμα
Το δέμα είναι ένα "γρήγορο, μηδενικό πρόγραμμα δέσμης εφαρμογών ιστού". Αυτό σημαίνει ότι διαχειρίζεται πολλά από τα σκληρά πράγματα ομαδοποίησης για εσάς κάτω από την κουκούλα και σας επιτρέπει να δημιουργήσετε μια σχετικά λιτή εγκατάσταση του React (ή οποιουδήποτε άλλου έργου Ιστού που απαιτεί ομαδοποίηση).
Ας δούμε λοιπόν τι χρειάζεται για τη ρύθμιση της εφαρμογής React "Hello World" με γυμνά οστά που εμφανίζει ένα h1
στοιχείο
Βήμα 1: Δημιουργήστε έναν νέο φάκελο για το έργο σας
Αρκετά εύκολο. ;
Βήμα 2: Δημιουργήστε το package.json
αρχείο σας
Στο τερματικό, cd
στο νέο φάκελο και εκτελέστε:
npm init -y
Αυτό δημιουργεί αυτόματα το package.json
αρχείο.
Βήμα 3: Εγκατάσταση δέματος, React και ReactDOM
npm install --save-dev parcel-bundler # Shorthand version: npm i -D parcel-bundler npm install react react-dom # Shorthand version: npm i react react-dom # Note that npm will automatically save dependencies to package.json now, so there's no longer a need to do npm install --save ...
Βήμα 4: Προσθέστε ένα σενάριο "έναρξης" στο package.json
Στο package.json
αρχείο, στην ενότητα "scripts", προσθέστε το ακόλουθο script "start":
"start": "parcel index.html --open"
Βήμα 5: Δημιουργήστε το index.html
αρχείο και προσθέστε μερικές γραμμές
Στον κώδικα VS, μπορείτε να δημιουργήσετε ένα νέο αρχείο που ονομάζεται index.html
και να χρησιμοποιήσετε την ενσωματωμένη συντόμευση emmet για να δημιουργήσετε ένα τυπικό αρχείο HTML boilerplate πληκτρολογώντας ένα θαυμαστικό και πατώντας το πλήκτρο Tab στο πληκτρολόγιό σας.


Πριν προχωρήσουμε, πρέπει να προσθέσουμε 2 πράγματα:
- Ένα
div
σύμβολο κράτησης θέσης όπου θα εισαχθεί η εφαρμογή React - A
script
για ανάγνωση στο αρχείο καταχώρησης JavaScript (το οποίο θα δημιουργήσουμε στη συνέχεια)
Στο body
του index.html
, Προσθήκη:
Βήμα 6: Δημιουργήστε το index.js
αρχείο
Δημιουργήστε ένα νέο αρχείο που ονομάζεται index.js
και εισαγάγετε τα γυμνά οστά σας React code:
// index.js import React from "react" import ReactDOM from "react-dom" ReactDOM.render(Hello world!
, document.getElementById("root"))
Βήμα 7: Ξεκινήστε το!
Αυτό είναι! Τώρα από το τερματικό, εκτελέστε:
npm start
Το Parcel θα χειριστεί τα υπόλοιπα και θα έχετε μια πλήρως λειτουργική εφαρμογή React.
συμπέρασμα
Αν σας ενδιαφέρει, αφιερώστε λίγο χρόνο για να διαβάσετε το τεκμηρίωση του Parcel για να κατανοήσετε καλύτερα όλη τη φοβερή αίσθηση που παρέχεται με τη χρήση του Parcel, χωρίς να απαιτείται καμία διαμόρφωση.
Εκτός από το κουτί, το Parcel έρχεται με υποστήριξη για όλα τα είδη των κοινών επεκτάσεων ανάπτυξης ιστού, transpilers, σύνταξης και ούτω καθεξής.
Αν και δεν είναι μικροσκοπικό , τα node_modules από μια εφαρμογή Parcel καταλαμβάνουν 50% λιγότερο χώρο στον υπολογιστή σας:

Ευχαριστώ, δέμα!