備忘録

何かあったとき用に

React をさくっと使う (with parcel)

この記事は TUT Advent Calendar 2019 1 日目の記事です.
初日から遅刻しかけてるの大丈夫か?

やりたいこと

create-react-app だと色々機能が多いので, さくっとかつすぐ React を触れるような構成を作る.
React プロジェクトに parcel を使用して bundle するだけ.
package 導入には yarn 使ってます. npm の方は適宜読み替えてください.

環境

  • Node.js: v12.13.1
  • yarn: 1.19.2
  • react/react-dom: 16.12.0
  • parcel-bundler: 1.12.4

手順

必要な package を追加

$ yarn init

とかでプロジェクト初期化する. 次に以下を実行して, プロジェクトに必要な package を入れる.

$ yarn add react react-dom
$ yarn add --dev parcel-bundler

作成

ソースコードは普通に長い (というか貼り付けるのが面倒な) ので GitHub に上げているから参照してください.
コンポーネントにはモダンな Functional Component, 昔ながらの Class Component どちらとも利用している. (やっていることは同じだが)

ちなみに, このプロジェクトでは node_modules/ 除いて以下のような構成になっている:

./
├── package.json
├── src
│   ├── component.js
│   ├── index.css
│   ├── index.html
│   └── index.jsx
└── yarn.lock

実行

package.json に以下を追記:

"scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }

これで, yarn startでテストサーバを起動でき, yarn build でビルドができる.

f:id:KashEight:20191201183553p:plain

Chrome 上でこのように表示されて, それぞれのボタンが反映されればおそらく大丈夫なはず.

注意

React で Class Component を使う際, メソッドを呼び出すときに, this を bind する必要があり, 煩わしくて class property*1 使うかもしれないけど, そもそもまだそれは ECMAScript で標準化されていない実装なので, 使うときは babel を用いてトランスパイルする必要があるから気をつけてほしい.

余談

実は parcel は CSS もモジュールとして読み込んで bundle してくれるので HTML に直書きしなくてもやってくれる.
なので, js 内で import "./index.css" しても別に問題ない. (なんなら parcel のホームページもそんな使い方の例を示してるし)
あと Sass とか, TypeScript とかも自動的に読み込んでくれるので本格的なものを作る必要ないなら parcel で十分な気がする. webpack だと設定面倒だし.

最後に, 最近忙しいのマジでどうにかしてくれ…実際にこれ遅刻しかけてるし…

*1:クラス直下の宣言 (コンストラクタ経由をしない宣言), これにはアロー関数も含まれる. つまり, クラス内のアロー関数宣言はメソッドではなくプロパティ扱い