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はそのプロジェクトの詳細やパッケージを管理するためのファイルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "material-ui": "^0.18.6", "react": "^15.6.1", "react-dom": "^15.6.1", "react-scripts": "1.0.10" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } |
【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に以下を書き足す。
1 2 |
'atom-text-editor[data-grammar~="jsx"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab' |
これでhtmlを書いているときと同じようにtabキーでemmetを使用できる。最高。