將 React 與其他廣泛使用的 Web 語言連接起來

React 是一個用 JavaScript 編寫的視圖庫，因此它與任何堆疊配置無關，並且幾乎可以出現在任何使用 HTML 和 JavaScript 作為表示層的 Web 應用程式中。

由於 React 就像「MVC」中的「V」一樣，我們可以根據自己的喜好創建自己的應用程式堆疊。到目前為止，在本指南中我們已經看到 React 與 Express（一個基於 Node ES6/JavaScript 的框架）的配合。 React 的其他流行的基於節點的匹配是 Meteor 框架和 Facebook 的 Relay。

如果您想在現有專案中利用 React 出色的基於元件的 JSX 系統、虛擬 DOM 及其超快的渲染時間，您可以透過實作眾多開源解決方案之一來實現。 p>

PHP

由於 PHP 是一種伺服器端腳本語言，與 React 的整合可以有多種形式：

• 使用react-php-v8js
• 伺服器端請求/回應路由處理（使用路由器，例如 Alto）
• 透過 json_encode() 輸出 JSON
• 模板包裝，例如枝條

伺服器端渲染

為了在伺服器上渲染 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 '' . $rjs->getMarkup() . '';

// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js

// init client
echo '' . $rjs->getJS("#here") . ''; 

// 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 標記中即可開始使用您的元件。 p>

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 放入將由 PHP AltoRouter 應用程式提供的 body 標籤內，例如：

  
    React Example
    
    
    
    
  
  
    
    
  

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.php body 標籤中設定 React 檔案的原始程式碼，例如新增以下內容：

.NET

使用ReactJS.NET框架，您可以輕鬆地將React引入您的.NET應用程式中。

透過 .NET 的 NuGET 套件管理器將 ReactJS.NET 套件安裝到 Visual Studio IDE。

搜尋「ReactJS.NET（MVC 4 和 5）」的可用軟體包並安裝。現在您可以在 ASP.NET 應用程式中使用任何 .jsx 擴充程式碼。

為您的專案新增一個新控制器以開始使用 React .NET，並為您的範本選擇「空 MVC 控制器」。建立後，右鍵點擊 return View() 並新增一個包含以下詳細資訊的新視圖：

• 檢視名稱：索引
• 查看引擎：Razor (CSHTML)
• 建立強類型檢視：未勾選
• 建立為部分檢視：未勾選
• 使用版面或母版頁：未選取

現在您可以將預設程式碼替換為以下內容：

@{
    Layout = null;
}


    Hello React


    
    
    
    

現在我們需要建立上面引用的 Example.jsx，因此在您的專案中建立該檔案並新增您的 JSX，如下所示：

var CommentBox = React.createClass({
  render: function() {
    return (
      
        Hello, world! I am a CommentBox.
      
    );
  }
});
ReactDOM.render(
  ,
  document.getElementById('content')
);

現在，如果您在 Visual Studio IDE 中按一下 Play，您應該會看到 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，例如：

Ruby JSX

Babel 是 react-rails gem 的 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 项目中，请通过以下方式执行此操作：

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(, document.getElementById('render-target'));
});

这是实例化一个 App React 组件，您将在 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) => (
      
    ));
  }
 
  render() {
    return (
      
        
          The latest headlines
        
 
        
          {this.renderHeadlines()}
        
      
    );
  }
}

在 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 做好准备，并拥有官方文档。

不再有{{车把}}

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

所以不要使用 {{>; TemplateName}} 或 Template.templateName 用于 JS 中的帮助程序和事件，您将在视图组件中定义所有内容，这些组件都是 React.component 的子类。 p>

结论

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

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

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

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

React 是 Web 开发领域的一个重要里程碑，它有潜力成为任何开发人员的必备工具。不要落后。

以上是將 React 與其他廣泛使用的 Web 語言連接起來的詳細內容。更多資訊請關注PHP中文網其他相關文章！