Sådan oprettes en React-app med pakke

I lang tid var Webpack en af ​​de største adgangsbarrierer for nogen, der ønsker at lære React. Der er en masse kedelpladekonfiguration, der kan være forvirrende, især hvis du er ny til React.

Selv i en samtale, der forsøger at vise, hvor let React er at opsætte, kan det være meget vanskeligt at prøve at lære hvert eneste trin i installationsprocessen.

Ikke så længe efter, at React først var ude af beta, lavede teamet på Facebook create-react-app. Det var et forsøg på at gøre spinning op til en (meget fuldt indlæst version af en) React-app så simpel som at skrive en enkelt kommando:

npx create-react-app my-app

Pæn! Og ærligt, dette? metoden til at oprette en ny React-app er fantastisk, hvis du vil have noget, der har masser af klokker og fløjter lige fra starten , og du er okay med at få din app til at starte som en ret tung / stor app.

Denne tyngde kommer fra de mange afhængigheder, indlæsere, plugins og så videre automatisk installeret, da node_modulesdet tager meget plads til hver app. Finder-oversigtsbilledet nedenfor er fra en af ​​mine apps til at oprette-reager-app. ?

Introduktion til pakke

Parcel er en "flammende hurtig, nulkonfigurations-webapplikationsbundler." Dette betyder, at det håndterer mange af de hårde bundtings ting til dig under emhætten og giver dig mulighed for at oprette en relativt mager opsætning af React (eller ethvert andet webprojekt, der kræver bundling).

Så lad os se, hvad der kræves for at oprette de bare knogler "Hello World" React-app, der viser et h1element.

Trin 1: Opret en ny mappe til dit projekt

Nemt nok. ?

Trin 2: Opret din package.jsonfil

I terminalen cdind i den nye mappe og kør:

npm init -y

Dette opretter automatisk package.jsonfilen.

Trin 3: Installer Parcel, React 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 ...

Trin 4: Føj et "start" script til package.json

I package.jsonfilen i afsnittet "scripts" skal du tilføje følgende "start" -script:

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

Trin 5: Opret index.htmlfilen, og tilføj et par linjer

I VS-kode kan du oprette en ny fil, der kaldes, index.htmlog bruge den indbyggede emmet-genvej til at oprette en standard kedelplade-HTML-fil ved at skrive et udråbstegn og trykke på Tab-tasten på dit tastatur.

Før vi går videre, skal vi tilføje 2 ting:

  1. En divpladsholder, hvor vores React-app indsættes
  2. A scriptat læse i JavaScript-indgangsfilen (som vi opretter derefter)

I bodyaf index.html, add:

Trin 6: Opret index.jsfilen

Opret en ny fil, der hedder, index.jsog indtast dine bare knogler. Reager kode:

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

Hello world!

, document.getElementById("root"))

Trin 7: Start det!

Det er det! Kør nu fra terminalen:

npm start

Pakke håndterer resten, og du har en fuldt funktionel React-app.

Konklusion

Hvis du er interesseret, skal du tage dig tid til at gennemgå pakkedokumentationen for bedre at forstå al ​​den utrolighed, der følger med at bruge Parcel uden at kræve nogen konfiguration i din ende.

Uden for boksen kommer Parcel med support til alle slags almindelige webudviklingsudvidelser, transpilere, syntakser og så videre.

Selvom det ikke er lille , tager node_modules fra en Parcel-app 50% mindre plads på din computer:

Tak, pakke!