2015年03月28日

React.js入門1

なんとなくReact.jsを入門してみる。
ひとまずは「Getting Started」のページからStarter Kitをダウンロード。

以下の様なファイル構成である。

.
├── README.md
├── build
│   ├── JSXTransformer.js
│   ├── react-with-addons.js
│   ├── react-with-addons.min.js
│   ├── react.js
│   └── react.min.js
└── examples
├── README.md
├── basic
│   └── index.html
├── basic-commonjs
│   ├── README.md
│   ├── index.html
│   ├── index.js
│   └── package.json
├── basic-jsx
│   └── index.html
├── basic-jsx-external
│   ├── example.js
│   └── index.html
├── basic-jsx-harmony
│   └── index.html
├── basic-jsx-precompile
│   ├── build
│   │   └── example.js
│   ├── example.js
│   └── index.html
├── jquery-bootstrap
│   ├── css
│   │   └── example.css
│   ├── index.html
│   ├── js
│   │   └── app.js
│   └── thirdparty
│   ├── bootstrap.min.css
│   └── bootstrap.min.js
├── jquery-mobile
│   ├── README.md
│   ├── index.html
│   └── js
│   └── app.js
├── quadratic
│   ├── example.js
│   └── index.html
├── server-rendering
│   ├── README.md
│   ├── jsapp
│   │   ├── package.json
│   │   └── src
│   │   └── App.js
│   ├── reactserver
│   │   ├── package.json
│   │   └── server.js
│   └── webapp
│   ├── index.php
│   └── static
│   └── bundle.js
├── shared
│   ├── css
│   │   └── base.css
│   └── thirdparty
│   ├── console-polyfill.js
│   ├── es5-sham.min.js
│   ├── es5-shim.min.js
│   └── jquery.min.js
└── transitions
├── index.html
└── transition.css


ルート直下にhelloworld.htmlを配置。

<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>


これをブラウザで確認するとでっかく「Hello, world!」と表示される。

まず、基本としてReactはJavaScriptシンタックスではなく、JSXシンタックスで記述しなくてはいけない。
AltJSで劣勢だったJSXがまさかの返り咲きである。JSXTransformer.jsがJSXのコンパイルをしてくれるのでちょっと試すにはこれを利用するとよい。実際にちゃんと使う場合はコンパイルをしたほうがよい。

React.render()は第1引数でコンポーネントを、第2引数でレンダリング場所を指定できる。

では次にちゃんとしたコンポーネントを作成する。React.createClass()でCommentBoxというコンポーネントを作成しReact.render()でページ内に出力する

var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('example')
);


次にCommentListコンポーネントとCommentFormコンポーネントから構成されるCommentBoxコンポーネントを作成し出力する。

var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('example')
);


さらにCommentコンポーネントを作成。Commentコンポーネントは呼び出し時の属性{this.props.xxx}と子要素{this.props.children}により内容が変化する。

var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
posted by ねこまんま at 08:25 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック