Как добавить React в приложение Express?

Я разрабатываю приложение с помощью Express, и я бы хотел запустить React на интерфейсе. Как мне это сделать?Как добавить React в приложение Express?

Я видел люди, добавляющие тег сценария (с помощью CNDS) к своим файлам верстка, другим, используя множество пакетов НПХ ...

Что это самый простой способ?

источник

2016-06-13 Fábio Queluci

ES6 (с Babel) используется, купить вам не обязательно.

server.js

import "babel-core/polyfill"; 
import path from "path"; 
import express from "express"; 
import React, { DOM } from "react"; 
import ServerDOM from "react-dom/server"; 
import Html from "./components/Html"; 

const server = express(); 

server.set("port", (process.env.PORT || config.port)); 
server.use(express.static(path.join(__dirname, "public"))); 
server.use("/", (req, res, next) => 
{ 
    const html = ServerDOM.renderToStaticMarkup(React.createElement(Html)); 
    res.status(200).send("<!doctype html>" + html); 
}); 

server.get("*", async (req, res, next) => 
{ 
    try 
    { 
     let statusCode = 200; 
     const html = ServerDOM.renderToStaticMarkup(React.createElement(Html)); 

     res.status(statusCode).send("<!doctype html>" + html); 
    } 
    catch (e) { next(e) } 
}); 

server.listen(server.get("port"),() => 
{ 
    console.log("\nServer running at localhost:%d\n", server.get("port")); 
});

Html.js(компонент)

import React, { Component, PropTypes, DOM, createElement as $ } from "react"; 

class Html extends Component 
{ 
    static propTypes = 
    { 
     title: PropTypes.string, 
     description: PropTypes.string 
    }; 

    static defaultProps = 
    { 
     title: "", 
     description: "" 
    }; 

    render() 
    { 
     const { title, description, children } = this.props; 

     return (
      DOM.html({}, 
       DOM.head({}, 
        DOM.meta({charSet: "utf-8"}), 
        DOM.meta({httpEquiv: "X-UA-Compatible", content: "IE=edge"}), 
        DOM.meta({name: "description", content: description}), 
        DOM.meta({name: "viewport", content: "width=device-width, initial-scale=1"}), 
        DOM.link({rel: "stylesheet", href: "/app.css", type: "text/css"}), 
        DOM.title({}, title) 
       ), 
       DOM.body({}, 
        DOM.div({id: "app"}, children), 
        DOM.script({src: "/app.js"}) 
       ) 
      ) 
     ) 
    } 
} 

export default Html;

В теории, вы настраиваете простой экспресс-сервер и с помощью ServerDOM, который реагирует JS для рендеринга компонента Html. Затем вы включаете такой файл, как app.js, который может быть пакетом, скомпилированным с использованием чего-то вроде webpack (только если вы хотите, я очень рекомендую его), тогда вы просто поместите его на компонент Html, и вы сделали.

источник

2016-06-13 19:32:02 Ido

Как добавить React в приложение Express?

ответ

Смежные вопросы