N причини да се използва приложението React React

Create React App е чудесен инструмент за бързо започване на работа с React приложения. Не губите време за настройване на Webpack, Babel и други познати инструменти. Те са предварително конфигурирани и скрити, така че разработчиците да могат да се съсредоточат върху кода и бизнес логиката на приложението.

Преди пускането на Create React App, трябваше да копирам конфигурацията на Webpack и други * rc файлове от предишни приложения всеки път, когато стартирах ново приложение, или да конфигурирам всичко ръчно. Не отне много време, а беше скучно. Понякога трябваше да се изнервя, когато съм направил нещо нередно и то започва: „Защо работи в това приложение, но не и тук?“ Особено когато имате няколко приложения с повече или по-малко еднакви конфигурации. И още повече, че с пускането на Webpack2 ще е необходимо да конфигурирате всичко отново и да загубите време. (Предупреждение за спойлер: С помощта на Create React App просто трябва да актуализирате версията на response-scripts в package.json).

Create React App предоставя CLI интерфейс за създаване на приложения с основна структура, инсталира всички необходими зависимости и добавя скриптове към package.json за стартиране, тестване и изграждане на приложението.

Нулева конфигурация! Разработчиците не могат да персонализират Webpack или Babel, докато не извадят.

Ако сте опитен потребител и не сте доволни от конфигурацията по подразбиране, можете да извадите. В този случай Create React App се използва като генератор на шаблонни кодове.

Командата npm run eject копира всички конфигурации и преходни зависимости (Webpack, Babel, ESLint и др.) Във вашия проект, за да можете да ги контролирате. Команди като npm start и npm run build няма да спрат да работят, но ще сочат към копираните скриптове, за да могат да бъдат модифицирани. След това сте сами.

Защо искам да не изхвърлям

Първо, защото тази операция не може да бъде отменена. Но не е само това. Ето още няколко причини.

Искам да получавам актуализации на Create React App

Представете си, че екипът на Create React App решава да премине към Webpack 2 (и те вече са го направили), за да поддържа разклащане на дървета и други страхотни функции. В този случай ще ми е достатъчно да актуализирам версията на реакционните скриптове, вместо да актуализирам конфигурации във всички приложения.

Или да предположим, че екипът на Create React App пуска Plugin System # 670. С удоволствие бих използвал такава система и дори да създам свои собствени приставки. Но ако изваждането е направено, нищо няма да излезе.

Мразя да имам много зависимости в package.json

Може би това е малко нещо, но не искам да виждам в package.json куп зависимости babel *, eslint * и webpack *, които не използвам директно в кода.

Допълнителни конфигурации и допълнителен код

Винаги поддържам приложенията си чисти. След изваждането се създават скриптовете и директориите за конфигуриране. И с тях - около десет нови файла с по 50-200 реда код. Освен това в повечето случаи изваждането се прави, за да се променят само около пет реда код (добавете един нов Webpack Loader).

След като извадя и редактирам конфигурациите, ще трябва да ги копирам в други приложения, защото най-често конфигурациите на приложенията (Babel предварителни настройки, Webpack товарачи и приставки) са еднакви.

Защо ми харесва Create React App

Това е инструмент от разработчиците на React

Разработчиците на Create React App са разработчиците на React. Имам им доверие и съм сигурен, че те знаят как да разработват правилно приложенията на React, като прилагат всички функции с правилния технологичен пакет в рамките на проекта Create React App.

В структурата на приложението няма конфигурация и ненужни файлове

Тъй като обичам реда в моите приложения, определено ми харесва, че webpack.config липсва, няма пакети от * rc файлове и зависимости в package.json.

Целият стек се актуализира с един ред

Фиксиран и стабилен стек за разработка

В функции за създаване на React App присъстват само функции от етап 3 (кандидати за издание). Понякога е интересно да се поиграете с нови функции от раздела за чернови, като do-expressions или null-propagation. Можете дори да разгледате предложението за ортогонални класове, но използването му в производството съвсем не е най-добрата идея.

Но ако все пак използвате функциите за чернови и предложения, резултатът може да бъде описан по следния начин:

