今からはじめるReact.js〜React ver0.14〜

前回→今からはじめるReact.js〜スタイルの適用〜

ReactDOM

0.14でReactDOMがReactから分離されました。
そのため、render()やfindDOMNode()はReactDOMのメソッドを使用しなければなりません。

さっそく、react-domをインストールします。

index.jsは以下のように、インポートの追加と、最後のReact.renderの箇所を書き換えます。

npm install react-dom --save

index.js

var React = require('react');
var ReactDOM = require('react-dom');//react-domをインポート
var Header = require('./views/header.jsx');
var Body = require('./views/body.jsx');
var Footer = require('./views/footer.jsx');

//classNameでcssを指定
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <div className="main">
          <Body/>
        </div>
        <Footer/>
      </div>
    );
  }
});

//React.renderをReactDOM.renderに変更。
ReactDOM.render(
  <Index />,
  document.getElementById('content')
);

0.13からバージョンアップした際の注意事項ですが、今まで
React.findDOMNode()
と書いていたところも、
ReactDOM.findDOMNode()
と書く必要があります。
で、そもそもgetDOMNode()は使わないでねと。

サンプルソース

次回→今からはじめるReact.js〜propsとstate、それからrefs〜