最近関わっている大学の文化祭の企画でアプリを作ることになり、Reactを使うことになりました。
フロントはバグ潰しとかバイト先でちょろっとデザイン当てたりとか趣味程度の自作アプリでUIを整えたことあるレベルで、あんまりがっつり書いたことはないので不安ですが、勉強してみることにしました。
1, 2ヶ月ぐらいやるのでもう何回か記事になるかもです。
なのでReact初心者向けの内容になります。
今回は第1回なので定番のHello Worldをやってみます。
あと、フロントエンドのコードを気軽に試せるCodePenというプレイグラウンドを使います。環境構築がいらないので勉強しやすいと思います。
CodePen
CodePenはWebブラウザー上でフロントのコードの動作が確認できるプレイグラウンドサービスです。
有料版もあるみたいですが無料でも全然使えると思うので、いい感じです。
上のリンクでアカウント作って始められます。
このサービスでは、HTMLとCSSとJavaScriptが1セットとなるみたいです。この単位がPenと呼ばれるみたい。
それぞれのファイルはちゃんと読み込まれているので、インクルードし忘れとかはなくてうれし。(よく忘れる)
CreateからNew Penを選べば作れます。
GitHubみたいに無料だとPublicになるみたいですね。
他の点でも割と似ていそうです。
Reactを使ってみる
ReactはJavaScriptのライブラリ。使っておくといいことがあるみたいだけど僕はまだ駆け出しなのでその利点を享受できていないと思うので、わかってる人に聞いてみましょう。
で、CodePenでReactを使うためにはいくつか設定しないといけないとこがあります。
- JS processor をBabelにする
- ReactとReact-DOMを読み込む
です。
BabelはJSの新しいバージョンであるES2015で書いたコードを、ブラウザーが対応している時代のJSに直してくれるやつみたいです。
2で必要なライブラリーをインポートします。
CodePenではコードにはimport文を書かずにSettingsのところからぽちぽちやると読み込めるようになるみたいです。
1も2も、コード編集画面の右上にあるSettingsから設定できます。
1はやるだけなので大丈夫。
2はAdd External Scripts/Pensのところに以下のURLを貼れば読み込んでくれるようになります。
- https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js
- https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js
あとは書くだけ。かんたん。
Hello Worldしてみる
さっそくHello World。
JSの部分だけ載せています。
HTMLの方にはidをreact-containerとしたdiv要素が一つ置いてあるだけです。
JSファイルではHelloクラスを作ってこれをReactDOM.renderを使って、react-containerのところにレンダリングします。
JSファイルではHelloクラスを作ってこれをReactDOM.renderを使って、react-containerのところにレンダリングします。
まとめ
CodePenとReactの超入門記事になりました。
CodePenで書いたコードと結果をブログに載せるのめっちゃ楽で感動した。。。笑
しばらく勉強するのでよかったらぜひ読んでやってください。
0 件のコメント:
コメントを投稿