Как да настроите React App с парцел

Дълго време Webpack беше една от най-големите бариери за влизане за някой, който иска да научи React. Има много типови конфигурации, които могат да объркат, особено ако сте нов в React.

Дори в беседа, опитваща се да покаже колко лесно е да се настрои React, може да бъде много трудно да се опитате да научите всяка стъпка в процеса на настройка.

Не след дълго, след като React за пръв път излезе от бета версия, екипът на Facebook направи приложението create-response-app. Това беше опит да се направи завъртането на (много натоварена версия на) приложението React толкова просто, колкото въвеждането на една команда:

npx create-react-app my-app

Хубаво! И честно казано, това? методът за създаване на ново приложение React е страхотен, ако искате нещо, което има много камбани и свирки още от самото начало, и вие сте добре, ако приложението ви започне като доста тежко / голямо приложение.

Тази тежест идва от многото зависимости, зареждащи устройства, плъгини и т.н., автоматично инсталирани, тъй като node_modulesзаемат много място за всяко приложение. Обобщеното изображение на Finder по-долу е от едно от моите приложения за създаване-реагиране. ?

Представяме ви Parcel

Parcel е „Огромно бърз, нулев конфигурационен пакет за уеб приложения.“ Това означава, че се справя с много трудни пакети за вас под капака и ви позволява да създадете относително постна настройка на React (или друг уеб проект, който изисква пакетиране).

И така, нека да видим какво е необходимо, за да настроим React приложението "Hello World", което показва h1елемент.

Стъпка 1: Създайте нова папка за вашия проект

Достатъчно лесно. ?

Стъпка 2: Създайте своя package.jsonфайл

В терминала, cdв новата папка и изпълнете:

npm init -y

Това автоматично създава package.jsonфайла.

Стъпка 3: Инсталирайте Parcel, React и 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 ...

Стъпка 4: Добавете скрипт "старт" към package.json

Във package.jsonфайла, в раздела "скриптове", добавете следния скрипт "старт":

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

Стъпка 5: Създайте index.htmlфайла и добавете няколко реда

Във VS Code можете да създадете нов файл, наречен index.htmlи да използвате вградения пряк път emmet, за да създадете стандартен HTML шаблон, като въведете удивителен знак и натиснете клавиша Tab на клавиатурата.

Преди да продължим, трябва да добавим 2 неща:

  1. А divзаместител, в който ще бъде включен в нашия реагират приложение
  2. A scriptза четене във входния файл на JavaScript (който ще създадем по-нататък)

В bodyна index.html, да се добави:

Стъпка 6: Създайте index.jsфайла

Създайте нов файл с име index.jsи въведете голите си кости React код:

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

Hello world!

, document.getElementById("root"))

Стъпка 7: Стартирайте го!

Това е! Сега от терминала стартирайте:

npm start

Parcel ще се справи с останалото и ще имате напълно функционално приложение React.

Заключение

Ако се интересувате, отделете малко време, за да разгледате документацията на Parcel, за да разберете по-добре страхотността, която идва с използването на Parcel, без да изисквате каквато и да е конфигурация.

Извън кутията Parcel се предлага с поддръжка за всички видове общи разширения за уеб разработка, транпилатори, синтаксиси и т.н.

Въпреки че не е малък , node_modules от приложението Parcel заемат 50% по-малко място на вашия компютър:

Благодаря, парцел!