Πώς να ρυθμίσετε μια εφαρμογή 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 πράγματα:

  1. Ένα divσύμβολο κράτησης θέσης όπου θα εισαχθεί η εφαρμογή React
  2. 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% λιγότερο χώρο στον υπολογιστή σας:

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