Reactってなんぞや？
社内でReactって単語を目にして色々と調べてみました。
React.jsはFacebookが作っていて、いわゆるMVCフレームワークでいうところのViewの部分をコンポーネントとして作っていくためのライブラリ
引用元：React.jsとは – Qiita
既に公開されている記事を読み漁ったところ、コンポーネントやフレームワークやMVCと専門用語が飛び交ってましたが、
要約するとUI（ユーザーインターフェース）を構成するパーツを作るためのライブラリということだそうです。
では実際どうやって使うのかやってみましょう！
Reactを使ってみよう！
今回は新しいプログラムを始めるときの定番である「Hello!World!」の出力してCSSを適用するところまでを解説します。
まずは先に結果を見てみましょう。
See the Pen React導入 by くりはら (@kuriative) on CodePen.
このコードを見ただけで実装出来たらこの記事を書くまでに半日以上もの時間を浪費することはなかったでしょう…。
まずはjQueryと同じようにライブラリファイルを読み込みます。
1 2 | <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> |
React本体は1行目なのですが、2行目にJSXのライブラリも読み込んでいます。
JSXについては後述します。
コンポーネントを作る
「Hello!World!」を出力するためのコンポーネントを作ります。
1 2 3 4 5 6 7 8 9 | // HelloWorldという名前のコンポーネントを宣言 var HelloWorld = React.createClass({ render: function() { return ( // classではなくclassNameでクラスを付与 <p className="hello">Hello!World!</p> ); } }); |
render：でこの中身を出力しますよーと書いて、returnで出力したい構文を記述しています。
ここで注意するところはclassを付与するときにHTMLを書くのとは違い、classNameで付与します。
これはJavaScriptにてclassは既に予約語のためです。
コンポーネントを出力する
作ったコンポーネントを出力するために、まずHTML上のどこに出力するかを決めなければいけません。
1 2 | <!-- 出力先になるHTMLを記述 --> <div id="content"></div> |
今回は#contentの中に出力することにします。
1 2 3 4 5 | // id='content'に<HelloWorld />を埋め込む（マウント） React.render( <HelloWorld />, document.getElementById('content') ); |
この<HelloWorld />というのがコンポーネントを作った時に一番最初にvarで宣言した名前になるようですね。
そして4行目のdocument.getElementById(‘content’)で#contentに出力しますよという命令を記述。
ここまで記述方法に独特の癖のようなものは感じますが、まぁ見て直感的に理解できる範囲ですね。
コーディングを終えた状態がこちら。
クラスが付与されたかわかりやすくするためにCSSで.helloのスタイルを調整しています。
See the Pen React導入 by くりはら (@kuriative) on CodePen.
ここまで記事を読んだだけであればなんてことないなという感想だと思います。
しかし、実は僕がここまで来るのに大きな壁にぶつかっていました。
それは上記のコードは全てJSXで記述しているということ。
JSXってなんぞや？
JSXとは簡単に説明すると、JavaScript上でHTMLっぽいコードを使用できるようにするための記述法。
React本体を読み込んだ時の2行目の正体がこれですね。
1 | <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> |
JSXで記述するための本体を読み込んでいます。
実はこのJSXはReactを実装する上で必須の物ではありません。
JSXを使用しなくても、生のJavaScriptで同様のコードを書くことが出来ます。
JSXを使用しないで書いた例がこちら。
See the Pen React導入（JSX非使用） by くりはら (@kuriative) on CodePen.
長年JavaScriptに慣れ親しんできた人にはなんてことはないんでしょうが、僕のようなJavaScriptビギナーにはちょっとハードルが高いです…。
それに直感的に見て、ここにこの要素があってどういう構造でっていうのが少々わかりづらいのが難点です。
JSXの使用方法には、オンライン上でJavaScriptに変換する方法やSassのように事前にJavaScriptにコンパイルする方法もあるようです。
この辺についてはお好みだと思います。
ということで、ここまででなんとかReactの入り口には立てたかと思います。
次回はReactを使ってより実践的なコンテンツの作成をしてみたいと思います！
![PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう](http://design.all-connect.jp/wp-content/uploads/2017/08/corinne-kutz-211251-1024x683.jpg)
