Загрузка и управление состоянием
Я ищу самый простой React Stack. Он должен быть ориентирован на будущее и иметь набор функций, но, что наиболее важно, с ним должно быть легко работать.
В этой серии я буду искать простые в использовании решения для реализации улучшенной версии классического React TodoMVC. Когда я думаю, что могу добиться чего-то более простого, я сам создаю вспомогательные библиотеки. Следующие темы, вероятно, будут затронуты до финала.
- Начальная загрузка
- Государственное управление
- Маршрутизация
- Укладка
- Сети
- Тестирование
- Хостинг
Серии будут короткими и… простыми.
Начальная загрузка и комплектация
Create React App здесь сложно превзойти. Он устанавливает множество скрытых вещей с помощью всего лишь нескольких команд.
npx create-react-app todos cd todos npm start
Таким образом создается прогрессивное веб-приложение, работающее в автономном режиме, с поддержкой ES6 +, CSS с автоматическим префиксом и наблюдающим сервером разработки. Ооочень много хороших технологий в одном предложении! Потрясающие.
Вы можете протестировать и собрать код позже с помощью команд npm test
/ npm run build
. Если ваш проект превосходит Create React App, просто выполните npm run eject
и возьмите на себя управление.
Вот и все! Давайте сразу перейдем к разработке, отредактировав папку src
, созданную приложением React Create.
Государственное управление
Государственное управление было для меня не таким очевидным выбором. Я решил запачкать руки и написать собственное решение. Он называется React Easy State, и вот как вы его используете.
№1. Установка
npm install react-easy-state
№2. Создать магазин
Магазины - это простые объекты со всей мощью ES6. Давайте создадим один в src/store.js
с некоторыми фильтруемыми задачами и методами мутации.
Обязательно оберните объект магазина в store
перед его экспортом.
№3. Измените приложение
Следующим шагом является интеграция существующего компонента src/App.js
с хранилищем задач. Просто импортируйте магазин и используйте его как обычный объект.
Обязательно заключите компоненты в view
перед их экспортом.
№4. Добавить Todos
Добавьте новый компонент для задач. Опять же, вы можете импортировать и использовать магазин как простой объект.
Обертка view
автоматически связывает ваши методы, вам не нужно беспокоиться о передаче их в качестве обратных вызовов.
Суть
Мы создали упрощенную версию приложения TodoMVC с ванильным React, несколькими дополнительными командами и двумя функциями-оболочками. Вкратце, это был поток.
№1. Установить вещи
npx create-react-app todos cd todos npm i react-easy-state npm start
№2. Напишите код
Используйте объекты JS для состояния и компоненты React для представления. Обязательно заключите их в store
и view
соответственно. Для внедрения зависимостей используйте импорт ES6 и реквизиты React.
№3. Отдыхать
Откиньтесь на спинку кресла и наслаждайтесь результатом своих усилий. Вы можете найти немного более сложный пример TodoMVC здесь с живой демонстрацией.
Заключение
Мы использовали Create React App (автор @ dan_abramov) и React Easy State (я сам), чтобы начать это путешествие. Пожалуйста, покажите свою поддержку, проверив их, если статья вам показалась интересной.
В следующем эпизоде я улучшу приложение с помощью маршрутизации. Я планирую снова написать собственное решение, но до этого могу наткнуться на какой-нибудь отличный роутер. Не стесняйтесь рекомендовать свой фаворит в комментариях!