Итак ... Долгое время я был большим поклонником Angular. Однако примерно в 2015 году, когда мы решили переписать наш веб-стек, React вышел на первое место с небольшой системой показателей. В React мы хотели сделать несколько других вещей, которые могли бы помочь нам разработать структуру будущего, например, модули ES6, изоморфный рендеринг, модуляризация NPM, модули CSS и т. Д. Используя все полученные знания, я решил написать мини-приложение с именно тот ингредиент, который может служить руководством для разработчиков, которые хотели пойти по тому же пути. Эта статья будет следовать пошаговой настройке для разработчиков, которые хотят учиться. Конечно, если вы очень заняты, вот ссылка на кодовую базу, с которой можно покончить с этим. Начнем.

Привет, мир

Наша первая цель - напечатать Hello World с помощью express. Не забудьте сделать npm init, чтобы начать проект узла. Теперь о зависимостях:

Экспресс и EJS для сервера

npm install express ejs --save

React и React Router для рендеринга страниц

npm install react react-dom react-router react-router-dom --save

Конечно, webpack

npm install webpack webpack-node-externals --save-dev

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

npm install babel-core babel-eslint babel-loader babel-plugin-transform-async-to-generator babel-polyfill babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save

Создайте .babelrc файл со следующим содержимым, чтобы проинструктировать Babel о том, как выполнять преобразование.

Webpack, хореограф сборки должен уметь делать то же самое. Создайте webpack.config.js файл со следующим содержимым. Конфигурация содержит такую ​​информацию, как входной файл, целевой файл пакета и вызов загрузчика babel для файлов JS.

Вот и все с настройкой. Теперь о написании приложения Hello World Express. Создайте src/server.js с помощью простого эха hello world.

Добавьте сценарий в package.json для сборки и запуска сервера с помощью команды npm.

Бум!

npm run start

При переходе по адресу http: // localhost: 3000 / должна отображаться страница Hello World.

Реагировать с помощью React Router

Теперь, когда мы успешно запустили hello world, пора добавить в экосистему маршрутизаторы React и React Router.

Наш первый компонент Home будет обслуживать запрос индекса. В качестве хорошей практики мы будем хранить наши компоненты внутри src/components. Создайте файл src/components/Home.js со следующим содержанием:

Определите свои маршруты в src/routes/index.js со следующей конфигурацией:

Конечно, нам нужен App компонент, который будет выполнять маршрутизацию для… приложения. Создание src/components/App.js со следующим содержимым, чтобы разрешить маршрутизацию.

Что касается этой демонстрации, мы будем использовать ejs для рендеринга из Express. Создайте src/views/layout.ejs со следующим шаблоном:

Мы возвращаемся к нашему серверному файлу src/server.js и редактируем его, чтобы выполнить рендеринг React. Мы меняем рендеринг нашего представления на ejs и отправляем отрисованный ответ в макет ejs для окончательной доставки.

Завершите работу сервера и повторно запустите команду npm run start, чтобы увидеть отрисовку страницы с помощью React. Woot Woot!

Гидратация на стороне клиента

Поздравляю! Вы добрались до КПП! К этому времени у вас должно быть готовое приложение React с рендерингом на стороне сервера. Отлично, сделаем изоморфным.

Создайте src/client.js со следующим содержанием. Что мы здесь делаем, так это делаем React рендеринг клиентским способом.

Затем настройте конфигурацию веб-пакета, которая может создать пакет для браузеров. Вот содержимое webpack.client.config.js.

Включите статический рендеринг для папки public в экспрессе. Добавьте следующую жирную строку в src/server.js

...
app.set('views', 'src/views');
app.use('/static', express.static('public'));
...

Добавьте в файл src/views/layout.ejs следующий сценарий:

...
    <section id="content"><%- content %></section>
    <script src="/static/client.js"></script>
  </body>
</html>

Измените package.json, чтобы получить следующее scripts:

...
  "scripts": {
    "build:server": "webpack",
    "build:client": "webpack --config webpack.client.config.js",
    "build": "npm run build:server & npm run build:client",
    "serve": "node dist/server.js",
    "start": "npm run build && npm run serve"
  },
...

Вот и все! Завершите процесс и запустите заново с npm run start. Это должно начать волшебство.

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

Вот и все! У нас есть простое изоморфное веб-приложение. Если хотите узнать больше - redux, saga and more.