【第1回初めてのReact.js】DOMの操作・カスタムコンポーネント

 

JavaScriptをひたすらDOMでいじり倒していました。ろぎすとです。

Angularjsを勉強しようかなと思っていたのですが、AngularJSをみてみると、わけわかんね。となったので、軽くReact.jsをみてみると、こちらの方が僕的に読みやすいということがわかったので、React.jsを触ってみました。

今日勉強したことをさらっと書いておきます。

Hello world

というのがあったとして、appの中に要素を突っ込むとする。

ReactDOM.render(
	React.DOM.h1(null,"Hello World"),
	document.getElementById("app")
) ;

とすれば、

と結果的にはなる。 属性をつけたい場合。
ReactDOM.render(
	React.DOM.h1(
	{
		id: "test" 
	},
	"Hello World"
	),
	document.getElementById("app") 
);
とすれば、

Hello World

となる。 React.DOM.h1(<属性>,<文字列>)とすればいけると思われる。

タグの中にタグを入れる

ReactDOM.render(
	React.DOM.h1(
		{id:"test"},
		React.DOM.span(null,
			React.DOM.em(null,"He"),
			"llo"
		),
		"world"
	)
)
もっと扱いやすくするために、コンポーネントを作っておく。

React.jsでカスタムコンポーネントを作成する。

var Component = React.createClass({
	render: function(){
		return React.DOM.span(null,"カスタムコンポーネント")
	}	
}) ;

ReactDOM.render(
	React.createElement(Component),
	document.getElementById("app")
) ;

カスタムコンポーネントにプロパティを持たせる。

var Component = React.createClass({
	render: function(){
		return React.DOM.span(null,"私は" + this.props.name + "です。") ;
	}
}) ;

ReactDOM.render(
	ReactDOM.createElement(Component,
	{
		name: "aaaa"
	}) ,
	document.getElementById("app") 
) ;
このpropsに対して、必ず値が欲しいとか、型を指定したい場合、
var Component = React.createClass({
	propType:{
		name: React.PropTypes.string.isRequired ,
	},
	render: function(){
		return React.DOM.span(null,"私は" + this.props.name + "です。") ;
	}	
}) ;

ReactDOM.render(
	React.createElement(Component,{
		name: "ボブ"
	}) ,
	document.getElementById("app")
) ;

テキストエリアの文字数カウントをする


var TextAreaCounter = React.createClass({
 	// textをstring型
	propTypes:{
		text: React.PropTypes.string ,
	},
	// デフォルトは""
	getDefaultProps: function(){
		return {
			text: "" ,
		} ;
	},
	
	// 返すDOM
	render: function(){
		return React.DOM.div(null,
			React.DOM.textarea({
				defaultValue: this.props.text ,
			}),
			React.DOM.h3(null,this.props.text.length)
		) ;
	}
}) ;

ReactDOM.render(
	React.createElement(TextAreaCounter, {
		text:"ボブ" ,
	}) ,
	document.getElementById("app") 
) ;
これだけだとリアルタイムで文字数を入力できないので、入力に応じた文字数をカウントしてみる。

テキストエリアの文字数カウントをする


var TextAreaCounter = React.createClass({
	propTypes: {
		text : React.PropTypes.string ,
	} ,
	
	getDefaultProps : function(){
		return {
			text:"" ,
		} ;
	},
	// 常に新しいデータを取得する
	getInitialState: function(){
		return {
			text: this.props.text ,		
		};
	},
	// プロパティに値をコピー
	_textChange: function(ev){
		this.setState({
			text: ev.target.value,
		}) ;
	},
	
	render: function(){
		return React.DOM.div(null,
			React.DOM.textarea({
				value: this.state.text,
				onChange: this._textChange,
			}),
			React.DOM.h3(null,this.state.text.length)
		) ;
	}
	
}) ;


ReactDOM.render(
	React.createElement(TextAreaCounter,{
		text:"ボブ" ,
	}),
	document.getElementById("app") 
) ;
今回はこんなもん。 まだまだよくわからないことも多いですが、今日学べたことはここまで。 以上!

コメントを残す

メールアドレスが公開されることはありません。

Follow
SHARE