I lang tid var Webpack en av de største inngangsbarrierer for noen som ønsker å lære React. Det er mye kokeplatekonfigurasjon som kan være forvirrende, spesielt hvis du ikke er ny i React.

Selv i en samtale som prøver å vise hvor enkelt React er å sette opp, kan det være veldig vanskelig å prøve å lære hvert eneste trinn i installasjonsprosessen.

Ikke så lenge etter at React først var ute av beta, laget teamet på Facebook create-react-app. Det var et forsøk på å gjøre det å spinne opp en (veldig fullversjon av en) React-app så enkelt som å skrive en enkelt kommando:

npx create-react-app my-app

Hyggelig! Og ærlig talt, dette? metoden for å lage en ny React-app er kjempebra hvis du vil ha noe som har mange bjeller og fløyter rett fra farten, og du er ok med at appen din starter som en ganske tung / stor app.

Den tyngden kommer fra de mange avhengighetene, lastere, plugins og så videre automatisk installert, da node_modulesdet tar mye plass for hver app. Finder-sammendragsbildet nedenfor er fra en av appene mine som lager app-appen. ?

Vi presenterer pakken

Parcel er en "flammende rask applikasjonspakke med null konfigurasjon." Dette betyr at den håndterer mange harde bunter for deg under panseret og lar deg lage et relativt magert oppsett av React (eller ethvert annet webprosjekt som krever bunting).

Så, la oss se hva som trengs for å sette opp bare bein "Hello World" React-appen som viser et h1element.

Trinn 1: Opprett en ny mappe for prosjektet ditt

Enkelt nok. ?

Trinn 2: Opprett package.jsonfilen

I terminalen, cdinn i den nye mappen og kjør:

npm init -y

Dette oppretter automatisk package.jsonfilen.

Trinn 3: Installer pakke, reager og 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 ...

Trinn 4: Legg til et "start" -skript til package.json

I package.jsonfilen, under "skript", legger du til følgende "start" -skript:

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

Trinn 5: Opprett index.htmlfilen og legg til et par linjer

I VS-kode kan du opprette en ny fil som heter index.htmlog bruke den innebygde snarveien til emmet for å lage en standard HTML-fil med kjele ved å skrive et utropstegn og trykke Tab-tasten på tastaturet.

Før vi går videre, må vi legge til to ting:

1. En divplassholder der React-appen vår blir satt inn
2. A scriptå lese i JavaScript-oppføringsfilen (som vi oppretter neste gang)

I bodyover index.html, add:

Trinn 6: Opprett index.jsfilen

Opprett en ny fil som heter, index.jsog skriv inn bare bein. Reager kode:

// index.js import React from "react" import ReactDOM from "react-dom" ReactDOM.render(
Hello world!
, document.getElementById("root")) 

Trinn 7: Start det!

Det er det! Kjør nå fra terminalen:

npm start

Pakke vil håndtere resten, og du vil ha en fullt funksjonell React-app.

Konklusjon

Hvis du er interessert, kan du ta deg tid til å lese gjennom pakkedokumentasjonen for å bedre forstå all det fantastiske som følger med å bruke Parcel, uten å kreve noen konfigurasjon på slutten.

Ut av esken kommer Parcel med støtte for alle slags vanlige nettutviklingsutvidelser, transpilere, syntakser og så videre.

Selv om den ikke er liten , tar node_modules fra en pakke-app 50% mindre plass på datamaskinen din:

Takk, pakke!