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を使おう!