reactjs

Hello React.js

More than 1 year has passed since last update.

というわけで、今回はHello World的なComponentを作ってみたいと思います。

基本的にはReact.createClassでComponentを作って、それらのComponentを組み合わせてページを作ってReact.renderでDOMと紐付けることで表示を行います。


JSXを使う

JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。

といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。

また、browserifyでreactifyを使うなどして変換する方法もあります。

var React = require('react');

var Hello = React.createClass({
render: function() {
return (
<div className="container">Hello {this.props.name}</div>
);
}
})

React.render(<Hello name="React" />, document.getElementById("app"));

ちなみにdivもReactのComponentです。


JSX + ES6, 7のsyntax(一部)

JSXのtransformにはharmony optionがあって、これを有効にすることで一部のES6, 7のsyntaxを使用することが出来ます。

var React = require('react');

var Hello = React.createClass({
render() {
return (
<div className="container">Hello {this.props.name}</div>
);
}
})

React.render(<Hello name="React" />, document.getElementById("app"));

ArrowFunctionなんかはmapと組み合わせて使うととても便利です。

var items = this.props.items.map((item) => {

return <div>{item.name}</div>;
});


without JSX

JSXなしで書くとこんな感じです。Hello Componentのrenderメソッド以外にもReact.renderでのHello Componentの指定も変わっているのがわかると思います。

var React = require('react');

var Hello = React.createClass({
render: function() {
return React.DOM.div({className: 'container'}, 'Hello ' + this.props.name);
}
})

React.render(
React.createFactory(Hello)({name: 'React'}), document.getElementById("app")
);

このAdvent Calendarで紹介するコードはJSXでharmony optionを有効にした状態で書いていきます。

というわけで、明日はJSX周りについてもう少し説明したいと思います。