Verbinden Sie React mit anderen weit verbreiteten Websprachen

React ist eine in JavaScript geschriebene Ansichtsbibliothek, daher unabhängig von jeder Stack-Konfiguration und kann in fast jeder Webanwendung angezeigt werden, die HTML und JavaScript als Präsentationsebene verwendet.

Da React wie das „V“ in „MVC“ ist, können wir unseren eigenen Anwendungsstapel nach unseren Wünschen erstellen. Bisher haben wir in diesem Handbuch React in Kombination mit Express gesehen, einem Node ES6/JavaScript-basierten Framework. Weitere beliebte knotenbasierte Übereinstimmungen für React sind das Meteor-Framework und Facebooks Relay.

Wenn Sie die Vorteile des hervorragenden komponentenbasierten JSX-Systems von React, des virtuellen DOM und seiner blitzschnellen Renderzeiten in Ihren bestehenden Projekten nutzen möchten, können Sie dies durch die Implementierung einer der vielen Open-Source-Lösungen tun. p>

PHP

Da PHP eine serverseitige Skriptsprache ist, kann die Integration mit React in vielen Formen erfolgen:

• Verwenden Sie „react-php-v8js“.
• Serverseitige Anforderungs-/Antwort-Routing-Verarbeitung (mit einem Router wie Alto)
• JSON über json_encode() ausgeben
• Vorlagenverpackung, z. B. Zweige

Serverseitiges Rendering

Um React-Komponenten auf dem Server zu rendern, steht auf GitHub eine Bibliothek zur Verfügung.

Zum Beispiel können wir dieses Paket verwenden, um in PHP Folgendes zu tun:

<?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

Die Kombination von React mit einer beliebigen serverseitigen Skriptsprache bietet die Möglichkeit, Daten für React bereitzustellen und Geschäftslogik sowohl auf dem Server als auch auf dem Client anzuwenden. Es war noch nie einfacher, alte Apps in reaktionsfähige Apps umzuwandeln!

Mit PHP + Alto Router

Eine Beispielanwendung finden Sie in diesem Repository auf GitHub.

Konfigurieren Sie Ihr AltoRouter wie folgt:

<?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;

?>

Durch AltoRouter 设置为指定的路由提供应用程序页面服务，您只需将 ReactEinrichten der Bereitstellung von Anwendungsseiten für eine bestimmte Route können Sie einfach den React-Code in ein HTML-Tag einfügen, um mit der Verwendung Ihrer Komponente zu beginnen.

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

Stellen Sie sicher, dass Sie die React-Bibliothek einschließen und den HTML-Code in den Body-Tag einfügen, der von der PHP-Anwendung AltoRouter bereitgestellt wird, zum Beispiel:

  
    React Example
    
    
    
    
  
  
    
    
  

Laravel-Benutzer

Für das sehr beliebte PHP-Framework Laravel gibt es react-laravel eine Bibliothek, die React.js in Blade-Ansichten ermöglicht.

Zum Beispiel:

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

Das Flag

prerender weist Laravel an, die Komponente auf der Serverseite zu rendern und sie dann auf der Clientseite bereitzustellen.

Laravel 5.2 + React-Anwendungsbeispiel

Schauen Sie sich dieses großartige Starter-Repository an, um Beispiele dafür zu finden, wie Spharian Laravel + React ausführt.

Um React-Code in Laravel zu rendern, legen Sie den Quellcode der React-Datei im Body-Tag index.blade.php fest und fügen Sie beispielsweise Folgendes hinzu:

.NET

Mit dem ReactJS.NET-Framework können Sie React ganz einfach in Ihre .NET-Anwendungen einführen.

Installieren Sie das ReactJS.NET-Paket über den NuGET-Paketmanager für .NET in der Visual Studio-IDE.

Suchen Sie nach verfügbaren Paketen für „ReactJS.NET (MVC 4 und 5)“ und installieren Sie es. Sie können jetzt jeden .jsx-Erweiterungscode in Ihrer ASP.NET-Anwendung verwenden.

Fügen Sie Ihrem Projekt einen neuen Controller hinzu, um mit React + .NET zu beginnen, und wählen Sie „Empty MVC Controller“ für Ihre Vorlage aus. Klicken Sie nach der Erstellung mit der rechten Maustaste auf return View() und fügen Sie eine neue Ansicht mit den folgenden Details hinzu:

• Name anzeigen: Index
• Anzeige-Engine: Razor (CSHTML)
• Stark typisierte Ansicht erstellen: deaktiviert
• Als Teilansicht erstellen: deaktiviert
• Layout oder Masterseite verwenden: deaktiviert

Jetzt können Sie den Standardcode durch Folgendes ersetzen:

@{
    Layout = null;
}


    Hello React


    
    
    
    

Jetzt müssen wir das oben genannte Example.jsx，因此在您的项目中创建该文件并添加您的 JSX wie folgt erstellen:

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

Wenn Sie nun in der Visual Studio-IDE auf Play klicken, sollte das Beispiel für das Kommentarfeld „Hello World“ angezeigt werden.

Dies ist ein detailliertes Tutorial zum Schreiben von Komponenten für ASP.NET.

Track

Mit react-rails können Sie React ganz einfach zu jeder Rails-Anwendung (3.2+) hinzufügen. Fügen Sie zunächst einfach den Edelstein hinzu:

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

Und installieren:

bundle install

Jetzt können Sie das Installationsskript ausführen:

rails g react:install

Dies wird zu zwei Dingen führen:

• components.js 清单文件位于 app/assets/javascripts/components/ Hier geben Sie Ihren gesamten Komponentencode ein.
• Fügen Sie Folgendes zu Ihrem application.js hinzu:

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

Jetzt .jsx wird der Code gerendert und Sie können der Vorlage einen Teil von React hinzufügen, zum Beispiel:

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

Das obige ist der detaillierte Inhalt vonVerbinden Sie React mit anderen weit verbreiteten Websprachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!