現代的な React の書き方へのリンク

React 初心者を対象とした記事です。昨日の記事からの続き。

• React、Redux、D3を用いたアニメーション | プログラミング | POSTD
  • class App extends Component { ... } ってなんだろ
    • React v0.13.0 Beta1でclassでComponentが作れるようになった - blog.koba04.com
    • React が ES6 classes 使ってカッコよく書けるようになったらしい
  • this.refs.svg ってなんだろ
    • 今からはじめるReact.js〜propsとstate、それからrefs〜 - Qiita
    • ReactDOM.findDOMNode() というのと refs というのを使って DOM を参照できるらしい
    • getDOMNode() というのもあったが Ver0.14 で非推奨となった
    • 用途としては HTML の name 属性みたいな感じ？
  • App.propTypes = { ... } ってなんだろ
    • React.jsのProp - Qiita
    • (簡易的な) 型チェック？
  • import そういや最近見るようになったけどよくわからない…
    • 【古い記事】Babelで理解するEcmaScript6の import / export - Qiita
    • 記事では MDN 見た方が良いと書かれてるけど require() 使った書き方との比較が分かりやすかったので

ES6版React.jsチュートリアル - Qiita もオススメ。

差分で見る現代化のようす

Rewrite in ES6 style · tyru/hello-react@22d4e7e · GitHub

-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-const Hello = React.createClass({
-  render: function() {
+class App extends React.Component {
+  render() {
     return (
-      <div className="container">Hello {this.props.name}</div>
+      <div className="container">Hello React in ES6 style</div>
     );
   }
-})
+}
 
-ReactDOM.render(<Hello name="React" />, document.getElementById("app"));
+ReactDOM.render(
+  <App />,
+  document.getElementById("app")
+);