React.jsのコード例を自分用にまとめてみる(JSX)
[amazonjs asin="B01MUS2RP9″ locale="JP" title="JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書"]
基本的な使い方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BASIC</title>
</head>
<body>
<div id="main"></div>
<!-- React.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
render: function(){
return (
<h1>ベーシックReact.js</h1>
)
}
});
// レンダリングする
ReactDOM.render(
<Component></Component>,
document.getElementById("main")
);
</script>
</body>
</html>
プロパティを与える
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROPERTY</title>
</head>
<body>
<div id="main"></div>
<!-- React.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
render: function(){
return <h1>{val1}{val2}</h1>;
}
});
// レンダリングする
ReactDOM.render(
<Component val1="プロ" val2="パティ"></Component>,
document.getElementById("main")
);
</script>
</body>
</html>
ステートを定義して表示する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>STATE</title>
</head>
<body>
<div id="main"></div>
<!-- React.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
// ステートを定義する
getInitialState: function(){
return {text: "ステート"};
},
render: function(){
return <div>{this.state.text}</div>;
}
});
// レンダリングする
ReactDOM.render(
<Component></Component>,
document.getElementById("main")
);
</script>
</body>
</html>
プロパティとステートを利用して、ボタンを押した数をカウントしてみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>まとめ</title>
</head>
<body>
<div id="main"></div>
<!-- React.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
getInitialState: function(){
return {count: 0};
},
render: function(){
return (
<div>
<h1>{this.props.title}</h1>
<input type="button" value="+" onClick={this.addCount} />
<br />
<span>{this.state.count}</span>
</div>
);
},
// ボタンが押されたときに発動するイベントを定義
addCount: function(e){
// this.setState で ステートを更新できる
this.setState({count: parseInt(this.state.count, 10) + 1});
}
});
// レンダリングする
ReactDOM.render(
<Component title="カウンター"></Component>,
document.getElementById("main")
);
</script>
</body>
</html>