桥接React与其他流行的Web语言

react 是一个用javascript编写的视图库，因此它与任何堆栈配置无关，并且几乎可以出现在任何使用html和 JavaScript 作为其表示层的 Web 应用程序中。

由于 React 作为“MVC”中的“V”工作，我们可以根据自己的偏好创建自己的应用程序堆栈。到目前为止，在本指南中，我们已经看到 React 与 Express 一起工作，这是一个基于节点ES6/javaScript 的框架。其他流行的基于节点的React匹配是流星框架和 Facebook 的 Relay。

如果您想在现有项目中利用 React 出色的基于组件的jsx系统、虚拟dom及其超快的渲染时间，您可以通过实施众多开源解决方案之一来实现。

php

由于 PHP 是一种服务器端脚本语言，因此与 React 的集成可以有多种形式：

• 使用react-php-v8js

• 服务器端请求/响应路由处理（使用路由器，例如Alto）

• 通过json_encode()输出 JSON

• 模板包装，例如Twig

服务器端渲染

为了在服务器上渲染 React 组件，GitHub 上有一个可用的库。

例如，我们可以在PHP这个包中执行以下操作：

<?php // the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');
 
$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('MyComponent', array(
  'any'   =>  1,
  'props' =>  2
  )
);
 
// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';
 
// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js
 
// init client
echo '<script>' . $rjs->getJS("#here") . '</script>'; 
 
// repeat setComponent(), getMarkup(), getJS() as necessary
// to render more components

将 React 与任何服务器端脚本语言相结合的强大之处在于能够为 React 提供数据，并将您的业务逻辑应用到服务器端和客户端。将旧应用程序改造成响应式应用程序从未如此简单！

使用 PHP + Alto 路由器

有关示例应用程序，请查看GitHub 上的此存储库。

像这样配置你AltoRouter：

<?php // Router setup
require_once 'include/AltoRouter/AltoRouter.php';
$router = new AltoRouter();
$viewPath = 'views/';
 
// Router matches
//---
// Manual
$router->map('GET', '/', $viewPath . 'reactjs.html', 'reactjs');
 
$result = $viewPath . '404.php';
 
$match = $router->match();
if($match) {
    $result = $match['target'];
}
 
// Return route match 
include $result;
 
?>

通过AltoRouter为指定路由提供应用程序页面的设置，您可以将React代码包含在 HTML 标记中并开始使用您的组件。

JavaScript：

"use strict";
 
var Comment = React.createClass({
  displayName: "Comment",
 
  render: function render() {
    var rawMarkup = marked(this.props.children.toString(), { sanitize: true });
    return React.createElement(
      "div",
      { className: "comment" },
      React.createElement(
        "h2",
        { className: "commentAuthor" },
        this.props.author
      ),
      React.createElement("span", { dangerouslySetInnerHTML: { __html: rawMarkup } })
    );
  }
});

确保包含 React 库，并将 HTML 放在将由 PHPAltoRouter应用程序提供的 body 标记中，例如：

<title>React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXtransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
 
 
<div id="myContent"></div>
<script type="text/jsx;harmony=true" src="assets/js/main.js"></script>

Laravel 用户

对于非常流行的 PHP 框架 Laravel，有一个react-laravel库，它可以在你的 Blade 视图中启用 React.js。

例如：

@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])

该prerender标志告诉 Laravel 在服务器端渲染组件，然后将其挂载到客户端。

示例 Laravel 5.2 + React 应用程序

查看这个优秀的入门存储库，以获取通过 Spharian 让 Laravel + React 工作的示例。

要在 Laravel 中渲染 React 代码，请在index.blade.phpbody 标签内设置 React 文件的源代码，例如添加以下内容：

<script src="%7B%7B%20asset('js/my-react-code.js')%20%7D%7D"></script>

.NET

使用 ReactJS.NET 框架，您可以轻松地将 React 引入您的 .NET 应用程序。

通过 .NET 的 NuGET 包管理器将 ReactJS.NET 包安装到 Visual Studio IDE。

搜索“ReactJS.NET（MVC 4 和 5）”的可用包并安装。您现在可以在您的 asp.net 应用程序中使用任何 .jsx 扩展代码。

将新控制器添加到您的项目以开始使用 React + .NET，并为您的模板选择“Empty MVC Controller”。创建后，右键单击return View()并添加具有以下详细信息的新视图：

• 视图名称：索引

• 查看引擎：Razor (CSHTML)

• 创建强类型视图：未勾选

• 创建为局部视图：未勾选

• 使用布局或母版页：未勾选

现在您可以使用以下代码替换默认代码：

@{
    Layout = null;
}
 
 
    <title>Hello React</title>
 
 
    <div id="content"></div>
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="@Url.Content("></script>

现在我们需要创建Example.jsx上面引用的文件，因此在您的项目中创建文件并添加JSX如下：

