Reactとは
React公式チュートリアルを日本語化したものがあるのでこれに倣うのが一番手っ取り早いでしょうか。
参考記事をいろいろ。
この記事はデザイナー目線で、勉強しておくと良さそうと思わせてくれます。
環境構築
ReactはjQueryと違って、書いたら動くっていうものではないので、コンパイルしたりなんだりっていう手間がかかるようです。
修正するたびにコマンド実行してブラウザチェックするのが嫌なので、そのあたりも自動化できるサンプルを探したところ、こういうものがありました。
ぶっちゃけたところ、いろいろなチュートリアルを試したりしたんですがよくわからなかったので、スムーズに導入できたこれを使ってそのままやっていこう！ってことです。
知らないなりに聞きかじった知識からいくと、Babel＋Webpackの組み合わせが良さそうと思ったんですが、どうやったらいいかわかりませんでした。
というわけでサンプルの名前どおり、
ECMAScript 6 構文のサポートおよび JSX ファイルのコンパイルに Babel を利用
依存モジュールの管理(CommonJS準拠)に Browserify を利用
タスクランナーとして gulp を利用
という組み合わせですね。
ElectronならWebデザイナーでも業務アプリが作れる！（3）でGitはインストール済みなので、react-babel-browserify-gulp-sampleの「利用方法」にあるとおり、自分の開発環境のディレクトリにインストールします。
インストールできたら、「動作確認の方法」にいろいろ手順が書いてありますが、一番簡単なのは、開発環境ディレクトリで
gulp
たったこれだけ、コマンドを打つと。
この時点でまずbundle.jsが生成され、さらにJSXの編集が監視されますので、修正して保存するたびに自動で更新されるようになります。
あとはindex.htmlをブラウザで開いて確認するだけ。
とりあえずモックを作る
Reactが動く環境は作れたんですが、で？どうするの？感が拭えません(；´Д｀)
とにかくゴールを作らないとしょうがないので、まずは目指すページのモックを作ります。
作りたいものは、
・共有したいWebページのURLを入力する
・metaやOGPを取得してきて、タイトルやdescriptionを表示する
・コメントがつけられる
ざっくりいうとはてブのようなものですが、社内だけで共有するような感じ。
普段はSkypeがつながってる親しい同僚との間でのみ記事を送り付け合ったりしているのですが、ログも流れてしまうし、もうちょっと社内全体で見られるようにしたい。
でもallでメールを流すとうっとうしい…
ということで、気が向いたときにまとめて読んだりできるようなものを作ろうかなと。
私の場合はHTML/CSSを自分で書いた方が早いのでまずはサンプルとなるコードを書いておきます。
フルページで開かないと見づらいかも(；´∀｀)
See the Pen QyVwYb by natsumi (@mayo31) on CodePen.18228
新規タブでフルページを開くとりあえず記事一覧のパーツを作りました。
HTML1枚です。
ウィンドウサイズによってカラム幅が変わるレスポンシブの造りになっています。
記事ひとつひとつがarticleになっていて、クリックしたarticleはオーバーレイ表示になり、隠れていたタグリストや読んだ人リスト、コメントなどが表示されます。
jQueryが共存できるらしいので、クリックイベントはひとまずjQueryで書いておきました。
タッチデバイスに対応するためにクリックとタッチイベントの判定を入れてあります。
実際には記事URLを貼り付けるための入力欄や、コメントの入力欄、ヘッダやフッタが必要ですが、いったんこれをReactで書いていきたいと思います。
次回からJSXを触っていきます！(｀・ω・´)=3