Пълен урок за реактивни котли - от нула до герой

Когато започваме да научаваме React, за да правим проектите си, трябва да направим котел от нулата или да използваме някои, предоставени от общността. Почти през цялото време е приложението create-react, което използваме за създаване на приложение без конфигурация за изграждане. Или просто правим собствен прост котел от нулата.

От това идва на ум: защо да не направя котел с всички зависимости, които винаги използвам, и да го оставя готов? Общността също мислеше по този начин, така че сега имаме няколко създадени от общността котли. Някои са по-сложни от други, но винаги имат една и съща цел да спестят максимално количество време.

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

Създадената от тази статия котелна плоча ще бъде налична тук!

Приготвяме се да започнем

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

Отворете терминала си и го създайте така:

mkdir реактив-болт

Сега отидете на създадената папка и въведете следната команда:

npm init -y

NPM ще създаде файл package.json за вас и всички зависимости, които сте инсталирали и вашите команди, ще бъдат там.

Сега, ние ще създадем основната структура на папките за нашия котел. Засега ще е така:

реагира-болт
    | --config
    | --src
    | --tests

WebPACK

Webpack е най-известният пакет модули за JavaScript приложения в наши дни. По принцип тя обединява целия ви код и генерира един или повече пакета. Можете да научите повече за това тук.

В този котел ще го използваме, така че инсталирайте всички тези зависимости:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url loader file-loader

Сега в нашата папка config, ние ще създадем друга папка, наречена webpack, след това вътре в тази папка webpack създаваме 5 файла.

Създайте файл, наречен paths.js. Вътре в този файл ще бъде целевата директория за всички изходни файлове.

Вътре поставете целия този код:

Сега създайте друг файл, наречен rules.js, и поставете следния код там:

След това ще създадем още 3 файла:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

По принцип в нашия webpack.common.babel.js файл, ние настроихме нашата конфигурация за въвеждане и изход и включихме всички плъгини, които са необходими. Във файла webpack.dev.babel.js настроихме режима на развитие. И в нашия webpack.prod.babel.js файл, зададохме режима на производство.

След това в нашата основна папка ще създадем последния уебпакет файл, наречен webpack.config.js и ще поставим следния код:

Нашата конфигурация за уеб пакет е готова, така че сега ще работим върху други части на котлона с Babel, ESLint, Prettier и т.н.

Babel

Мисля, че почти всеки, който работи с React, вероятно е чувал за Babel и как този прост транспилер помага на живота ни. Ако не знаете какво е, Babel, това е основно транспилатор, който преобразува вашия JavaScript код в обикновен стар ES5 JavaScript, който може да работи във всеки браузър.

Ще използваме един куп Babel плъгини, така че в нашата основна папка инсталирайте:

npm install --save-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-предложение-class-properties @ babel / plugin-предложение-object-rest-spread-разпространение @ babel / plugin-syntax-динамичен- import @ babel / plugin-syntax-import-meta @ babel / plugin-transform-async-to-generator @ babel / plugin-transform-runtime @ babel / preset-env @ babel / preset-react @ babel / register @ babel / runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

След това ще създадем файл в основната ни папка, наречен .babelrc и вътре в него, ще поставим следния код:

Сега нашият проект е съставен от Babel и можем да използваме JavaScript синтаксиса на следващото поколение без никакви проблеми.

ESLint

Най-използваният инструмент за свързване на проекти в днешно време е ESLint. Наистина е полезно да намерите определени класове на грешки, като например тези, свързани с променлив обхват, присвояване на недекларирани променливи и т.н.

Първо, инсталирайте следните зависимости:

npm install --save-dev eslint eslint-config-airbnb eslint-config-по-красиво eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-по-красиво eslint-plugin-react

След това в нашата основна папка създайте файл, наречен .eslintrc и поставете следния код там:

По-хубава

По-красиво е основно формат на код. Той анализира кода ви и го отпечатва отново със собствени правила, които вземат предвид максималната дължина на реда, при необходимост опаковане на код.

Просто трябва да го инсталирате:

npm install --save-dev по-красиво

И в нашата основна папка създайте файл, наречен .prettierrc и поставете следния код там:

