Sambungkan React dengan bahasa web lain yang digunakan secara meluas

React ialah perpustakaan pandangan yang ditulis dalam JavaScript, jadi ia agnostik kepada sebarang konfigurasi tindanan dan boleh muncul dalam hampir mana-mana aplikasi web yang menggunakan HTML dan JavaScript sebagai lapisan pembentangan.

Memandangkan React adalah seperti "V" dalam "MVC", kami boleh mencipta tindanan aplikasi kami sendiri mengikut keutamaan kami. Setakat ini dalam panduan ini kita telah melihat React dipasangkan dengan Express, rangka kerja berasaskan Node ES6/JavaScript. Padanan berasaskan nod popular lain untuk React ialah rangka kerja Meteor dan Relay Facebook.

Jika anda ingin memanfaatkan sistem JSX berasaskan komponen React yang sangat baik, DOM maya dan masa pemaparannya yang sangat pantas dalam projek sedia ada anda, anda boleh melakukannya dengan melaksanakan salah satu daripada banyak penyelesaian sumber terbuka. p>

PHP

Memandangkan PHP ialah bahasa skrip sebelah pelayan, integrasi dengan React boleh datang dalam pelbagai bentuk:

• Gunakan react-php-v8js
• Pengendalian penghalaan permintaan/tindak balas sebelah pelayan (menggunakan penghala, seperti Alto)
• Output JSON melalui json_encode()
• Pembungkusan templat, seperti cawangan

Rendering Sisi Pelayan

Untuk memaparkan komponen React pada pelayan, terdapat perpustakaan yang tersedia di GitHub.

Sebagai contoh, kita boleh menggunakan pakej ini untuk melakukan perkara berikut dalam PHP: 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

Kuasa menggabungkan React dengan mana-mana bahasa skrip sebelah pelayan ialah keupayaan untuk menyediakan data kepada React dan menggunakan logik perniagaan pada pelayan dan pelanggan. Mengubah apl lama kepada yang responsif tidak pernah semudah ini! 🎜 🎜Menggunakan PHP + Alto Router🎜 🎜Untuk contoh aplikasi, lihat repositori ini di GitHub. 🎜 🎜Konfigurasikan AltoRouter anda seperti berikut: 🎜

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

🎜Untuk menyampaikan halaman aplikasi bagi laluan yang ditentukan melalui tetapan AltoRouter, anda hanya perlu memasukkan kod React dalam HTML tag Anda boleh mula menggunakan komponen anda. 🎜 🎜JavaScript:🎜

pip install react

🎜Pastikan anda memasukkan perpustakaan React dan letakkan HTML di dalam teg badan yang akan disampaikan oleh aplikasi AltoRouter PHP, sebagai contoh: 🎜

node render_server.js

🎜Pengguna Laravel🎜 🎜Untuk rangka kerja PHP yang sangat popular Laravel, terdapat pustaka react-laravel, yang membolehkan React.js dalam paparan Blade. 🎜 🎜Contohnya: 🎜

python app.py

Bendera 🎜prapaparan memberitahu Laravel untuk memaparkan komponen pada bahagian pelayan dan kemudian melekapkannya pada bahagian klien. 🎜

Contoh aplikasi Laravel 5.2 + React

🎜 Lihat repositori permulaan yang hebat ini untuk contoh Spharian menjalankan Laravel + React. 🎜 🎜Untuk memaparkan kod React dalam Laravel, tetapkan kod sumber fail React dalam teg badan index.blade.php, sebagai contoh, tambahkan yang berikut: 🎜

INSTALLED_APPS = (
    # ...
    'react',
)

REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}

🎜.BERSIH🎜 🎜Menggunakan rangka kerja ReactJS.NET, anda boleh memperkenalkan React ke dalam aplikasi .NET anda dengan mudah. 🎜 🎜Pasang pakej ReactJS.NET ke dalam Visual Studio IDE melalui pengurus pakej NuGET untuk .NET. 🎜 🎜Cari pakej yang tersedia untuk "ReactJS.NET (MVC 4 dan 5)" dan pasangkannya. Anda kini boleh menggunakan mana-mana kod sambungan .jsx dalam aplikasi ASP.NET anda. 🎜 🎜Tambah pengawal baharu pada projek anda untuk bermula dengan React + .NET dan pilih "Pengawal MVC Kosong" untuk templat anda. Setelah dibuat, klik kanan return View() dan tambahkan paparan baharu dengan butiran berikut: 🎜 🎜 🎜Nama Lihat: Indeks🎜 🎜Melihat enjin: Razor (CSHTML)🎜 🎜Buat paparan yang ditaip kuat: tidak ditandai🎜 🎜Buat sebagai paparan separa: nyahtanda🎜 🎜Gunakan reka letak atau halaman induk: nyahtanda🎜 🎜 🎜Kini anda boleh menggantikan kod lalai dengan yang berikut: 🎜

meteor npm install --save react react-dom

🎜Sekarang kita perlu mencipta Example.jsx yang dirujuk di atas, jadi buat fail itu dalam projek anda dan tambahkan JSX anda, sebagai ditunjukkan di bawah: 🎜

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

🎜Sekarang, jika anda mengklik Play dalam Visual Studio IDE, anda seharusnya melihat contoh kotak ulasan Hello World. 🎜 🎜Ini ialah tutorial terperinci tentang menulis komponen untuk ASP.NET. 🎜 🎜Jejak🎜 🎜Anda boleh menambahkan React dengan mudah pada mana-mana aplikasi Rails (3.2+) dengan menggunakan react-rails. Pertama, tambahkan permata: 🎜

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

🎜Dan pasang: 🎜

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,
};

🎜Kini anda boleh menjalankan skrip pemasangan: 🎜 rrreee 🎜Ini akan membawa kepada dua perkara: 🎜 🎜 🎜Fail manifes components.js terletak dalam app/assets/javascripts/components/; kod komponen. 🎜 🎜Tambah yang berikut pada application.js anda: 🎜 🎜 rrreee 🎜Kini kod .jsx akan dipaparkan dan anda boleh menambah sekeping React pada templat, contohnya: 🎜

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 开发领域的一个重要里程碑，它有潜力成为任何开发人员的必备工具。不要落后。

Atas ialah kandungan terperinci Sambungkan React dengan bahasa web lain yang digunakan secara meluas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!