react(create react app)をちょっとだけ触ってみる。それとatomの環境構築も

Opulencyのリファクタリングをしたいなと思い、そろそろなにか新しいフレームワークを触ってみようと思った。
jser cafe #0 で話を聞いてみてreactをやってみようとなったのですけど、結構学習コストが高いのですね。大分躓きました。
少し調べてみると良いのがありました。それがcreate react app。

javascript初心者が、さぁ、Reactをやってみよう！！となって新しく手を出すことになるのが、
・React
・Babel
・Webpack
・ES6
って感じで、react一つ触りたいのに上の4つを同時に勉強する必要があるので結構大変！ってことで、このCreate React Appを使うと、Reactの勉強に集中することができる。

コマンド一発でインストールできるが、中ではBabelもWebpackも動いているようです。

以下のサイトを参考にして初めてみる。
Facebook 公式ツール Create React App を使って React 開発の初歩を学ぶチュートリアル – Qiita

グローバルにcreate-react-appをインストール
$ npm install -g create-react-app

プロジェクトを作成。若干時間がかかります。
$ create-react-app my-app

しばらくすると以下のように表示されます。はっぴーはっきんぐ！

表示されたとおりに実行
$ cd my-app
$ npm start

ブラウザ上にページが表示される。

きーたの流れに沿ってマテリアルに入る
$ npm install material-ui --save

package.jsonに1行追加する。
package.jsonはそのプロジェクトの詳細やパッケージを管理するためのファイルです。

【package.json関連の参考サイト】
npm package.json 日本語版 取扱説明書
package.json の 仕様 (日本語) – galife

$ npm installを実行する。

依存関係のあるパッケージを一括インストール

上記で package.json に依存関係のあるパッケージを登録する方法について 紹介しましたが, これだけでは意味がありません.

他の人が開発環境をセットアップする際に, 依存関係のあるパッケージをインストールする必要があります.

そういった機能も npm が用意してくれちゃっています. しかも超簡単♪ package.json がある階層に移動して, パッケージ名を省略してインストールするだけです.

$npm install
これで, package.json の dependencies, devDependencies に記述されている パッケージを一括でインストールしてくれます.

出店:Node.js のパッケージ管理ツール npm の作り方と package.json の使い方 | phiary

npm install モジュール名とせず、npm install のみだと依存関係にあるパッケージを自動的にインストールしてくれるみたい。

src/App.jsの編集

$ npm start

きーたの流れに沿って3の倍数のときのみ数字を大きくするやつをやってみました。
tick()関数やgetIsSan()関数はconstructorとかと並列の場所に書くんですね。

Reactってファイルを保存したら自動的にコンパイル（？）してブラウザも自動で更新されるんですね。すごい便利。

3の倍数なのでフォントサイズが大きくなっています。

最後にatomにreactのパッケージを入れてみます。
設定から検索しても見つからなかったのでコマンドから入れた。

何ができるかは以下のページを参照
Atom React Plugin
$ apm install react

次にJSXを自動コンパイルしてくれるlanguage-babelを入れる
【参考】
language-babel
ReactをAtomパッケージ開発に使ってみた | To Be Decided

そして最後にemmetをJSXにも適用できるようにキーマップをいじる。
【参考】Enable tab completion for JSX with Emmet in Atom

keymap.csonに以下を書き足す。

これでhtmlを書いているときと同じようにtabキーでemmetを使用できる。最高。