Функционалността на този инструмент се разширява бързо

Сигурен съм, че броят на функциите на инструмента ще нараства бързо. Общността вече е достатъчно голяма и идват много интересни идеи и предложения. Ето някои от тях:

Някои нишки са затворени или вече са пуснати. Въпросът е, че има много идеи. Има дори инструменти на трети страни за Create React App, като CRA генериране: Scaffold a React компонент или CRAFT.

Моят опит с приложението Create React

Благодарение на Create React App, нашият екип се отказа от CSS модули, React Toolbox и няколко други библиотеки, които се нуждаеха от допълнителна конфигурация на Webpack.

Между другото, response-toolbox-themr осигурява лесна интеграция с React Toolbox със Create React App ... Но описанието на темата на приложението в package.json не е най-добрата идея за мен.

И все още не искам да изхвърлям!

Официалната документация в раздела Добавяне на CSS препроцесор (Sass, Less и др.) Описва подробно как да настроите работата със sass или по-малко.

Единственото ограничение е css модулите.

Вместо CSS модули, ние започнахме да гледаме към Glamour, Афродита, стилизирани компоненти, Fela и JSS.

Има и Радий, но не обичам да използвам стил за стайлинг компоненти.

В резултат на това използваме собствен, но напълно нов подход - рокей.

Ние описваме стиловете на компонентите с помощта на Template Literals и започвайки от истинските имена на компонентите, вместо от обичайните CSS класове.

На пръв поглед подходът е подобен на стилизираните компоненти, но в действителност е съвсем различен.

Зареждане от глобални папки

Доста е трудно да работите с код, който изисква модули от родителски директории:

Обикновено в Webpack това се обработва чрез конфигурацията resol.modulesDirectories. Както вече писах, в приложението CRA няма достъп до Webpack, но са възможни две решения.

Друг, по-"красив" начин е използването на променливата на околната среда NODE_PATH. Повече информация - в официалната документация за Node.js Зареждане от глобалните папки.

Съветвам ви да използвате cross-env, за да зададете променливи на средата на различни платформи.

Ако използвате .env config, просто добавете променливата NODE_PATH:

Create React App поддържа .env по подразбиране (с помощта на пакета dotenv). Просто създайте .env във вашата основна папка и стартирайте приложението. Не забравяйте да добавите префикс на всяка променлива с REACT_APP_. Повече информация - в официалната документация, в разделите Добавяне на персонализирани променливи на средата и Добавяне на променливи на средата за разработка в .env.

Поддръжка за множество .env конфигурации

Понякога е полезно да се разделят конфигурациите по тип среда (dev/test/prod). Например тук .env.развитие:

Но .env.production:

Това вече може да стане чрез инсталиране на dotenv и актуализиране на npm скриптове:

Но най-вероятно моята заявка за изтегляне - Поддръжка на различни конфигурации на env # 1343 ще влезе в изданието.

Какви .env * -configs могат да се използват?

.env - стандартна (обща) конфигурация;
.env.development, .env.test, .env.production - в зависимост от средата;
.env.local - локална конфигурация за заменяне на всякакви променливи в зависимост от средата на разработчика. Игнорирана от системата за контрол на версиите;
.env.development.local, .env.test.local, .env.production.local - локална конфигурация в зависимост от средата. Игнорирана от системата за контрол на версиите.

Конфигуриране на приоритет (стъпката се пропуска, ако конфигурационният файл не съществува):

npm тест - .env.test.local, env.test, .env.local, .env;
npm run build - .env.production.local, env.production, .env.local, .env;
npm старт - .env.development.local, env.development, .env.local, .env.

Променете порта на сървъра за разработчици

Например, не можем да стартираме приложението на порт 3000, защото работим с Google Auth, който преди няколко години беше конфигуриран за портове localhost 9001-9005. Разбира се, можем да променим настройките на Google Auth, но е по-обичайно да използваме тези портове.

Добавете променливата на средата PORT, използвайки cross-env:

Ето списък на възможните настройки, използващи променливи на околната среда: