React - コンポーネントの基本
コンポーネントを作ってHTMLにレンダリングする
今回はReactで作成するアプリケーションとして最も基礎的な構成要素となるコンポーネント定義の方法ついて。
ディレクトリ構造
前回、HTMLファイルの中にJSコードを混在させて書いていましたが、今回はHTMLファイルとJSファイルを切り分けて、見通しを良くしていきます。
最終的に今回は以下のような構造にしました。
. ├── sample.html └── src └── react_script.js
srcディレクトリを作成し、その中にreact_script.js
を作成し、HTMLファイルはは以下のように記述しました。
1点注意しなければならないのは、今回のようにローカルで実行したい場合、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タグを指定する場合
ReactDOM.render( React.DOM.h1(null, 'Hello, world!'), document.getElementById('content') );
何をやっているのか、コードを読むと分かる感じがしていいですね。
まず1行目のReactDOMパッケージのrenderメソッドによって、「HTMLを生成して所定の位置へと出力する」処理を行います。
renderメソッドは引数は2つ取っています。
- 第1引数:Reactのコンポーネントから生成するHTML要素
- 第2引数:生成したHTML要素をどこに埋め込むのか
第1引数では今回、React.DOMのh1メソッドを利用し、<h1>Hello, world!</h1>
という要素を作ることを指定しています。
このh1メソッドでは第1引数にnullを渡していますが、ここにはstyleといった要素の属性を指定することができます。
H1タグに属性を指定する場合
今回はstyle属性でh1要素にスタイルをあてたいと思います。
ReactDOM.render( React.DOM.h1({ style: { fontSize: '1.2em', color: '#242424', backgroundColor: '#FFF200' } }, 'Hello, world!' ), document.getElementById('content') );
では動作を確認してみます。
このように、要素の属性指定が反映されていることが確認できます。
なお、属性を指定するときに注意すべき点としては、CSSの属性background-color
などの属性名はbackgroundColor
というように、キャメルケース(CamelCase)で表記する必要がある点です。
Reactは他の単語や変数名などもJavaScriptのオブジェクトのようにキャメルケースで表現する場合が多いようです。
今回は基本のコンポーネントの作成とレンダーについて学びました。
以上です。
参考
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
入門 React ―コンポーネントベースのWebフロントエンド開発
- 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/04/03
- メディア: 大型本
- この商品を含むブログ (2件) を見る