[Express] Реактируйте как шаблонный двигатель вида?

Обновлено (2019/10/29)

Спасибо добрым консультантам , много ошибок исправлено и добавляются новые функции:

• V0.2.6 – [Исправить] Проблема кэша
• V0.3.0 – [Новая] поддержка горячей перезагрузки, когда Process.env. Node_env
• V0.3.1 – [Исправить] много ошибок
• V0.4.2 – [Новая] Поддержка эмоция
• V0.5.5 – [Новая] Поддержка Материал-Уи
• V0.5.6 – [Новая] Поддержка Стили-компоненты
• v0.6.1 – [Новая] Поддержка Nestjs
• v0.7.0 – [Новый] ssr.config.js
• v0.8.0 – [Новый] динамическая голова

вступление

Вы когда -нибудь задумывались об использовании React в качестве шаблонного двигателя View?

Если бы я мог использовать React в качестве реального представления, обратный шаблонный двигатель Express.

Но это может быть сложно, потому что React – это библиотека, ориентированная на компонент, и он должен быть связан с WebPack или Ruplup и так далее …

Представьте себе это!

package.json

{
  "scripts": {
    "start": "node server.js"
  }
}

Server.js

const app = express();

app.get('/', (req, res) => {
  const message = 'Hello World!';
  res.render('index', { message });
});

app.listen(3000, () => {
  console.log('> Ready on http://localhost:3000');
});

Views/index.jsx

import React from 'react';

export default function Index({ message }) {
  return 
{message}
;
}

Это замечательно, не так ли?

Достаточно просто, чтобы изучить и использовать его.

Пожалуйста, попробуйте это! И скажи мне свое первое впечатление!

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-starter.git
$ cd react-ssr-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

SaltyShiomix/React-SSR-JSX-Starter

Пример @React-SSR/Express

Этот репозиторий является примером @React-SSR/Express Анкет

Применение

# installation
$ git clone https://github.com/saltyshiomix/react-ssr-jsx-starter.git
$ cd react-ssr-jsx-starter
$ yarn (or `npm install`)

# development mode
$ yarn dev (or `npm run dev`)

# production mode
$ yarn start (or `npm start`)

Связанный

SaltyShiomix/React-SSR – React SSR в качестве шаблона вида

О @React-SSR/Express

SaltyShiomix/React-SSR

React SSR в качестве шаблонного двигателя View

Обзор

• SSR (рендеринг на стороне сервера) в качестве шаблона просмотра

• Динамический реквизит

  • Передача данных сервера к клиенту React реквизит
  • Подходит для
    • Административные панели
    • Блог
• Опыт разработчика
  • Ноль конфигурация веб -пакета и вавилона
  • HMR (замена горячего модуля) оба сценария и даже если стили, когда Process.env. Node_env
  • Встроенная поддержка SASS (SCSS)

Плюсы и минусы

Плюс

Потому что это просто шаблонный двигатель вида:

• Он не должен иметь никаких API, все, что нам нужно сделать, это передавать данные сервера клиенту
• Он поддерживает несколько двигателей, таких как .hbs , .ejs и реагировать . (TS | JS) x
• Мы можем использовать паспорт аутентификация как всегда является

Минусы

• Это не так эффективно, потому что он собирает весь HTML по каждому запросу
• Он не поддерживает Клиентская сторона маршрутизации

Применение

С @React-ssr/Express

Установите его:

$ npm install --save @react-ssr/core @react-ssr/express express react react-dom

И добавьте сценарий в свой пакет.

Вывод

Да пребудет с вами код.

Спасибо тебе за все!!!

Дорогой,

Оригинал: “https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37”