Универсальный React: redux, response-router, webpack и рендеринг на стороне сервера

Это моя попытка облегчить процесс адаптации людей, которые пришли из разных фреймворков javascript и готовы перейти в мир реакции.

На создание достойной системы сборки и среды разработки уходит вечность. Вы не сможете приступить к написанию кода своего приложения, пока не потратите часы на его настройку.

React - это небольшая часть набора инструментов, необходимого для создания базовых веб-приложений, и вам нужно изучить еще десяток вещей, прежде чем вы сможете начать.

Весь исходный код опубликован на github, также вы можете просматривать разные ветки для разных дополнительных шагов.

Настройка

1.1 Стек

Перед настройкой не следует понимать, что вы знаете об этих сущностях по частям, мы просто попытаемся соединить их вместе.

Реагировать: создавать и отображать компоненты React на клиенте.

Redux: для управления состоянием данных приложения

Response-router: для декларативной маршрутизации для React

Webpack: сборщик модулей

Koa.js: веб-фреймворк нового поколения для nodeJs

1.2 Структура папки

ШАГ-1 - Запускаем React

В нашем приложении у нас будет 2 страницы, одна из которых будет индексной страницей, другая будет страницей со списком.

На каждой странице будет изложена какая-то основная концепция.

1.1 Базовая компонента реакции

Это базовый компонент реакции, в котором мы рендерим некоторый контент.

Подобным образом мы создадим другие базовые минимальные страницы.

ШАГ-2 - Добавление реагирующего маршрутизатора

мы добавим реагирующий маршрутизатор, чтобы продемонстрировать базовую маршрутизацию между двумя страницами.

2.1 Базовая маршрутизация

Шаг-3 - Добавление redux

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript, для поддержания состояния приложения в приложении и для того, чтобы компоненты могли об этом сообщать.

Действия, Магазин и Редукторы лежат в основе Redux. Магазин - это место, где хранятся данные. Чтобы обновить магазин, компоненты React генерируют действия. Магазин обновляется с помощью редуктора, который может обрабатывать действие. Обновленный магазин доступен для компонентов React через props.

3.1 действия

Действия в Redux - это функции, возвращающие объект действия. Это полезные данные, которые отправляют данные из нашего приложения в наш магазин.

//ActionTypes.js
export const GET_AUTHOR_NAME = 'Request author name'

Объект действия содержит action type и action data.

//action object
{
  type : types.GET_AUTHOR_NAME,
  data :{key : 'some value'}
}

3.2 создатели действий

Создатели действий - это именно те функции, которые создают действия. Термины «действие» и «создатель действия» легко объединить, поэтому постарайтесь использовать правильный термин.

3.3 диспетчер

Redux предоставляет функцию под названием dispatch, которая позволяет нам передавать Action объект JSON всем другим компонентам. Отправка действия означает простой вызов функции отправки с объектом JSON действия.

К функции dispatch() можно получить доступ прямо из магазина как store.dispatch(), но, скорее всего, мы будем обращаться к ней с помощью помощника, такого как connect() react-redux, который автоматически привяжет многих создателей действий к функции dispatch().

3.4 редукторы

Действия описывают тот факт, что что-то произошло, но не указывают, как состояние приложения изменяется в ответ. Это работа редукторов.

Редукторы в Redux - это функции, которые обновляют состояние магазина.

Редуктор получает initial state & action. В зависимости от типа действия он возвращает новое состояние для магазина. Состояние, поддерживаемое редукторами, неизменяемо. Мы возвращаем новый объект состояния при изменении состояния.

Redux повторно отображает все компоненты всякий раз, когда появляется новое состояние.

3.4 настройка магазина

Хранилище можно рассматривать как набор редукторов, каждый из которых поддерживает свое состояние.

Функция createStore принимает корневой редуктор и начальное состояние. Начальное состояние может быть получено из постоянного хранилища, такого как база данных. Корневой редуктор - это набор всех редукторов в приложении.

3.5 Интеграция реакции с redux

Функция connect в React-Redux создает компонент HomeContainer.

Функция mapStateToProps прикрепляет состояние магазина к реквизитам. Каждый раз, когда компонент React использует homeState, возвращается состояние, поддерживаемое соответствующим редуктором.

