React-sovelluksen määrittäminen paketin kanssa

Jo pitkään Webpack oli yksi suurimmista markkinoille tulon esteistä henkilöille, jotka haluavat oppia React. Kattilalevykokoonpano voi olla hämmentävää, varsinkin jos olet uusi React.

Jopa keskustelussa, joka yrittää osoittaa kuinka helppoa React on asentaa, voi olla erittäin vaikeaa yrittää oppia jokaista askelta asennusprosessissa.

Ei liian kauan sen jälkeen, kun React oli ensin poissa beta-versiosta, Facebookin tiimi teki create-reagoi-sovelluksen. Se oli yritys tehdä (a) React -sovelluksen (hyvin ladattu versio) pyörittäminen yhtä yksinkertaista kuin kirjoittamalla yksi komento:

npx create-react-app my-app

Kiva! Ja rehellisesti, tämä? menetelmä uuden React-sovelluksen luomiseksi on mahtava, jos haluat jotain, jolla on paljon kelloja ja pillejä heti alusta alkaen, ja olet kunnossa, kun sovelluksesi käynnistetään melko raskaana / suurena sovelluksena.

Tämä raskaus johtuu automaattisesti asennetuista monista riippuvuuksista, lataajista, laajennuksista ja niin edelleen, koska ne node_modulesvievät paljon tilaa jokaiselle sovellukselle. Alla oleva Finderin yhteenvetokuva on yhdestä luomis-reagoi -sovelluksestani. ?

Esittelyssä paketti

Paketti on "Blazing fast, zero configuration web application bundler." Tämä tarkoittaa, että se käsittelee paljon kovaa niputtamista tavaraa sinulle hupun alla ja antaa sinun luoda suhteellisen laiha React-kokoonpano (tai mikä tahansa muu niputtamista edellyttävä verkkoprojekti).

Katsotaan siis, mitä h1elementtien näyttävän "Hello World" React -sovelluksen asettaminen paljaille luille edellyttää .

Vaihe 1: Luo uusi kansio projektillesi

Tarpeeksi helppo. ?

Vaihe 2: Luo package.jsontiedosto

Päätteessä cduuteen kansioon ja suorita:

npm init -y

Tämä luo package.jsontiedoston automaattisesti .

Vaihe 3: Asenna Parcel, React ja 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 ...

Vaihe 4: Lisää "aloitus" komentosarja package.json

Lisää package.jsontiedoston "komentosarjat" -osaan seuraava "aloitus" -skripti:

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

Vaihe 5: Luo index.htmltiedosto ja lisää pari riviä

VS-koodissa voit luoda uuden nimeltään tiedoston index.htmlja luoda sisäänrakennetun emmet-pikakuvakkeen tavallisen kattilahakemistotiedoston luomiseen kirjoittamalla huutomerkki ja lyömällä näppäimistön sarkainnäppäintä.

Ennen kuin siirrymme eteenpäin, meidän on lisättävä 2 asiaa:

  1. divPaikkamerkki missä meidän Reagoi sovellus lisätään
  2. A scriptlukea JavaScript-merkintätiedostossa (jonka luomme seuraavaksi)

Kun bodyon index.html, add:

Vaihe 6: Luo index.jstiedosto

Luo uusi tiedosto nimeltä index.jsja kirjoita paljaat luut React-koodi:

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

Hello world!

, document.getElementById("root"))

Vaihe 7: Käynnistä se!

Se siitä! Suorita nyt terminaalista:

npm start

Paketti hoitaa loput, ja sinulla on täysin toimiva React-sovellus.

Johtopäätös

Jos olet kiinnostunut, vie aikaa pakettidokumentaation tutustumiseen, jotta ymmärrät paremmin kaiken paketin käytöstä saatavan mahtavuuden tarvitsematta mitään kokoonpanoa lopussa.

Paketista tulee alusta alkaen tuki kaikenlaisille tavallisille verkkokehityslaajennuksille, kääntäjille, syntaksille ja niin edelleen.

Vaikka se ei ole pieni , pakettisovelluksen solmumoduulit vievät 50% vähemmän tilaa tietokoneellasi:

Kiitos, paketti!