如何将React添加到Express应用程序？_Express_Reactjs

如何将React添加到Express应用程序？

express reactjs

如何将React添加到Express应用程序？,express,reactjs,Express,Reactjs,我正在使用Express开发一个应用程序，我想在前端运行React。我该怎么做我见过有人将脚本标记（使用CND）添加到布局文件中，还有人使用许多npm包最简单的方法是什么？使用ES6（with），您不必购买 server.js import "babel-core/polyfill"; import path from "path"; import express from "express"; import React, { DOM } from "react"; import Serve

我正在使用Express开发一个应用程序，我想在前端运行React。我该怎么做

我见过有人将脚本标记（使用CND）添加到布局文件中，还有人使用许多npm包

最简单的方法是什么？

使用ES6（with），您不必购买

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"));
});

理论上，您正在设置SimpleExpress服务器，并使用ServerDOM（服务器端渲染）来渲染Html组件。然后包括像

app.js

这样的文件，它可以是一个使用以下内容编译的包（如果您愿意，我非常推荐），然后您只需将其放在Html组件上，就可以完成

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;