22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

React - コンポーネントの基本

React 備忘録

コンポーネントを作ってHTMLにレンダリングする

今回はReactで作成するアプリケーションとして最も基礎的な構成要素となるコンポーネント定義の方法ついて。

ディレクトリ構造

azunobu.hatenablog.com

前回、HTMLファイルの中にJSコードを混在させて書いていましたが、今回はHTMLファイルとJSファイルを切り分けて、見通しを良くしていきます。

最終的に今回は以下のような構造にしました。

.
├── sample.html
└── src
    └── react_script.js

srcディレクトリを作成し、その中にreact_script.jsを作成し、HTMLファイルはは以下のように記述しました。

１点注意しなければならないのは、今回のようにローカルで実行したい場合、Chromeだとセキュリティの関連でローカルは外部のJSファイルを読み込むことは禁止されているのでエラーとなってしまいます。 そのため今回の場合はFireFoxを用いて、動作を確認していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="src/react_script.js"></script>
</head>
<body>
<div id="content">

</div>
</body>
</html>

head要素では、ReactとBabelを読み込んだ後に、今回作成したreact_script.jsを読み込ませています。 また、body要素ではid=contentのdiv要素を用意しています。

そして、今回やりたいことは、id=contentのdiv要素内にReactから任意の文字列のh1タグをレンダリングすることです。

Reactのコードを書いていく

先ほど作成したsrc/react_script.jsに書いていきます。

シンプルにH1タグを指定する場合

https://gyazo.com/fab0ac46830fabcb4a6a505b46c06a48

ReactDOM.render(
    React.DOM.h1(null, 'Hello, world!'),
    document.getElementById('content')
);

何をやっているのか、コードを読むと分かる感じがしていいですね。

まず１行目のReactDOMパッケージのrenderメソッドによって、「HTMLを生成して所定の位置へと出力する」処理を行います。

renderメソッドは引数は２つ取っています。

  • 第１引数：Reactのコンポーネントから生成するHTML要素
  • 第２引数：生成したHTML要素をどこに埋め込むのか

第１引数では今回、React.DOMのh1メソッドを利用し、<h1>Hello, world!</h1>という要素を作ることを指定しています。 このh1メソッドでは第１引数にnullを渡していますが、ここにはstyleといった要素の属性を指定することができます。

H1タグに属性を指定する場合

今回はstyle属性でh1要素にスタイルをあてたいと思います。

ReactDOM.render(
    React.DOM.h1({
            style: {
                fontSize: '1.2em',
                color: '#242424',
                backgroundColor: '#FFF200'
            }
        },
        'Hello, world!'
    ),
    document.getElementById('content')
);

では動作を確認してみます。

https://gyazo.com/b8fc437a9ee09d19866fd603b301b8f6

このように、要素の属性指定が反映されていることが確認できます。

なお、属性を指定するときに注意すべき点としては、CSSの属性background-colorなどの属性名はbackgroundColorというように、キャメルケース（CamelCase）で表記する必要がある点です。 Reactは他の単語や変数名などもJavaScriptのオブジェクトのようにキャメルケースで表現する場合が多いようです。

今回は基本のコンポーネントの作成とレンダーについて学びました。

以上です。

参考

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発