Како поставити Реацт апликацију помоћу парцеле

Дуго времена је Вебпацк био једна од највећих препрека уласку некоме ко жели да научи Реацт. Постоји много конфигурација шаблона које могу збунити, посебно ако сте нови у Реацт-у.

Чак и током разговора који покушава показати колико је лако поставити Реацт, може бити веома тешко покушати научити сваки корак у процесу подешавања.

Недуго након што је Реацт први пут изашао из бета верзије, тим на Фејсбуку направио је апликацију цреате-респонсе-апп. То је био покушај да се окретање (веома учитане верзије а) Реацт апликације учини једноставним попут уноса једне команде:

npx create-react-app my-app

Леп! И искрено, ово? Начин стварања нове Реацт апликације је сјајан ако желите нешто са пуно звона и звиждука одмах од почетка, а ви сте ок ако вам апликација започне као прилично тешка / велика апликација.

Та тежина долази из многих зависности, учитавача, додатака и тако даље који се аутоматски инсталирају, јер node_modulesзаузимају пуно простора за сваку апликацију. Резиме слике Финдер у наставку је из једне од мојих апликација за креирање-реаговање. ?

Представљамо вам парцелу

Парцела је „запањујуће брз, нулти конфигурациони пакет веб апликација.“ То значи да обрађује пуно тешког повезивања за вас испод хаубе и омогућава вам да креирате релативно витко подешавање Реацт-а (или било ког другог веб-пројекта који захтева спајање).

Па, хајде да видимо шта је потребно за постављање голих костију „Хелло Ворлд“ Реацт апликације која приказује h1елемент.

Корак 1: Креирајте нову фасциклу за свој пројекат

Довољно лако. ?

Корак 2: Направите package.jsonдатотеку

У терминалу, cdу нову фасциклу и покрените:

npm init -y

Ово аутоматски креира package.jsonдатотеку.

Корак 3: Инсталирајте Парцел, Реацт и РеацтДОМ

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: Додајте скрипту „старт“ у package.json

У package.jsonдатотеку, у одељак „скрипте“ додајте следећу скрипту „старт“:

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

Корак 5: Креирајте index.htmlдатотеку и додајте неколико редова

У ВС Цоде-у можете да креирате нову датотеку која се зове index.htmlи помоћу уграђене пречице еммет створите стандардну ХТМЛ датотеку за узорак тако што ћете откуцати узвичник и притиснути тастер Таб на тастатури.

Пре него што кренемо даље, морамо да додамо две ствари:

  1. divЧувар места где ће бити убачена наш Реацт апликација
  2. А scriptза читање у ЈаваСцрипт датотеци уноса (коју ћемо следећи креирати)

У bodyна index.html, додајте:

Корак 6: Креирајте index.jsдатотеку

Направите нову датотеку под називом index.jsи унесите свој Реацт код голих костију:

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

Hello world!

, document.getElementById("root"))

Корак 7: Покрените га!

То је то! Сада са терминала покрените:

npm start

Парцела ће се побринути за остало, а ви ћете имати потпуно функционалну апликацију Реацт.

Закључак

Ако сте заинтересовани, одвојите мало времена да прегледате документацију Парцел-а да бисте боље разумели сву страност која долази са коришћењем Парцел-а, без потребе за било каквом конфигурацијом.

Парцел се испоручује са подршком за све врсте уобичајених додатака за веб развој, транспилере, синтаксе итд.

Иако није мали , ноде_модули из апликације Парцел заузимају 50% мање простора на рачунару:

Хвала, парцеле!