読者です 読者をやめる 読者になる 読者になる

Reactの公式チュートリアルをやってみた&メモ

f:id:syonx:20150315005423p:plain

  • React v0.13.0

感想

  • 身構えるほど難しくないよ
  • 覚えることって実は意外と少ない
  • 雑に言うと、今までDOMの中に直接書いていたことをJS側に寄せただけ、だがそれがいい
  • 準備時以外index.htmlを触っていない → 記述箇所の集約、影響範囲の限定

公式 Getting Started

  • Getting Started | React
  • HTMLに react.js と JSXTransformer.js を読み込んで使う
  • <script type="text/jsx">の中に JSX syntax でスクリプトを書く
    • <script type="text/jsx" src="src/helloworld.js"></script>で外部化
  • JSX → JS のブラウザ内変換方式ではコンソールに警告が出る

    You are using the in-browser JSX transformer. Be sure to precompile your JSX for production

  • npm の react-tools を使って jsx を js に自動変換しましょう
  • $ jsx --watch src/ build/で src フォルダ内の変更を監視します
    • src/helloworld.js(JSX) を変更するとbuild/helloworld.js(JS) が吐かれる
    • script type="text/jsx"と JSXTransformer.js によるブラウザ内変換が不要になる
    • HTMLに読み込み指定するのはJSXではなくJSのbuild/helloworld.js
  • ちょっと試す分には別にnpm使う必要なかった…

公式 Tutorial

Tutorial | React
コメントボックスのコンポーネント作成チュートリアル

f:id:syonx:20150315005624p:plain

React.render

ReactComponent render(
  ReactElement element,  // React.createClassで作ったやつ
  DOMElement container,  // 配置先のDOM要素
  [function callback]
)
  • 一度描画すると以降は変更が必要な箇所をReactが判断してくれて差分更新となる
  • 現状、第2引数のcontainerに指定した先の要素内を上書きする動きとなっている
  • 将来的にすでに存在する子要素を上書きすることなく差し込むことが可能になるかも*1
  • コンポーネントはネストできる
    • CommentBox
      • CommentList
        • Comment
      • CommentForm
    • React.render を呼ぶタイミングに注意。描画に必要なオブジェクトを読み込んでから(当然)。

Using props

<Comment author="Pete Hunt">This is <b>one</b> comment</Comment>
<div className="comment">
  <h2 className="commentAuthor">
    {this.props.author}  // Pete Hunt
  </h2>
  {this.props.children}  // This is <b>one</b> comment
</div>
  • コンポーネントオブジェクトを文字列化するにはtoString()
    • Markdown記述をHTMLに変換するライブラリ(Showdown)を使うには文字列として渡す
    • 返ってくるのはタグを含む文字列
    • そのまま描画するとタグが解釈されずに表示される
    • 文字列を信用してHTMLとしてレンダリングするAPIも用意しているが、意図的に難しくしている

Reactive state

  • props are immutable
  • データが変化するものはstateを使う
    • this.setState()で変更を適用すると再描画される
  • getInitialStateコンポーネントが生成された時に一度だけ呼ばれる
  • componentDidMount is a method called automatically by React when a component is rendered.

submit

  • onSubmit={this.handleSubmit}で処理を紐付け
    • キャメルケース
    • preventDefault()する(React特有の話ではない)
  • コンポーネントのDOM要素属性にてref="author"と書くと、
    • React.findDOMNode(this.refs.author)で生DOMを参照できる
  • コンポーネントで発火したイベントの親への伝搬は意図して記述する必要がある
  • AjaxでPOSTしてサーバに反映し、それを取得してから描画していては反応が遅く感じられる

Congrats!