albatrosary's blog

UI/UXとエンタープライズシステム

ngReact - AngularJS Advent Calendar 2015

Angular React

Yeomanでネタになるジェネレータ無いかなと探していたらngReact成るものがあったのでさっと見てみます。このエントリーは「AngularJS Advent Calendar 2015」12月15日の記事です。

github.com

はじめに

ngReactをgit cloneする。ディレクトリ移動してbower install && npm installを実行。http-serverとかでアプリを動かす。examplesというディレクトリがあるので適当に触る&ソースを眺める。「ほうほう」という感じだと思う。

インストール

bowerでは

bower install ngReact

npmでは

npm install ngreact

使い方

Angular、React、React DOM、ngReactを読み込む

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>

angularにreactサービスを読み込ませる

<script>
    angular.module('app', ['react']);
</script>

機能

react-componentディレクティブ

angular.module('app', ['react'])
  .controller('helloController', function($scope) {
    $scope.person = { fname: 'Clark', lname: 'Kent' };
  });

Reactコンポーネントは次のように定義できる

/** @jsx React.DOM */
var HelloComponent = React.createClass({
  propTypes: {
    fname : React.PropTypes.string.isRequired,
    lname : React.PropTypes.string.isRequired
  },
  render: function() {
    return <span>Hello {this.props.fname} {this.props.lname}</span>;
  }
})
app.value('HelloComponent', HelloComponent);

react-componentディレクティブを定義する

<body ng-app="app">
  <div ng-controller="helloController">
    <react-component name="HelloComponent" props="person" watch-depth="reference"/>
  </div>
</body>

簡単なサンプル

コントローラー：

var app = angular.module( 'app', ['react'] );

function MainController() {
  this.person = { fname: 'Clark', lname: 'Kent' };
}

app.controller( 'mainCtrl', MainController );

var Hello = React.createClass( {
  propTypes: {
    fname: React.PropTypes.string.isRequired,
    lname: React.PropTypes.string.isRequired
  },

  render: function() {
    return React.DOM.span( null,
      'Hello ' + this.props.fname + ' ' + this.props.lname
    );
  }
} );

app.value( 'Hello', Hello );

app.directive( 'hello', function( reactDirective ) {
  return reactDirective( Hello );
} );

ディレクティブの呼び出し

  <body ng-app="app" ng-controller="mainCtrl as ctrl">
    <div class="content">
      <div class="header">
        <h1>
          <div><react-component name="Hello" props="ctrl.person"/></div>
          <small>
            <code>&lt;react-component name="Hello" props="ctrl.person"/&gt;</code>
          </small>
        </h1>
        <h1>
          <div><hello fname="ctrl.person.fname" lname="ctrl.person.lname"/></div>
          <small>
            <code>&lt;hello fname="ctrl.person.fname" lname="ctrl.person.lname"/&gt;</code>
          </small>
        </h1>
      </div>

      <form class="pure-form">
        <fieldset>
          <legend>Enter Name</legend>
          <input type="text" ng-model="ctrl.person.fname" placeholder="First Name"/>
          <input type="text" ng-model="ctrl.person.lname" placeholder="Last Name"/>
        </fieldset>
      </form>

    </div>

最後に

ReactとAngularの使い方としてはナカナカと思います。