react.js first touch

生html嫌いでやんす。->　jade　でテンプレ作れてcoffee　script　で　React　の恩恵を受けれるということでこれで入門。

参考
https://gist.github.com/uzimith/145a0cf8e342dc46ac96

git　clone
cd
npm　install
gulp　build
gulp　watch

みそ

index.coffee

React = require('react')
jade = require('react-jade')
_ = require('lodash')
 
class Counter extends React.Component
  constructor: () =>
    @state = { count: 0 }
  render: () =>
    jade.compile("""
      #counter
        span 合計 :
        span= count
    """)(_.assign {}, @, @props, @state)
 
React.render(React.createFactory(Counter)(), document.getElementById('container'))

しゅごい

coffee　の　constructor　が使えるね！　getInitialState　の中身が　set　になっていくコード打たなくてすむね！
react−jade　さんがさらっとテンプレート関数にしてくれるよ！
本家との違いが　@props.val1　とか　@state.val2　の表現が　lodash　注入のおかげで、　jadeの中では　val1,　val2　になるから慌てないようにね。
jade　の変数代入記法は忘れやすいけど、エスケープ回避したかったら　=　を　!=　に変えるってこと

これでチュートリアルをやっていきます。

Component 作るまで

# -------------------------------------
# Components
# -------------------------------------

class CommentBox extends React.Component
  displayName: "CommentBox"
  render: () =>
    return jade.compile("""
      .commentBox
        h1 Comments
        CommentList
        CommentForm
    """)(_.assign {}, @, @props, @state)

class CommentList extends React.Component
  render: () =>
    return jade.compile("""
      .commentList Hello, world! I am a CommentList.
    """)(_.assign {}, @, @props, @state)

class CommentForm extends React.Component
  render: () =>
    return jade.compile("""
      .commentForm Hello, world! I am a CommentForm.
    """)(_.assign {}, @, @props, @state)

Box>(List+Form) のコンポーネント関係です。この場合は

# -------------------------------------
# Rendering Trick
# -------------------------------------

React.render(
  React.createFactory(CommentBox)(),
  document.getElementById('app')
)

以下では省略するお

jade compile と　assign　を抜くと死ぬほどまだ短いんだがな。。。

親から子へ渡すとき

class CommentBox extends React.Component
  displayName: "CommentBox"
  render: () =>
    return jade.compile("""
      div(className = "commentBox")
        h1 Comments
        CommentList
        CommentForm
    """)(_.assign {}, @, @props, @state)

class CommentList extends React.Component
  render: () =>
    return jade.compile("""
      .commentList
        Comment(author = "Pete Hunt") This is one comment
        Comment(author = "Jordan Walke") This is *author* comment
    """)(_.assign {}, @, @props, @state)

class CommentForm extends React.Component
  render: () =>
    return jade.compile("""
      .commentForm Hello, world! I am a CommentForm.
    """)(_.assign {}, @, @props, @state)

class Comment extends React.Component
  render: () =>
    return jade.compile("""
      .comment
        h2.commentAuthor= author
        span= children
    """)(_.assign {}, @, @props, @state)

ここらへんから　jade　がちゃんと振舞うのかものすごく不安
children　でもおやの情報をもってきてくれました。よかった。

外部の　markd　で変換してぶち込む

    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

これが　marked　名前空間を提供する。

class CommentBox extends React.Component
  displayName: "CommentBox"
  render: () =>
    return jade.compile("""
      .commentBox
        h1 Comments
        CommentList
        CommentForm
    """)(_.assign {}, @, @props, @state)

class CommentList extends React.Component
  render: () =>
    return jade.compile("""
      .commentList
        Comment(author = "Pete Hunt") This is one comment
        Comment(author = "Jordan Walke") This is *author* comment
    """)(_.assign {}, @, @props, @state)

class CommentForm extends React.Component
  render: () =>
    return jade.compile("""
      .commentForm Hello, world! I am a CommentForm.
    """)(_.assign {}, @, @props, @state)

class Comment extends React.Component
  render: () =>
    @rawMarkup = marked(@props.children.toString(), {sanitize: true})
    return jade.compile("""
      .comment
        h2.commentAuthor= author
        span= rawMarkup
    """)(_.assign {}, @, @props, @state)

*印で　太字になりました。@rawMarkup　の場所とかはよくないかもしれないが、これで動く。

テンプレ関数に配列を投げるところまで

# -------------------------------------
# Configuration
# -------------------------------------

datas = [
  {
    author: "Pete Hunt"
    text: "This is one comment"
  }
  {
    author: "Jordan Walke"
    text: "This is *another* comment"
  }
]

# -------------------------------------
# Components
# -------------------------------------

class CommentBox extends React.Component
  displayName: "CommentBox"
  constructor: () =>
    @state = {datas: datas}
  render: () =>
    return jade.compile("""
      .commentBox
        h1 Comments
        CommentList(datas = datas)
        CommentForm
    """)(_.assign {}, @, @props, @state)

class CommentList extends React.Component
  render: () =>
    commentNodes = @props.datas.map (comment) =>
      return jade.compile("""
        Comment(author = comment.author)= comment.text
      """)(_.assign {}, @, @props, @state)
    return jade.compile("""
      .commentList= commentNodes
    """)(_.assign {}, @, @props, @state)

class CommentForm extends React.Component
  render: () =>
    return jade.compile("""
      .commentForm Hello, world! I am a CommentForm.
    """)(_.assign {}, @, @props, @state)

class Comment extends React.Component
  render: () =>
    @rawMarkup = marked(@props.children.toString(), {sanitize: true})
    return jade.compile("""
      .comment
        h2.commentAuthor= author
        span!= rawMarkup
    """)(_.assign {}, @, @props, @state)

なんか全然動かなそうだけど、これで動く。
constructor 部分は getInitialState: () => return {datas: datas} でも動く。

これでチュートリアルの半分までいきました。
冗長な部分が多いが、部分で見ればまだだいしたことしてません。