コンテンツにスキップ

Top

React開発入門 for Ubuntu

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

Reactとは

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

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

React問題点

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

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

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

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

Node.jsとnpmインストール

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

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

nodeが見つからない!?

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

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

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

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

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

nodeのインストール

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

1
2
3
4
$ sudo npm install n -g
$ sudo n stable
$ node -v
v11.12.0

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

1
2
3
$ sudo n 10.15.3
$ node -v
v10.15.3

yarnのインストール

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

1
sudo npm install -g yarn

npmは使わない。yarnを使うこと

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

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

yarn一本で行くこと。

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

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

簡単なReactアプリサンプルを作り起動

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

1
2
3
4
$ yarn add create-react-app
$ create-react-app my-app
$ cd my-app
$ yarn start

http://localhost:3000/  

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

やや本格的なアプリの作成

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

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

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

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

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

入門編は以上!

React
https://reactjs.org/