React を他の広く使用されている Web 言語と接続する

#React は JavaScript で書かれたビュー ライブラリであるため、スタック構成に依存せず、プレゼンテーション層として HTML と JavaScript を使用するほぼすべての Web アプリケーションに表示できます。

React は「MVC」の「V」に似ているため、独自のアプリケーション スタックを自由に作成できます。このガイドではこれまで、React と Node ES6/JavaScript ベースのフレームワークである Express の組み合わせを見てきました。 React 用の他の人気のあるノードベースのマッチングには、Meteor フレームワークと Facebook の Relay があります。

React の優れたコンポーネントベースの JSX システム、仮想 DOM、およびその超高速レンダリング時間を既存のプロジェクトで活用したい場合は、数多くのオープン ソース ソリューションの 1 つを実装することで実現できます。 p>

PHP

PHP はサーバーサイドのスクリプト言語であるため、React との統合はさまざまな形で実現できます。

react-php-v8js を使用する
サーバー側のリクエスト/レスポンス ルーティング処理 (Alto などのルーターを使用)
json_encode() による JSON の出力
テンプレートのパッケージ化(ブランチなど)

サーバーサイドレンダリング

React コンポーネントをサーバー上でレンダリングするために、GitHub で利用可能なライブラリがあります。

たとえば、このパッケージを使用して、

PHP: で次の操作を実行できます。 リーリー

React を任意のサーバーサイド スクリプト言語と組み合わせることで、React にデータを提供し、サーバーとクライアントにビジネス ロジックを適用できるようになります。古いアプリをレスポンシブなアプリに変換するのがかつてないほど簡単になりました。

PHP Alto Router の使用

サンプル アプリケーションについては、GitHub のこのリポジトリをチェックしてください。

AltoRouter

を次のように設定します: リーリー

AltoRouter

設定を使用してアプリケーション ページを指定されたルートに提供することで、HTML タグに React コードを含めるだけでコンポーネントの使用を開始できます。 JavaScript： p> リーリー

React ライブラリを必ずインクルードし、PHP

AltoRouter

アプリケーションによって提供される body タグ内に HTML を配置してください。例: リーリー Laravel ユーザー

非常に人気のある PHP フレームワーク Laravel には、ブレード ビューで React.js を有効にする

react-laravel

ライブラリがあります。 ＃＃＃例えば：＃＃＃ リーリー

prerender

フラグは、サーバー側でコンポーネントをレンダリングしてからクライアント側にマウントするように Laravel に指示します。

Laravel 5.2 React アプリケーションの例 Spharian が Laravel React を実行している例については、この優れたスターター リポジトリをチェックしてください。

Laravel で React コードをレンダリングするには、

index.blade.php

body タグに React ファイルのソース コードを設定します。たとえば、次のコードを追加します。 リーリー ＃＃＃。ネット＃＃＃

ReactJS.NET フレームワークを使用すると、.NET アプリケーションに React を簡単に導入できます。

.NET 用の NuGET パッケージ マネージャーを介して ReactJS.NET パッケージを Visual Studio IDE にインストールします。

「ReactJS.NET (MVC 4 および 5)」の利用可能なパッケージを検索してインストールします。これで、ASP.NET アプリケーションで任意の .jsx 拡張コードを使用できるようになりました。

React .NET の使用を開始するには、プロジェクトに新しいコントローラーを追加し、テンプレートに「空の MVC コントローラー」を選択します。作成したら、

return View()

を右クリックし、次の詳細を含む新しいビューを追加します:

ビュー名: インデックス

表示エンジン: Razor (CSHTML) 厳密に型指定されたビューの作成: チェックなし

部分ビューとして作成: チェックなし
レイアウトまたはマスターページを使用: チェックなし
• これで、デフォルトのコードを次のものに置き換えることができます:
リーリー
• 次に、上記で参照した
Example.jsx
• を作成する必要があるため、そのファイルをプロジェクトに作成し、次のように
JSX

を追加します。 リーリー

ここで、Visual Studio IDE で

Play

をクリックすると、Hello World コメント ボックスの例が表示されるはずです。 これは、ASP.NET のコンポーネントの作成に関する詳細なチュートリアルです。 ＃＃＃追跡＃＃＃ react-rails

を使用すると、React を Rails (3.2) アプリケーションに簡単に追加できます。まず、gem を追加するだけです:

リーリー そしてインストール: リーリー

これで、インストール スクリプトを実行できるようになります:

リーリー

これにより、次の 2 つのことが起こります:

components.js マニフェスト ファイルは

app/assets/javascripts/components/

にあり、ここにすべてのコンポーネント コードを配置します。

以下を

application.js

に追加します:

リーリー
• これで、.jsx コードがレンダリングされ、React の一部をテンプレートに追加できます。例: <pre class="brush:erb;toolbal:false;"> </pre> <h3>Ruby JSX</h3> <p>Babel 是 <code class="inline">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 中国語 Web サイトの他の関連記事を参照してください。