作成日: 2019.03.27

React開発入門 for Ubuntu

Ubuntu 16.04環境上でReact開発をするための環境を構築する。
簡単なサンプルを作る。

Reactとは

ReactはWeb開発のフロントエンド部分のフレームワーク。

こんなの使わなくてもJavaScriptでゴリゴリ書けるけど、あればあったで便利。(フレームワークの常)

先に言っておくが、Reactはあまり勧めない。

理由は各パッケージの依存関係問題が多発するからだ。

ちょっと便利そうなパッケージ入れたいと思っても、他のパッケージが動かない、エラーがでる、動くけど変、などの現象にぶち当たる。

各パッケージ間の依存関係問題がなければお勧めするのだが。

みんな大好きNode.jsをインストール。
(合わせてパッケージ管理のnpmも)

$ sudo apt install -y nodejs
$ sudo apt install -y npm

nodejsを入れたのにnodeが見つからない！

$ /usr/bin/env: `node : そのようなファイルやディレクトリはありません

ネットでよく出ている以下の方法で解決しないこと！

$ sudo ln -s "$(which nodejs)" /usr/local/bin/node
$ node -v
v4.2.6

理由はバージョンが古いのを上げるのが面倒だから。

n package で node をインストールする

$ sudo npm install n -g
$ sudo n stable
$ node -v
v11.12.0

バージョンを指定してnodeをインストールしたい場合はstableじゃなくてバージョンを直接指定する。

$ sudo n 10.15.3
$ node -v
v10.15.3

Reactはyarnを使わなくてもいいけど実質コレ使わないとパッケージの依存関係でなんか問題が起きることが自分は多かったのでyarn入れろ。

sudo npm install -g yarn

Reactの本やネットの古い情報ではnpmを使っていることがある。

が、npmはもう使わないこと。

yarn一本で行くこと。

理由はyarnのほうが速いとかあるけど、一番の理由は両方を混合してつかうと各パッケージ間の依存関係問題が起きることがあったので。

npm一本にするメリットはないので、yarn一本にする。

create-react-appという便利ツールがFacebookより提供されています。
これを使って簡単なサンプルを作ってみましょう。

$ yarn add create-react-app
$ create-react-app my-app
$ cd my-app
$ yarn start

http://localhost:3000/　　

にアクセスできることを確認。

こんなしょぼいサンプルじゃぁ何の役にも立ちやしません、という方。

かと言って、各パッケージ間の依存関係が厳しく、ゼロからのスクラッチは相当骨が折れます。

そこで、Creative Timという良質なプロジェクトを提供しているサイトを紹介します。

この中で気に入ったFREEのプロジェクトを選び、git cloneすればすぐに開発が可能。

このようにすでに出来上がっているプロジェクトを参考にして勉強すると依存関係も悩まず余計な苦労をしなくて住みます。

入門編は以上！