В этой серии мы увидим, как реализовать эту важную функцию изолированно. Мы будем использовать create-react-app
, сам react
, redux
для обработки состояния приложения на клиенте, [email protected]
для создания отдельных страниц и простой express
внутренний сервер с mongodb
для сохранения. Таким образом, несмотря на то, что пример приложения небольшой и сфокусированный, он настолько реален, насколько это возможно.
Важное примечание:React Router, который я использовал в этой серии, был в alpha
, с тех пор он был обновлен и внес критические изменения. Так что если хотите продолжить — устанавливайте alpha
версию. Вы можете узнать об изменениях и о том, как обновить React Router до последней версии, в 11-м выпуске этой серии.
Эта короткая серия преследует одну простую цель: показать, как создавать простые функции CRUD (создание, чтение, обновление, удаление), включая связь с сервером через API и интерфейсные маршруты для каждой страницы.
Вот краткий обзор каждого из 10 эпизодов сериала:
- Настройка приложения и Redux. В этом первом эпизоде мы установим
create-react-app
и будем использовать его для начальной загрузки нашего приложения. Затем мы рассмотрим все шаги, необходимые для установки и настройкиredux
. - React Router 4 и индексная страница. Далее мы устанавливаем и настраиваем React Router и используем его для рендеринга главной страницы нашего приложения.
- Запрос AJAX и сервер ExpressJS. На этом подготовка закончена и мы приступаем к кодированию. Мы реализуем ajax-запрос к внутреннему серверу для получения коллекции игр. Далее мы создадим сам внутренний сервер с
express
иmongodb
. - Проверка формы и клиента. Вот где все становится реальным: мы реализуем нашу первую форму и посмотрим, как проверять ввод пользователя прямо здесь — на клиенте.
- Проверка на стороне сервера и создание игры (часть 1). Следующие два эпизода посвящены тому, чтобы заставить эту форму выполнять настоящую работу. В этом мы отправим данные формы и отправим запрос на сервер, узнаем о промежуточном программном обеспечении
express
и подготовим все, чтобы перехватывать ошибки с сервера. - Проверка на стороне сервера и создание игры (часть 2). Во второй части мы заканчиваем создание игры. Сначала мы реализуем проверку на стороне сервера и убедимся, что ошибки сервера отображаются на клиенте, а затем сохраним игру в базе данных.
- Индексная страница. Далее мы убедимся, что наша индексная страница работает. Прямо сейчас он делает запрос, но ничего не отображает на странице. Мы это исправим. А затем поговорите о трех разных способах взаимодействия вашего приложения React с сервером.
- Редактировать игровую форму. У нас уже есть форма для создания игры. В этом эпизоде мы усложним его, чтобы мы могли использовать его и для редактирования.
- Редактирование игры и рефакторинг. В этом эпизоде мы будем использовать эту форму и завершим редактирование игры. А затем мы разделим нашу форму на два компонента, чтобы их было легче анализировать, и чтобы уменьшить сложность.
- Удалить игру. В последнем эпизоде мы закончим с CRUD, реализовав удаление игры.
Здесь идет голосование за тему следующей серии: https://rem8.typeform.com/to/twBUha
Спасибо и дайте мне знать, что вы думаете.