So richten Sie eine Reaktions-App mit Paket ein

Webpack war lange Zeit eine der größten Eintrittsbarrieren für jemanden, der React lernen wollte. Es gibt viele Boilerplate-Konfigurationen, die verwirrend sein können, insbesondere wenn Sie neu in React sind.

Selbst in einem Vortrag, der zeigen soll, wie einfach React einzurichten ist, kann es sehr schwierig sein, jeden einzelnen Schritt des Einrichtungsprozesses zu lernen.

Nicht allzu lange nachdem React die Beta zum ersten Mal beendet hatte, erstellte das Facebook-Team eine App zum Erstellen und Reagieren. Es war ein Versuch, das Hochfahren einer (sehr voll geladenen Version einer) React-App so einfach wie das Eingeben eines einzelnen Befehls zu machen:

npx create-react-app my-app

Nett! Und ehrlich gesagt? Verfahren zur Herstellung eines neuen Schaffung React App ist genial, wenn Sie etwas, das viel Schnickschnack rechts von der get-go hat und du bist okay mit Ihrer App Start als ziemlich schwer / große App.

Diese Schwere kommt von den vielen Abhängigkeiten, Loadern, Plugins usw., die automatisch installiert werden, da node_modulesdiese viel Platz für jede App beanspruchen. Das folgende Finder-Zusammenfassungsbild stammt aus einer meiner Apps zum Erstellen und Reagieren von Apps. ?

Paket vorstellen

Parcel ist ein "blitzschneller Webanwendungsbündler ohne Konfiguration". Dies bedeutet, dass viele der harten Bündelungsaufgaben für Sie unter der Haube erledigt werden und Sie ein relativ schlankes Setup von React (oder einem anderen Webprojekt, das gebündelt werden muss) erstellen können.

Lassen Sie uns sehen, was erforderlich ist, um die "Hello World" -Reaktions-App einzurichten, die ein h1Element anzeigt .

Schritt 1: Erstellen Sie einen neuen Ordner für Ihr Projekt

Leicht genug. ?

Schritt 2: Erstellen Sie Ihre package.jsonDatei

Im Terminal cdin den neuen Ordner und ausführen:

npm init -y

Dadurch wird die package.jsonDatei automatisch erstellt .

Schritt 3: Installieren Sie Parcel, React und 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 ...

Schritt 4: Fügen Sie ein "Start" -Skript hinzu package.json

Fügen Sie in der package.jsonDatei im Abschnitt "Skripte" das folgende "Start" -Skript hinzu:

"start": "parcel index.html --open"

Schritt 5: Erstellen Sie die index.htmlDatei und fügen Sie ein paar Zeilen hinzu

In VS Code können Sie eine neue Datei mit dem Namen erstellen index.htmlund mithilfe der integrierten Emmet-Verknüpfung eine Standard-HTML-Datei mit Boilerplate erstellen, indem Sie ein Ausrufezeichen eingeben und die Tabulatortaste auf Ihrer Tastatur drücken.

Bevor wir weitermachen, müssen wir zwei Dinge hinzufügen:

  1. Ein divPlatzhalter, in den unsere React-App eingefügt wird
  2. A scriptzum Einlesen der JavaScript-Eintragsdatei (die wir als nächstes erstellen werden)

Fügen Sie im bodyvon index.htmlhinzu:

Schritt 6: Erstellen Sie die index.jsDatei

Erstellen Sie eine neue Datei mit dem Namen index.jsund geben Sie Ihre Bare Bones ein. Reaktionscode:

// index.js import React from "react" import ReactDOM from "react-dom" ReactDOM.render(

Hello world!

, document.getElementById("root"))

Schritt 7: Starten Sie es!

Das ist es! Führen Sie nun vom Terminal aus Folgendes aus:

npm start

Das Paket erledigt den Rest und Sie haben eine voll funktionsfähige React-App.

Fazit

Wenn Sie interessiert sind, nehmen Sie sich etwas Zeit, um die Paketdokumentation zu lesen und besser zu verstehen, wie beeindruckend die Verwendung von Paket ist, ohne dass Sie eine Konfiguration benötigen.

Parcel bietet sofort Unterstützung für alle Arten von gängigen Webentwicklungserweiterungen, Transpilern, Syntaxen usw.

Obwohl es nicht winzig ist , belegen die node_modules einer Paket-App 50% weniger Speicherplatz auf Ihrem Computer:

Danke, Paket!