React TutorialをES6で書いてみた

[React Tutorial](https://facebook.github.io/react/docs/tutorial.html)をFetching from the serverの前のみですが`ES6+babel`で書いてみました。

## Directory構造

```bash:directory構造
$ tree
.
├── index.html
├── index.js
├── modules
│   ├── Comment.js
│   ├── CommentBox.js
│   ├── CommentForm.js
│   └── CommentList.js
└── webpack.config.js
```

## index.html
```html:index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>ES2015 and React and Redux Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>

<body>
  <div id="content"></div>
  <script src="dist/index.js"></script>
</body>
<html>
```

## index.js
```js:index.js
import React from 'react'
import ReactDOM from 'react-dom'
import CommentBox from './modules/CommentBox'

CommentBox
```

## modules/CommentBox.js
```js:modules/CommentBox.js
import React from 'react'
import ReactDOM from 'react-dom'
import CommentList from './CommentList'
import CommentForm from './CommentForm'

const CommentBox =  React.createClass({
  render() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    )
  }
})

const data = [
  {id: 1, author: 'Pete Hunt', text: 'This is one comment'},
  {id: 2, author: 'Jordan Walke', text: 'This is *another* comment'}
]

export default ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
)
```

## modules/CommentList.js
```js:modules/CommentList.js
import React from 'react'
import Comment from './Comment'

export default React.createClass({
  render() {
    const commentNodes = this.props.data.map((comment) => {
      return (
          <Comment author={comment.author} key={comment.id}>
            {comment.text}
          </Comment>
      )
    })
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    )
  }
})
```

## modules/CommentForm.js
```js:modules/CommentForm.js
import React from 'react'

export default React.createClass({
  render() {
    return (
      <div className="commentForm">
        Hello, World!I am a commentForm.
      </div>
    )
  }
})
```
## modules/Comment.js
```js:modules/Comment.js
import React from 'react'
import 'marked'

export default React.createClass({
  rawMarkup: function() {
    let rawMarkup = marked(this.props.children.toString(), {sanitize: true})
    return { __html: rawMarkup }
  },
  
  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    )
  }
})
```
## webpack.config.js
```js:webpack.config.js
'use strict';

var webpack = require('webpack');
var path = require('path');

var env = process.env.NODE_ENV;
var config = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader?presets[]=react&presets[]=es2015&cacheDirectory'],
        exclude: /node_modules/
      }
    ]
  },
  entry: {
    'index': 'index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ],
  resolve: {
    extensions: ['', '.json', '.js', '.jsx'],
    modulesDirectories: ['node_modules', __dirname]
  },
  externals: {
    // externalsに書くとimport 'jQuery'やimport 'marked'をすることで
    // <script src="..."></script>から取得されていれば使用できる
    'jquery': 'jQuery',
    'marked': 'marked'
  }
};

module.exports = config;
```

データの流れがわかりやすくて、`React`良いですね！好きになれそうです。