React.jsのコード例を自分用にまとめてみる(基本)
[amazonjs asin="B01MUS2RP9″ locale="JP" title="JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書"]
大まかな使い方を覚えたので、まとめてみる。
ただ、これをみたところでReact.jsの恩恵を感じることはできない気がしている。
というか、自分自身がまだ恩恵を受けられていないから、伝えられないのだろう。
基本的な使い方
div#main の中に、<h1>ベーシックReact.js</h1>を挿入する。
これを読んでも全く恩恵を受けられている感じは受けないけれども、一応ベーシックな使い方。
<!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/javascript">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
render: function(){
return React.DOM.h1(null, "ベーシックReact.js");
}
});
// レンダリングする
ReactDOM.render(
React.createElement(Component),
document.getElementById("main")
);
</script>
</body>
</html>
プロパティを与える
プロパティとは、レンダリングするときにコンポーネント（エレメント）にパラメータを与えるもの。
var1にプロ、var2にパティを与えて、連結して表示している。
<!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/javascript">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
render: function(){
return React.DOM.h1(null, this.props.var1, this.props.var2);
}
});
// レンダリングする
ReactDOM.render(
React.createElement(Component, {var1: "プロ", var2: "パティ"}),
document.getElementById("main")
);
</script>
</body>
</html>
ステートを定義して表示する
ステートとは、コンポーネント内で定義する内部変数のようなもの。コンポーネント内に「getInitialState」として定義すると利用できる。利用するときは「this.state.○○」で呼び出せる。
<!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/javascript">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
// ステートを定義する
getInitialState: function(){
return {text: "ステート"};
}
render: function(){
return React.DOM.div(null, this.state.text);
}
});
// レンダリングする
ReactDOM.render(
React.createElement(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/javascript">
/* div#main にh1タグを追加してタイトルを挿入する */
// コンポーネントの作成
var Component = React.createClass({
getInitialState: function(){
return {count: 0};
},
render: function(){
// div#main にdivを挿入
return React.DOM.div(
null,
// タイトルを挿入
React.DOM.h1(null, this.props.title),
// # buttonを挿入
React.DOM.input({
type: "button",
value: "+",
onClick: this.addCount
}),
// 改行を挿入
React.DOM.br(),
// spanを挿入して、現在のカウント数を表示
React.DOM.span(
null,
this.state.count
)
);
},
// ボタンが押されたときに発動するイベントを定義
addCount: function(e){
// this.setState で ステートを更新できる
this.setState({count: parseInt(this.state.count, 10) + 1});
}
});
// レンダリングする
ReactDOM.render(
React.createElement(Component, {title: "カウンター"}),
document.getElementById("main")
);
</script>
</body>
</html>
