В этой серии мы увидим, как реализовать эту важную функцию изолированно. Мы будем использовать create-react-app, сам react, redux для обработки состояния приложения на клиенте, [email protected] для создания отдельных страниц и простой express внутренний сервер с mongodb для сохранения. Таким образом, несмотря на то, что пример приложения небольшой и сфокусированный, он настолько реален, насколько это возможно.

Важное примечание:React Router, который я использовал в этой серии, был в alpha, с тех пор он был обновлен и внес критические изменения. Так что если хотите продолжить — устанавливайте alpha версию. Вы можете узнать об изменениях и о том, как обновить React Router до последней версии, в 11-м выпуске этой серии.

Эта короткая серия преследует одну простую цель: показать, как создавать простые функции CRUD (создание, чтение, обновление, удаление), включая связь с сервером через API и интерфейсные маршруты для каждой страницы.

Вот краткий обзор каждого из 10 эпизодов сериала:

  1. Настройка приложения и Redux. В этом первом эпизоде ​​мы установим create-react-app и будем использовать его для начальной загрузки нашего приложения. Затем мы рассмотрим все шаги, необходимые для установки и настройки redux.
  2. React Router 4 и индексная страница. Далее мы устанавливаем и настраиваем React Router и используем его для рендеринга главной страницы нашего приложения.
  3. Запрос AJAX и сервер ExpressJS. На этом подготовка закончена и мы приступаем к кодированию. Мы реализуем ajax-запрос к внутреннему серверу для получения коллекции игр. Далее мы создадим сам внутренний сервер с express и mongodb.
  4. Проверка формы и клиента. Вот где все становится реальным: мы реализуем нашу первую форму и посмотрим, как проверять ввод пользователя прямо здесь — на клиенте.
  5. Проверка на стороне сервера и создание игры (часть 1). Следующие два эпизода посвящены тому, чтобы заставить эту форму выполнять настоящую работу. В этом мы отправим данные формы и отправим запрос на сервер, узнаем о промежуточном программном обеспечении express и подготовим все, чтобы перехватывать ошибки с сервера.
  6. Проверка на стороне сервера и создание игры (часть 2). Во второй части мы заканчиваем создание игры. Сначала мы реализуем проверку на стороне сервера и убедимся, что ошибки сервера отображаются на клиенте, а затем сохраним игру в базе данных.
  7. Индексная страница. Далее мы убедимся, что наша индексная страница работает. Прямо сейчас он делает запрос, но ничего не отображает на странице. Мы это исправим. А затем поговорите о трех разных способах взаимодействия вашего приложения React с сервером.
  8. Редактировать игровую форму. У нас уже есть форма для создания игры. В этом эпизоде ​​мы усложним его, чтобы мы могли использовать его и для редактирования.
  9. Редактирование игры и рефакторинг. В этом эпизоде ​​мы будем использовать эту форму и завершим редактирование игры. А затем мы разделим нашу форму на два компонента, чтобы их было легче анализировать, и чтобы уменьшить сложность.
  10. Удалить игру. В последнем эпизоде ​​мы закончим с CRUD, реализовав удаление игры.

Здесь идет голосование за тему следующей серии: https://rem8.typeform.com/to/twBUha

Спасибо и дайте мне знать, что вы думаете.