2023-09-03

将 React 与其他广泛使用的 Web 语言连接起来


将 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中文网其它相关文章!

https://www.php.cn/faq/601428.html

发表回复

Your email address will not be published. Required fields are marked *