no-image

Reactことはじめ

Opulencyの開発のためにもReactを勉強し始めたので、最初の最初をメモ

React – A JavaScript library for building user interfaces
ここからreact.jsとreact-dom.jsをダウンロード。

また、ブラウザがChromeだと拡張機能も用意されているようです。
React Developer Tools – Chrome ウェブストア
ここからreactのデベロッパー拡張機能を入れ、設定で適用させるとデベロッパーツールにReactのタグが表示されます。

atomに入れたReact用のパッケージにはスニペットが用意されているので、作業効率化ができます。
Atom React Plugin SNIPPETS

 

Reactで意外とよく使う空タグのEmmetSnippetsを最近知ったのでメモしておきます。
Cmd-Shift-jです。これは空タグを出すスニペットというよりは、タグと空タグを交互に表示するというものです。

 

では早速やっていきます。まずはJSXを用いずにhello worldしてみます。

次にJSXを使ってみます。
Reactって普通に書くと括弧多すぎてどれがどの括弧かわからなくなるし、記述の仕方が独特なのでJSXを使っている人が多いんだと思います。
JSXを使う場合はそれをjsにトランスパイル(変換)する作業が必要になるんですが、その時にBabelというツールを使います。
Babelの使い方もいくつかあるみたいですが、勉強中なので今回はその中でもクライアント側でトランスパイルする方法を用います。
この方法は実際に何かを作ってリリースするときにはパフォーマンス面から見てあまり用いるべきではない方法です。

myreという名前のディレクトリ上で作業しているとします。
$ mkdir babel && cd $_
$ curl https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js ? brow
ser.js

 

先程のファイルに

を追加し、15行目を

というふうに変更します。

 

これらを踏まえて先程のファイルをJSXで書いてみると以下のようになります。

 

以下はテキストエリアに文字を入力したらリアルタイムで文字数がカウントされる単純な備忘録的Reactコードです。

 

Reactを勉強していく上でちょくちょく確認したいサイト
Reactを使うメリットとデメリット – Qiita