React TutorialをFetching from the serverの前のみですがES6+babelで書いてみました。
Directory構造
directory構造
$ tree
.
├── index.html
├── index.js
├── modules
│ ├── Comment.js
│ ├── CommentBox.js
│ ├── CommentForm.js
│ └── CommentList.js
└── webpack.config.js
index.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
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import CommentBox from './modules/CommentBox'
CommentBox
modules/CommentBox.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
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
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
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
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良いですね！好きになれそうです。