Reactのはじめかた(環境構築)

この記事ではReactを始める環境づくりの準備までのやり方を書いきます。
npmでローカルにReact環境を作るやり方を紹介します。

ディレクトリを作ろう

プログラミングを始める時にはファイルを整理するために新しくプロジェクトを始めるためにはディレクトリを作ろう。
どこか適当にディレクトリを作って、その中で作業しよう。
例えば デスクトップにフォルダを作ってその中で作業しよう。

cd ~/Desktop # デスクトップに移動して
mkdir ReactIntro # ReactIntro という名前のディレクトリを作って
cd ReactIntro # ReactIntro に移動しよう

これで今回の作業ディレクトリ ReactIntro に移動できた!今後はこの中で作業していこう!

npm ではじめよう!

Node.js と npm が入っていることは前提にしてはじめる。なので install されていない人は頑張ってinstallしてね。

node -v
npm -v

でバージョンがでれば入っているので確認OK

まずはnpm init

まずはnpmをはじめるための最初のコマンド

npm init

を実行しよう。いろいろでてくるけどとりあえずenter押しておけばOK。 このコマンドで package.json が作られるよ。lsで確認してみよう。

ls

これで 'package.json' が表示されていればOK。

create-react-appを入れよう

Reactのプロジェクトをつくるためのコマンドが入ったモジュールcreate-react-appを入れよう。 ローカルで入れるには -g オプションはつけずに以下のようにしてね。今後はローカルにインストールしたと仮定するよ。

npm install create-react-app

これでインストールはOK

React のアプリをつくろう!

create-react-appコマンドを使えば React のプロジェクトを作ることができる。例えば(次のコマンドはまだ打たないで!)

create-react-app my-app # 使わないでね

↑こんな感じでプロジェクトを作るけれども、実はローカルに(create-react-appを)インストールした時は上のコマンドでは動かない( command not found になるはず)。グローバルオプション(-g)でインストールした時とはインストールされた場所が違うせいでこういう問題になってしまう(ネットの入門記事だとグローバルにインストールされていることが前提で上のコマンドを使えと書かれているので注意しよう)。 これを解決するためには以下のようにコマンドを打とう!

./node_modules/.bin/create-react-app my-app # このコマンドを実行しよう

ローカルでインストールすると ./node_modules/.bin/ って所にコマンドの実行ファイルがインストールされるのでコマンドを使うには、相対パスを上記のように指定する必要があるのだ。

これで現在のディレクトリ直下に my-app というディレクトリができたはず!ではそこに移動してみよう!

cd my-app

移動したところで

npm start

と打ってみるとlocalhostに飛ばされてブラウザでReactのマークが表示されるはずだ。これでReactを使う環境づくりはOK! この作ったアプリの中のコードをいじってReactを使おう!