реагирам

React е библиотека с приложения с отворен код за изграждане на потребителски интерфейси. Той е разработен от Facebook и има огромна общност зад него. Ако четете тази статия, предполагам, че вече знаете за React, но ако искате да научите повече за това, можете да прочетете тук.

Ще инсталираме следните зависимости:

npm install --съхранявайте реакция reak-dom cross-env

И вътре в нашата src папка, ние ще създадем прост HTML файл index.html и ще поставим следния код:

След това ще създадем един прост проект React. Вътре в нашата папка src създайте файл index.js по този начин:

В нашата src папка ще имаме следната структура:

SRC
    | --actions
    | --components
    | --reducers
    | --reducers
    | --store

Създайте файл, наречен App.js, вътре в папката на компонентите и поставете следния код:

Redux

Redux улеснява управлението на състоянието на вашето приложение. Друг начин за това е, че той ви помага да управлявате данните, които показвате и как реагирате на действията на потребителя. В наши дни много хора предпочитат други опции като MobX или само setState, но аз ще се придържам към Redux за тази котлони.

Първо, ще инсталираме някои зависимости:

npm install - запазване на redux react-redux redux-thunk

Тогава ще създадем нашия магазин Redux и ще поставим там някакъв щат. В нашата папка магазин създайте файл index.js и поставете този следния код там:

Сега вътре в папката ни редуктори създайте index.js и поставете следния код:

И накрая, ние ще отидем до index.js в нашата src папка и увиваме кода с <Доставчика /> и ще предадем нашия магазин като реквизит, за да го предоставим на нашето приложение.

Ще стане така:

Готово. Нашият магазин Redux е конфигуриран и готов за работа.

Реагирайте рутер

React Router е стандартната библиотека за маршрутизиране на React. По принцип той поддържа вашия потребителски интерфейс в синхрон с URL адреса. Ще го използваме в нашия котел, затова го инсталирайте:

npm install - запазване на реактор-рутер-dom

След това отидете на index.js в папката ни src и увийте целия код там с .

Нашият index.js в нашата src папка ще завърши така:

Стилизирани компоненти

Стилизираните компоненти правят CSS лесен за всички, тъй като ви помага да организирате своя проект React. Целта му е да пише повече малки и многократни компоненти. Ще го използваме и ако искате да научите повече за него, прочетете тук.

Първо, инсталирайте го:

npm install - запазване на стилизирани компоненти

След това, в нашия App.js файл в папката ни с компоненти, ще създадем просто заглавие, използвайки стилизирани компоненти. Нашето заглавие ще бъде така:

И вътре в нашия файл трябва да импортираме стилизирани компоненти, така че файлът ни ще завърши така:

Jest & React Testing Library

Jest е библиотека за тестване с отворен код от Facebook. Улеснява тестването на приложението ви и ни дава много информация за това, което дава правилния изход и кое не. React Testing Library е много леко решение за тестване на React компоненти. По принцип тази библиотека е заместител на Enzyme.

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

Първо, ще инсталираме и двете:

npm install - библиотека -save-dev jest jest-dom react-testing-library

След това отидете на нашия package.json и в края на краищата поставете следното:

След това отидете в нашата папка config и вътре в нея създайте друга папка, наречена тестове, и вътре в тази папка създайте 2 файла.

Първо, създайте файл, наречен jest.config.js и поставете следния код:

След това създайте файл, наречен rtl.setup.js и поставете следния код:

Готово. Нашият котел е готов за работа и можете да го използвате сега.

Сега отидете на нашия файл package.json и поставете следния код:

Сега, ако стартирате командата npm start и отидете на localhost: 8080, трябва да видим, че приложението ни работи добре!

Ако искате да видите окончателния ми код, котелната плоча, създадена от тази статия, е достъпна тук!

Имам няколко идеи за някои функции, които с удоволствие бих включил в котлона, така че моля не се колебайте!

Следвайте ме в Twitter!
Следвайте ме в GitHub!

Търся отдалечена възможност, така че ако имам нещо, което бих искал да чуя за това, така че, моля, свържете се с мен!