Kako postaviti React aplikaciju pomoću parcele

Webpack je dugo vremena bio jedna od najvećih prepreka ulasku nekome tko je želio naučiti React. Postoji mnogo konfiguracija pločica koje mogu zbuniti, pogotovo ako ste novi u Reactu.

Čak i u govoru koji pokušava pokazati koliko je React lako postaviti, može biti vrlo teško pokušati naučiti svaki korak u procesu postavljanja.

Nedugo nakon što je React prvi put izašao iz beta verzije, tim na Facebooku stvorio je aplikaciju create-response-app. To je bio pokušaj da se okretanje (vrlo potpuno učitane verzije a) React aplikacije učini jednostavnim poput upisivanja jedne naredbe:

npx create-react-app my-app

Lijepo! I iskreno, ovo? Način stvaranja nove React aplikacije je strašan ako želite nešto što ima puno zvona i zvižduka odmah od početka, a vi ste u redu s time da vaša aplikacija započne kao prilično teška / velika aplikacija.

Ta težina dolazi iz mnogih ovisnosti, učitavača, dodataka i tako dalje koji se automatski instaliraju, jer node_moduleszauzimaju puno prostora za svaku aplikaciju. Dolje sažeta slika Finder je iz jedne od mojih aplikacija za stvaranje-reagiranje. ?

Predstavljamo Parcelu

Parcela je "nevjerojatan brzi paket s nultom konfiguracijom web aplikacija." To znači da obrađuje puno tvrdih stvari za vas ispod poklopca i omogućuje vam stvaranje relativno tankog postava React-a (ili bilo kojeg drugog web projekta koji zahtijeva spajanje).

Pa, pogledajmo što je potrebno za postavljanje golih kostiju "Hello World" React aplikacije koja prikazuje h1element.

Korak 1: Stvorite novu mapu za svoj projekt

Dovoljno lako. ?

Korak 2: Stvorite package.jsondatoteku

U terminalu, cdu novu mapu i pokrenite:

npm init -y

Ovo automatski stvara package.jsondatoteku.

Korak 3: Instalirajte Parcel, React i 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 ...

Korak 4: dodajte "start" skriptu package.json

U package.jsondatoteku, u odjeljak "skripte" dodajte sljedeću skriptu "start":

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

Korak 5: Stvorite index.htmldatoteku i dodajte nekoliko redaka

U VS Codeu možete stvoriti novu datoteku koja se zove index.htmli pomoću ugrađenog prečaca emmet stvoriti standardnu ​​HTML datoteku uzorka tako što ćete upisati uskličnik i pritisnuti tipku Tab na tipkovnici.

Prije nego što krenemo dalje, moramo dodati dvije stvari:

  1. divRezervirano mjesto gdje je naš reagirati aplikacija će biti umetnuta
  2. A scriptza čitanje u JavaScript ulaznoj datoteci (koju ćemo stvoriti sljedeće)

U bodyna index.html, dodati:

Korak 6: Stvorite index.jsdatoteku

Stvorite novu datoteku pod nazivom index.jsi unesite svoj React kod golih kostiju:

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

Hello world!

, document.getElementById("root"))

Korak 7: Pokrenite ga!

To je to! Sada s terminala pokrenite:

npm start

Parcela će se pobrinuti za ostalo, a vi ćete imati potpuno funkcionalnu React aplikaciju.

Zaključak

Ako ste zainteresirani, odvojite malo vremena da pregledate dokumentaciju o paketima kako biste bolje razumjeli svu stranost koja dolazi s korištenjem Parcela, bez potrebe za bilo kakvom konfiguracijom.

Parcel dolazi s podrškom za sve vrste uobičajenih proširenja za web razvoj, transpilere, sintakse i tako dalje.

Iako nije malen , node_moduli iz aplikacije Parcel zauzimaju 50% manje prostora na vašem računalu:

Hvala, parcele!