与其他流行的Web语言桥接React

最新推荐文章于 2024-04-24 22:50:14 发布

cunjie3951

最新推荐文章于 2024-04-24 22:50:14 发布

阅读量125

点赞数

文章标签： java react vue python js ViewUI

React是一个用JavaScript编写的视图库，因此它与任何堆栈配置无关，并且几乎可以在任何使用HTML和JavaScript作为其表示层的Web应用程序中显示。

由于React在'MVC'中充当'V'，我们可以根据自己的喜好创建自己的应用程序堆栈。到目前为止，在本指南中，我们已经看到React与Express（基于Node ES6 / JavaScript的框架）一起使用。其他流行的基于Node的React匹配是Meteor框架和Facebook的Relay。

如果您想在现有项目中利用React出色的基于组件的JSX系统，虚拟DOM及其超快的渲染时间，可以通过实现众多开源解决方案之一来实现。

的PHP

由于PHP是一种服务器端脚本语言，因此与React的集成可以采用几种形式：

使用react-php-v8js
服务器端请求/响应路由处理（使用路由器，例如Alto ）
通过json_encode（）进行 JSON输出
模板包装，例如树枝

服务器端渲染

为了在服务器上渲染React组件， GitHub上提供了一个库。

例如，我们可以使用此软件包在PHP执行以下操作：


   
   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 '

将React与任何服务器端脚本语言结合使用的能力是能够向React提供数据，并在服务器和客户端上应用您的业务逻辑。将旧应用程序更新为Reactive应用程序从未如此简单！ ###使用PHP + Alto Router作为示例应用程序，请查看此[GitHub上的存储库]（https://github.com/MyKungFuIsGood/php-router-with-reactjs）。如此配置您的“ AltoRouter”：


   
   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标记中并开始使用组件。

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标签内，例如：

<!DOCTYPE html>React Example

Laravel用户

对于广受欢迎的PHP框架Laravel，有react-laravel库，该库可从Blade视图内部启用React.js。

例如：

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

prerender标志告诉Laravel在服务器端渲染组件，然后将其安装到客户端。

示例Laravel 5.2 + React App

在这个出色的入门资料库中查看一个使Spharian工作的Laravel + React的示例。

要在Laravel内部渲染您的React代码，请通过添加以下示例，将您的React文件的源代码设置在index.blade.php body标签中：

。净

使用ReactJS.NET框架，您可以轻松地将React引入.NET应用程序。

通过用于.NET的NuGET包管理器将ReactJS.NET包安装到Visual Studio IDE。

在可用的软件包中搜索“ ReactJS.NET（MVC 4和5）”并进行安装。现在，您将可以在asp.net应用程序中使用任何.jsx扩展代码。

在您的项目中添加一个新的控制器以开始使用React + .NET，然后为模板选择“ Empty MVC Controller”。创建后，右键单击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

这将导致两件事：

app/assets/javascripts/components/ components.js清单文件；在这里，您将放置所有组件代码。
将以下内容添加到您的application.js ：

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

现在， .jsx代码将被渲染，您可以在模板中添加一个React块，例如：

<%= react_component('HelloMessage', name: 'John') %>

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

现在，您可以使用Python应用程序渲染React代码，方法是提供.jsx组件的路径，并为该应用程序提供渲染服务器。通常，这是一个单独的Node.js进程。

要运行渲染服务器，请遵循以下简单的简短指南。

现在，您可以这样启动服务器：

node render_server.js

启动您的python应用程序：

python app.py

并在浏览器中加载http://127.0.0.1:5000以查看您的React代码渲染。

Django的

添加react您的INSTALLED_APPS react ，并提供一些配置，如下所示：

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

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

流星

要将React添加到您的流星项目，请通过以下步骤进行：

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定义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) => (
      <Headline key={headline._id} headline={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 (

{this.props.headline.text}
）; }} Headline.propTypes = {//此组件获取要通过React道具显示的标题。 //我们可以使用propTypes来指示它是必需的标题：PropTypes.object.isRequired，};
Meteor已准备好进行React并拥有正式文档。

没有更多的{{handlebars}}

需要注意的重要一点：当将Meteor与React一起使用时，默认的{{handlebars}}模板系统不再使用，因为由于React在项目中而已失效。

因此，您无需在JS中为帮助器和事件使用{{> TemplateName}}或Template.templateName ，而是在View组件中定义所有内容，它们都是React.component子类。

结论

实际上，React可以用于任何使用HTML表示层的语言。大量潜在的软件产品可以充分利用React的优势。

React使UI View层成为基于组件的。与任何堆栈进行逻辑协作意味着我们拥有一种通用的界面语言，设计人员可以在Web开发的各个方面使用这些语言。

无论设备或平台的限制如何，React都会在所有部署中统一我们项目的界面，品牌和一般应急性。在自由职业者，基于客户的工作或大型组织内部的工作方面，React均可确保您的项目可重复使用的代码。

您可以创建自己的定制组件库，并立即在新项目中进行工作或翻新旧项目，从而快速，轻松地创建完全反应性的等距应用程序界面。

React是Web开发中的重要里程碑，它有可能成为任何开发人员收藏中必不可少的工具。不要落伍。

翻译自: https://code.tutsplus.com/tutorials/bridging-react-with-other-popular-web-languages--cms-25205

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
与其他流行的Web语言桥接React

React是一个用JavaScript编写的视图库，因此它与任何堆栈配置无关，并且几乎可以在任何使用HTML和JavaScript作为其表示层的Web应用程序中显示。由于React在'MVC'中充当'V'，我们可以根据自己的喜好创建自己的应用程序堆栈。到目前为止，在本指南中，我们已经看到React与Express（基于Node ES6 / JavaScript的框架）一起使用。其他流...
复制链接

扫一扫