React を他の広く使用されている Web 言語と接続する-PHPチュートリアル-php.cn

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

王林

リリース： 2023-09-03 13:58:02

オリジナル

758 人が閲覧しました

将 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 コンポーネントをサーバー上でレンダリングするために、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)厳密に型指定されたビューの作成: チェックなし

これで、デフォルトのコードを次のものに置き換えることができます:
次に、上記で参照した
を作成する必要があるため、そのファイルをプロジェクトに作成し、次のように

を追加します。リーリー

ここで、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 の一部をテンプレートに追加できます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:erb;toolbal:false;"> </pre><div class="contentsignin">ログイン後にコピー</div></div> <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 开发领域的一个重要里程碑，它有潜力成为任何开发人员的必备工具。不要落后。