README

此包做什么

允许使用 symfony twig 使用 reactjs
允许服务器端 reactjs (多态) 渲染（可选）

需求

Node.js >= v0.12
NPM
Grunt
Webpack

此包允许 symfony 利用服务器端渲染（用于 SEO）来为 reactjs 提供支持。为了实现这一点，使用 nodejs express 服务器返回代表初始 reactjs 页面的静态 HTML 字符串。这是通过向 nodejs express 服务器发送 HTTP 请求来实现的。

一旦页面加载到浏览器中，客户端 reactjs 就会启动，并开始使用可用的 webpack 打包的 reactjs 文件。

此包还提供了 Twig 扩展，允许 react 直接与您的 twig 模板一起使用。您不需要启用服务器端渲染器即可使用此功能。

React 标签

目前有两种 ReactJS 定制的 twig 标签，一个用于带属性，另一个用于不带属性。

带属性

语法

{{{'prop1' : 'value1', ...}|react('component_name')}}

示例

{{{'name' : 'Kylo Ren'}|react('hello')}}

请注意，整个语句被两个花括号包裹，属性被一对花括号包裹。属性和包含组件名称作为参数的 react 函数之间还有一个管道符 ('|')。

不带属性

语法

react('component_name')

示例

{{react('countdown')}}

语法与前面相同，但没有属性和管道符。

ReactJS 在开发环境中

我们将要创建的大部分 ReactJS 组件将使用 JSX 子语言来使开发过程痛苦减轻并加快速度。不幸的是，世界上没有浏览器能理解 JSX 是什么，因此我们必须先将其转换为常规 JavaScript，然后我们才能看到组件的实际效果。这就是 webpack 发挥作用的地方。

安装

A. 在您的 AppKernel.php 文件中添加 react 包

```
    $bundles = array(
        //...
        new React\Bundle\ServerSideRendererBundle\ReactServerSideRendererBundle(),
    );
```

B. 通过将以下内容添加到您的 Symfony2 应用程序的 app/config/config.yml 中来配置包。

react_server_side_renderer:
    renderer:
        render_server: "https://:3000"
        is_enabled: true
    twig_extension:
        src_path: "./reactjs/src/"

renderer.render_server: 这是 nodejs 服务器所在的 HTTP URI
twig_extension.src_path: 这是 reactjs 源文件的位置

C. 导航到 Nodejs 目录并运行 npm install 以安装包特定的依赖项

D. 在应用程序根目录中添加一个 package.json 文件，并添加以下依赖项

 "dependencies": {
   ...
   "grunt": "~0.4.5", 
   "grunt-webpack": "^1.0.8",
   "webpack": "^1.10.1"
   "babel-core": "^5.6.18",
   "babel-loader": "^5.3.1",
   "react": "^0.13.3"
 }

再次运行 npm install，但这次是在应用程序根目录中安装应用程序的 node 依赖项

E. 在应用程序根目录中创建一个 Gruntfile.js 文件，并添加以下 webpack 块

var path = require('path');
var pagesBase = path.resolve('./web/assets/reactjs/maps');
var webpack = require('webpack');

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        webpack: {
            reactComponents: {
                entry: grunt.file.expand({cwd: pagesBase}, '*Map.js').reduce(
                        function(map, page, index, array) {
                            map[path.basename(page)] = path.join(pagesBase, page);
                            if(index == array.length-1){
                                map['vendor'] = ['react'];
                            }
                            return map;
                        }, {}
                    ),
                output: {
                    path: './web/assets/reactjs/build',
                    filename: '[name]' // Template based on keys in entry above
                },
                module: {
                    loaders: [
                        {test: /\.js?$/, exclude: /node_modules|bower_components/, loader: 'babel-loader'}
                    ]
                },
                plugins: [
                    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
                ],
                failOnError: false,
                watch: grunt.option('watch'),
                keepalive: grunt.option('watch'),
            }
        }
    });
    
    grunt.loadNpmTasks('grunt-webpack');
    grunt.registerTask('default', ['webpack']);
};

有关创建 Gruntfile 的更多信息，请参阅： https://grunt.node.org.cn/sample-gruntfile

将 react 模板文件从包移动到 symfony 网络目录

'Resource/public/js/reactRender.js' -> '[symfony2/assets/directory]/js/reactRender.js'
'Resource/public/js/mapTemplate.js' -> '[symfony2/assets/directory]/reactjs/maps/mapTemplate.js'

用法

在 TWIG 中使用 React

要在您的页面中引用 reactjs，只需执行以下操作

编写您的 reactjs 组件并将它们放入您的 reactjs 源目录中，例如 web/assets/reactjs/src
在文件夹中创建一个映射文件并将其添加到您的 reactjs 映射目录中，例如：web/assets/reactjs/map。通常每个页面有一个映射文件。它包含特定页面中使用的 reactjs 组件。

请查看示例映射文件和 react 组件文件，地址为：https://github.com/nelsoft-easyshop/react-serverside-renderer/tree/master/Resources/public/example

使用 grunt-webpack 构建，通过运行 grunt。请注意，每次更改 react 组件时，您都必须重新运行 grunt。您可以通过简单地运行 grunt --watch 来跳过此步骤
将您的 react twig 标签添加到视图文件中
在 twig 模板中引用捆绑的映射文件以及 reactRender.js 文件。reactRender 文件简单地将您的 react 客户端逻辑附加到服务器生成的 react HTML 上。

    <script src="{{ asset('reactjs/build/somepageMap.js') }}"></script>
    <script src="{{ asset('js/src/reactRender.js') }}"></script>

请注意，如果 Node.js 服务器没有运行，则您将无法启用服务器端渲染，但您的应用程序仍然可以工作。换句话说，您的应用程序不会被索引，但您可以像现在这样使用它。这在您在开发环境中工作时非常有用。

服务器端渲染器使用

导航到应用程序的资产目录，然后在此处执行捆绑中的 server.js。例如

cd ../../../../web/assets
node ../../vendor/yilinker/reactjs-serverside-renderer/Nodejs/server.js

请注意，您不需要启动 SSR 服务器来使 react 集成工作。您只需要它来实现服务器端渲染，这通常仅在生产环境中进行。

专业技巧

您可以通过为 server.js 创建一个 npm 运行脚本来加快执行步骤

A. 在应用程序根目录的 package.json 中添加以下脚本命令

  "scripts": {
      "react-start": "cd vendor/yilinker/reactjs-serverside-renderer/Nodejs && npm start"
  },

B. 在 yilinker/reactjs-serverside-renderer/Nodejs/ 的 package.json 中添加一个 start 脚本，执行适当的目录更改命令和 node 初始化命令。请注意，您可能需要根据文件夹的结构稍作修改命令。

  "scripts": {
    "start": "cd ../../../../web/assets && node ../../vendor/yilinker/reactjs-serverside-renderer/Nodejs/server.js",
  },

C. 然后，您只需在 symfony 应用程序的根目录中运行 npm run-script react-start

yilinker / reactjs-serverside-renderer

维护者

详情