Загрузка и управление состоянием

Я ищу самый простой 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 (я сам), чтобы начать это путешествие. Пожалуйста, покажите свою поддержку, проверив их, если статья вам показалась интересной.

В следующем эпизоде ​​я улучшу приложение с помощью маршрутизации. Я планирую снова написать собственное решение, но до этого могу наткнуться на какой-нибудь отличный роутер. Не стесняйтесь рекомендовать свой фаворит в комментариях!