高手教你如何将 React 与其它 Web 开发语言高效结合混编使用

阅读 1052
收藏 35
2017-05-23
原文链接:www.igeekbar.com

React是一个用JavaScript编写的视图库,所以它几乎可以在任何使用HTML和JavaScript作为其表示层的Web应用程序中出现,但同时,这也意味着它对任何栈配置都是不可预知的。。。


React一般被视为‘MVC’中的‘V’,你可以按照自己的喜好来创建应用程序堆栈。除了一个基于ES6 / JavaScript的Node框架之外,React中其他比较流行的Node框架还有Meteor和Facebook的delay 。


那么重点来了,如果你想充分利用React超赞的基于组件的JSX系统,以及虚拟节点和快到飞起的渲染来让你的项目更加666,你可以在你的项目中使用任何一个开源的解决方案。


来,坐稳了,下面带你起飞!!!


PHP

PHP作为一个服务器端的脚本语言,可以与React通过多种形式结合:


服务器端渲染

为了在服务器上呈现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 '<div id="here">' . $rjs->getMarkup() . '</div>';
 
// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js
 
// init client
echo '<script>' . $rjs->getJS("#here") . '</script>'; 
 
// repeat setComponent(), getMarkup(), getJS() as necessary
// to render more components


把React和任何一门服务器端的脚本语言结合起来的强大之处就是,你可以duangduangduang地把你的数据输进React, 然后把你的业务逻辑同时运用在服务器端和客户端。把一款旧的应用程序更新为“活动”应用从未如此简单过,就是这么自信!!!


使用PHP+Alto Router

来看一个例子,repository on 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标记中,并开始使用你的组件。

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>
<html>
  <head>
    <title>React Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="myContent"></div>
    <script type="text/jsx;harmony=true" src="assets/js/main.js"></script>
  </body>
</html>


Laravel Users

对于很受欢迎的PHP框架Laravel来说,有一个react-laravel库,可以从你的Blade视图中正确的启用React.js。

例如:

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

prerender标志告诉Laravel,喂你该在服务器端渲染组件啦 ,还有要安装到客户端(Laravel真惨。。。)。


Laravel 5.2 + React App 示例

再来看看由Spharian创建的Laravel + React的一个例子,starter repository


为了让你的React代码顺利的在Laravel中渲染,千万千万要记得把React文件源放在”index.blade.php body“标签中,像这样:

<script src="{{ asset('js/my-react-code.js') }}"></script>


.NET


通过使用ReactJS.NET框架,你可以轻松将React运用到你的.NET应用中~

你需要做的就是,通过NuGET包管理器为.NET 安装ReactJS.NET包到Visual Studio IDE中。

搜索“ ReactJS.NET(MVC 4和5)”可用的包然后安装。现在你就可以在asp.net应用程序中使用任何.jsx扩展代码啦(看到胜利的曙光了吗!)。

在你的项目中增加一个新的控制器,以便使用React+.NET, 然后为你的模板选择一个“Empty MVC Controller”。创建好之后,鼠标右击 return View(), 然后根据下面的步骤来添加一个新的视图:

  • View name: Index
  • View Engine: Razor (CSHTML)
  • Create a strongly-typed view: Unticked
  • Create as a partial view: Unticked
  • Use a layout or master page: Unticked

然后用替换默认代码:

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="@Url.Content("~/Scripts/Example.jsx")"></script>
</body>
</html>


现在我们需要创建一个上面引用的Example.jsx,所以要在你的项目中新建一个文件,然后像下面这样来写jsx:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);


到这里,就算是大功告成啦,如果你现在点一下play , 你就可以看到那句经典的"Hello World"! 


Rails


通过使用react-rails,您可以轻松地将React添加到任何Rails(3.2+)应用程序中。只需添加gem:

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


安装:

bundle install


现在可以运行安装脚本:

rails g react:install


这将产生两件事情:

  • 一个components.js清单文件app/assets/javascripts/components/; 这是您将所有组件代码放在哪里。
  • 添加以下到你application.js
//= require react
//= require react_ujs
//= require components


现在.jsx代码将被渲染,你可以添加一个React块到你的模板,例如:

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>


Ruby JSX

Babel 是 Ruby执行react-rails gem的核心,你可以像下面这样进行配置:

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为后缀的文件都将被转换到asset pipline中。

想获得关于react-rails的更多信息,来看看官方文档~


Python


要安装python-react, 可以像下面这样使用pip:

pip install react


你可以在Python app中呈现React代码,方法是提供.jsx组件的路径和使用渲染服务器。通常来讲,这是一个独立的Node.js过程。

要运行渲染服务器,请遵循这个指南

现在你可以启动你的服务器:

node render_server.js


启动你的python应用程序:

python app.py


然后在浏览器中加载http://127.0.0.1:5000以查看您的React代码呈现效果。


Django


react添加你的INSTALLED_APPS, 然后进行以下配置:

INSTALLED_APPS = (
    # ...
    'react',
)
 
REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}


Meteor


通过以下步骤将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(<App />, 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) => (
      <Headline key={headline._id} headline={headline} />
    ));
  }
  
  render() {
    return (
      <div className="container">
        <header>
          <h1>The latest headlines</h1>
        </header>
  
        <ul>
          {this.renderHeadlines()}
        </ul>
      </div>
    );
  }
}


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准备的官方文档


No More{{handlebars}}

需要注意的一点是:当使用Meteor with React时,默认的{{handlebars}}模板系统不再使用,因为React在项目中已被禁用。


所以,你可以在你的JS 中使用{{> TemplateName}}Template.templateName用于帮助和事件,你可以在View组件中定义React.component的所有子集。


结论


React几乎可以被用在所有的语言中来使用HTML表示层。React的好处是它可以用来开发大量潜在的软件产品。


React使UI 视图层成为基于组件的。使用任何堆栈来进行逻辑操作意味着我们拥有通用的语言来表示接口,设计人员可以利用这点来进行Web开发。


不管是否有设备或平台限制,React都通过部署来统一项目的接口、品牌和总体应急措施。还有不管是自由职业、基于客户的工作或内部大型组织,React都将确保你的代码是可重复使用的。


你可以创建自己定制的组件库,并在新项目中立即开展工作,或者重新构建旧的组件,快速,轻松地创建反应灵活的等距应用程序界面。


React是Web开发中的一个重要里程碑,它hin有潜力成为你收藏夹中的重要工具哟~



评论