A React alkalmazás beállítása a csomaggal

Hosszú ideig a Webpack volt az egyik legnagyobb akadály a belépés előtt annak, aki meg akarja tanulni a React-et. Sok kazán konfigurációja zavaró lehet, különösen, ha új a React.

Még egy beszélgetés során is, amely megpróbálja megmutatni, hogy a React milyen egyszerűen telepíthető, nagyon nehéz lehet megpróbálni és megtanulni a telepítési folyamat minden egyes lépését.

Nem sokkal azután, hogy a React először kijött a bétából, a Facebook csapata létrehozott-reagál-alkalmazást készített. Kísérlet volt egy (az a) nagyon jól betöltött verziójának a React alkalmazását olyan egyszerűvé tenni, mint egyetlen parancs beírása:

npx create-react-app my-app

Szép! És őszintén szólva? Az új React alkalmazás létrehozásának módja fantasztikus, ha olyasmit szeretne, amelynek rengeteg harangja és sípja van már a kezdéskor, és jól érzi magát azzal, hogy az alkalmazása meglehetősen nehéz / nagy alkalmazásként indul.

Ez a nehézség az automatikusan telepített sok függőségből, betöltőből, bővítményből stb. Származik, mivel node_modulesezek sok helyet foglalnak el az egyes alkalmazásokhoz. Az alábbi Finder összefoglaló kép az egyik create-reago-app alkalmazásomból származik. ?

A Parcel bemutatása

A Parcel egy "Lángoló, gyors konfiguráció nélküli webalkalmazás-csomag." Ez azt jelenti, hogy sok nehéz csomagot kezel az Ön számára a motorháztető alatt, és lehetővé teszi, hogy viszonylag karcsú beállítást hozzon létre a React-ről (vagy bármely más, csomagot igénylő webprojektről).

Tehát nézzük meg, mi kell a csupasz csontok "Hello World" React alkalmazásának beállításához, amely megjelenít egy h1elemet.

1. lépés: Hozzon létre egy új mappát a projektjéhez

Elég könnyű. ?

2. lépés: Hozza létre a package.jsonfájlt

A terminálban cdaz új mappába, és futtassa:

npm init -y

Ez automatikusan létrehozza a package.jsonfájlt.

3. lépés: Telepítse a Parcel, a React és a ReactDOM programokat

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. lépés: Adjon hozzá egy "start" szkriptet package.json

A package.jsonfájl "szkriptek" szakaszában adja hozzá a következő "indító" szkriptet:

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

5. lépés: Hozza létre a index.htmlfájlt, és adjon hozzá pár sort

A VS Code-ban létrehozhat egy új nevű fájlt, index.htmlés a beépített emmet parancsikon segítségével létrehozhat egy standard kazán HTML-fájlt felkiáltójel beírásával és a Tab billentyű lenyomásával.

Mielőtt továbblépnénk, hozzá kell adnunk 2 dolgot:

  1. A divhelykitöltő ahol reagál app kerül beillesztésre
  2. A scriptJavaScript bejegyzés fájljában olvasható (amelyet legközelebb létrehozunk)

Az bodyA index.html, add:

6. lépés: Hozza létre a index.jsfájlt

Hozzon létre egy új fájlt, index.jsés hívja be a csupasz csontokat. Reagáljon:

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

Hello world!

, document.getElementById("root"))

7. lépés: Indítsa el!

Ez az! Most a terminálról futtassa:

npm start

A Parcel kezeli a többit, és rendelkezésére áll egy teljesen működő React alkalmazás.

Következtetés

Ha érdekel, szánjon egy kis időt a csomag dokumentációjának áttanulmányozására, hogy jobban megértse a Parcel használatával járó félelmességet, anélkül, hogy bármilyen konfigurációt igényelne.

A dobozból a Parcel mindenféle általános webfejlesztési bővítményt, transzpilereket, szintaxisokat és így tovább támogat.

Bár nem apró , a Parcel alkalmazás csomópont_moduljai 50% -kal kevesebb helyet foglalnak el a számítógépén:

Köszönöm, csomag!