Redux привносит некоторую сложность в приложение React. К счастью, сложность - это единовременное усилие. Как вы знаете, управление состоянием в сложных приложениях - вещь непростая. ;)

4-Настройка сервера и SSR (рендеринг на стороне сервера)

Здесь мы будем использовать фреймворк node.js Koa.js для наших задач на стороне сервера.

4.1 настройка коа

Koa Js - единственный фреймворк, который я могу назвать, который нашел хорошее применение ES6. Он принял несколько отличных дизайнерских решений: он легкий, он избегает вложенных обратных вызовов и уникально подходит для разработки современных API.

4.2 логика рендеринга на стороне сервера

Важные функции:

совпадение: эта функция реактивного маршрутизатора должна использоваться для рендеринга на стороне сервера. Он сопоставляет набор маршрутов к местоположению без рендеринга и по завершении вызывает callback(error, redirectLocation, renderProps).

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

renderToString: отображает элемент React в исходный HTML-код. Это следует использовать только на сервере. React вернет строку HTML. Вы можете использовать этот метод для генерации HTML на сервере и отправки разметки при первоначальном запросе для более быстрой загрузки страницы и для разрешения поисковым системам сканировать ваши страницы в целях SEO.

5-Настройка сборки с помощью webpack

Webpack - это сборщик модулей. Это означает, что webpack принимает модули с зависимостями и генерирует статические ресурсы, представляющие эти модули.

Запись 5.1

имя файла верхнего уровня или набора файлов, которые мы хотим включить в нашу сборку, может быть одним файлом или массивом файлов. В нашей сборке мы передаем только наш основной файл (client / index.js) и для сервера (server / index.js)

entry: [
    'webpack-hot-middleware/client',
    './client/index.js'
  ],

Выход 5.2

объект, содержащий вашу конфигурацию вывода. В нашей сборке мы указываем только ключ имени файла для client- (bundle.js), server (server.bundle.js) для имени файла, который мы хотим создать Webpack.

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  }

5.3 Загрузчики и предварительные загрузчики Webpack

Загрузчики - это то, как Webpack осваивает новые функции.

Из документации: «Загрузчики позволяют предварительно обрабатывать файлы по мере необходимости () или« загружать »их. Загрузчики подобны «задачам» в других инструментах сборки и предоставляют мощный способ обработки шагов сборки внешнего интерфейса. Загрузчики могут преобразовывать файлы с другого языка, например CoffeeScript, в JavaScript или встроенные изображения в URL-адреса данных. Загрузчики даже позволяют делать такие вещи, как require () css-файлы, прямо в вашем JavaScript! »

loaders: [
      { 
       test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname,
        query: {
          presets: [ 'react-hmre' ]
        }
      }
    ]
  }

test - регулярное выражение, которое проверяет, какие файлы запускать через этот загрузчик. Как видите, мы добавили регулярное выражение для проверки всех файлов с расширением es6.
exclude - какие файлы загрузчик должен исключить / игнорировать. Мы добавили папку node_modules.
loader - название загрузчика, который мы собираемся использовать (babel-loader).
запрос. Вы можете передать параметры загрузчику, записав их в виде строки запроса или используя свойство запроса, как мы сделали выше.
cacheDirectory - по умолчанию false. Если установлено, данный каталог будет использоваться для кеширования результатов загрузчика. Будущие сборки webpack будут пытаться читать из кеша, чтобы избежать необходимости запускать потенциально дорогостоящий процесс перекомпиляции Babel при каждом запуске.
presets: позволяет использовать предустановки react и es2015, которые были установлены ранее.

Мы также добавили ключ с именем «resolve» к нашему объекту module.exports. resolve - это раздел, который позволяет нам указать, какие типы файлов мы можем обрабатывать, не указывая им расширение файла. Это позволит нам использовать такой синтаксис, как:

5.1 создание пакета на стороне клиента

5.2 создание пакета на стороне сервера

5.3 скрипты npm для их запуска

На самом деле это особенность npm и функциональность, которую вы можете использовать в своем файле package.json, но это то, что стоит сделать, чтобы упростить ваш процесс.

> npm run startall

Наконец-то готово, теперь вы можете с удовольствием запускать приложение.
Измените его, поиграйте с ним.