var CommentBox = React.createClass({
  render: function() {
    return (
      <div classname="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <commentbox></commentbox>,
  document.getElementById('content')
);

现在，如果您Play在 Visual Studio IDE 中单击，您应该会看到 Hello World 注释框示例。

这是为asp.net编写组件的详细教程。

导轨

通过使用react-rails，您可以轻松地将 React 添加到任何 Rails (3.2+) 应用程序中。要开始，只需添加 gem：

gem 'react-rails', '~> 1.7.0'

并安装：

bundle install

现在您可以运行安装脚本：

rails g react:install

这将导致两件事：

• components.js清单文件app/assets/javascripts/components/；这是您放置所有组件代码的地方。

• 将以下内容添加到您的application.js：

//= require react
//= require react_ujs
//= require components

现在.jsx将呈现代码，您可以在模板中添加一个 React 块，例如：

<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{"name":"John"}"></div>

红宝石 JSX

babel是react-railsgem 的 Ruby 实现的核心，可以这样配置：

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options
}

一旦react-rails安装到您的项目中，请让您的服务器休息，并且任何.js.jsx文件都将在您的资产管道中进行转换。

有关详细信息react-rails，请转到官方文档。

python

要安装python-react，请像这样使用 pip：

pip install react

现在，您可以通过提供.jsx组件的路径并使用渲染服务器为应用程序提供服务，从而使用 Python 应用程序渲染 React 代码。通常这是一个单独的node.js过程。

要运行渲染服务器，请遵循这个简单的简短指南。

现在你可以这样启动你的服务器了：

node render_server.js

启动您的 python 应用程序：

python app.py

并在浏览器中加载 http://127.0.0.1:5000 以查看您的 React 代码渲染。

姜戈

添加react到您的INSTALLED_APPS并提供一些配置，如下所示：

INSTALLED_APPS = (
    # ...
    'react',
)
 
REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}

流星

要将 React 添加到您的流星项目中，请通过以下方式进行：

meteor npm install --save react react-dom

然后client/main.jsx添加以下示例：

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
  
import App from '../imports/ui/App.jsx';
  
Meteor.startup(() => {
  render(<app></app>, document.getElementById('render-target'));
});

这是实例化一个AppReact 组件，您将在 中定义它imports/ui/App.jsx，例如：

import React, { Component } from 'react';
 
import Headline from './Headline.jsx';
 
// The App component - represents the whole app
export default class App extends Component {
  getHeadlines() {
    return [
      { _id: 1, text: 'Legalisation of medical marijuana goes worldwide!' },
      { _id: 2, text: 'Matt Brown goes inside the cult of scientology' },
      { _id: 3, text: 'The deep web: A criminals dream or fascinating freedom?' },
    ];
  }
  
  renderHeadlines() {
    return this.getHeadlines().map((headline) => (
      <headline key="{headline._id}" headline="{headline}"></headline>
    ));
  }
  
  render() {
    return (
      <div classname="container">
        <header>
          <h1>The latest headlines</h1>
        </header>
  
        <ul>
          {this.renderHeadlines()}
        </ul>
      </div>
    );
  }
}

在 中Headline.jsx，您使用以下代码：

import React, { Component, PropTypes } from 'react';
  
// Headline component - this will display a single news headline item from a iterated array
export default class Headline extends Component {
  render() {
    return (
       
<li>{this.props.headline.text}</li>
    );
  }
}
  
Headline.propTypes = {
  // This component gets the headline to display through a React prop.
  // We can use propTypes to indicate it is required
  headline: PropTypes.object.isRequired,
};

Meteor 已经为 React 做好了准备，并且有官方文档。

没有更多{{车把}}

需要注意的重要一点：当使用 Meteor 和 React 时，{{handlebars}}不再使用默认的模板系统，因为它已经失效，因为 React 在项目中。

因此，您将在您的视图组件中定义所有内容，而不是在您的 JS 中使用{{> TemplateName}}或Template.templateName作为助手和事件，它们都是React.component.

结论

React 几乎可以用在任何使用 HTML 表示层的语言中。大量潜在的软件产品可以充分利用 React 的优势。

React 使 UI View 层变得基于组件。与任何堆栈进行合乎逻辑的工作意味着我们拥有一种通用的界面语言，Web 开发的各个方面的设计师都可以使用它。

React 在所有部署中统一了我们项目的界面、品牌和一般应急，无论设备或平台限制如何。同样在自由职业者、基于客户的工作或大型组织内部，React 确保您的项目代码可重用。

您可以创建自己的定制组件库，并立即在新项目中工作或翻新旧项目，快速轻松地创建完全反应式的等距应用程序界面。

React 是 Web 开发中的一个重要里程碑，它有可能成为任何开发人员收藏中必不可少的工具。不要落后。