React.js はじめに

今回からReactをやります。Reactは、Facebookとコミュニティが開発が開発しているJavaScriptライブラリです。

業務で使ったことなく勉強のために調べたことを纏めるだけなので、内容がないかもしれませんが、いつか使うときのために出来るだけ、
多くの内容を書いていきたいと思います。

Hello Worldのサンプルプログラム

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>React Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
</head>

<body>
    <div id="hello"></div>
    <script type="text/javascript">
        ReactDOM.render(
            React.createElement('h1', {name:"helloworld"},
                "Hello World!!"
            ),
            document.getElementById('hello')
        );
    </script>
</body>

</html>

上記のサンプルプログラムを実行すると以下のようなソースに変換されます(bodyのみ抜き出し)。

				
<body>
	<h1 data-reactroot="" name="helloworld">Hello World!!</h1>
</body>

React.jsを使うには

CDNでライブラリjsファイルを参照します。

				
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>

React.createElement

React.createElementはReact要素を作成します。引数は要素名、属性オブジェクト、子要素になります。

				
React.createElement('h1', {name:"helloworld"}, "Hello World!!")

ReactDOM.render

ReactDOM.renderは指定位置に要素を挿入します。引数は挿入するReact要素、挿入場所になります。

				
ReactDOM.render(
    React.createElement('h1', {name:"helloworld"}, "Hello World!!"),
    document.getElementById('hello')
);

JSX

上のサンプルをJSXを使って書き換えると以下のサンプルになります。
JSXを使うと JavaScriptの中にHTML/XMLみたいなタグを書けます。

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>React Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
    <div id="hello"></div>
    <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World!!</h1>,
      document.getElementById('hello')
    );
    </script>
</body>

</html>

JSXを使うには

CDNでライブラリjsファイルを参照し、scriptのtypeに"text/babel"を指定します。

				
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
</script>

基本的にHTMLの要素、属性はそのまま使えますが、class属性とfor属性はclassName、htmlForで使用して下さい。

className、htmlForのサンプル

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>React Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
    <div id="hello"></div>
    <input type='text' id='txt' />
    <script type="text/babel">
        ReactDOM.render(
        <label htmlFor='txt' className='cls'>XXX</label>
        , document.getElementById('hello') );
    </script>
</body>

</html>

上のサンプルを実行すると以下のHTMLになります。

				
<body>
  <div id="hello"><label data-reactroot="" for="txt" class="cls">XXX</label></div>
  <input type="text" id="txt">
</body>

label要素のfor属性はinput要素のid属性と一致させ紐付けさせます。紐付けるとラベルをクリックしたときにinputにフォーカスが移ります。

ページのトップへ戻る