React.js

create-react-appコマンドでReact.jsの環境構築を一瞬で作成する

はじめに

今回業務で開発しているプロジェクトにReact.jsを入れてみることになりました。
それにあたって、学習のためにReact.jsのサンプルプログラムを作成しようと思い、そのための環境構築をしたのでその手順をまとめていきます。

create-react-app

React.jsで書かれたプロジェクトはビルドする必要があるので、WebPackなどのツールをいれていろいろ設定しないといけません。
しかし、React.jsの開発元であるFacebookが、素早くプロジェクトを作成して開発することができるコマンドラインツール、create-react-appを公開していまして、これを使用するとものすごく簡単に環境構築をすることができます。
初心者だとつまづきがちな環境構築を簡単にすることができるのはありがたいです。

手順

npmが使える必要があるので入っていない場合はインストールしておいてください。

npm install -g create-react-app

これで環境構築は終了です笑。
次にプロジェクトを作成します。作成したいディレクトリに移動して、以下のコマンドを叩きます

create-react-app (project_name)

今回はreact-sample-appというプロジェクト名にしましたので、以下のようにしました。

create-react-app react-sample-app

実行するとこのようになります。

$ create-react-app react-sample-app

Creating a new React app in /react-sample-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.3.2
info No lockfile found.
 🔍  Resolving packages...
 🚚  Fetching packages...
 🔗  Linking dependencies...
 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.7.0" while you're on "1.3.2".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 967 new dependencies.
├─ abab@1.0.4
├─ abbrev@1.1.1
├─ accepts@1.3.5
├─ acorn-dynamic-import@2.0.2
︙
├─ y18n@3.2.1
├─ yallist@3.0.2
├─ yargs-parser@5.0.0
└─ yargs@7.1.0
✨  Done in 12.66s.

Success! Created react-sample-app at /react-sample-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-sample-app
  yarn start

Happy hacking!
$ 

無事成功しました。
最後の部分に説明書きがあって、

yarn start

というのを実行すると、開発用のサーバーが起動するとのことです。作成されたディレクトリ内に移動して実行します。
僕の場合はyarnでしたが環境によってnpmだったり違うので、表示されたとおりにやれば問題ないと思います。

こんなかんじで自動でブラウザが開いて起動されます。
止めたい場合は「command + C」で停止します。
プロジェクト内のコードをいじった際にはすぐ勝手にビルドして反映してくれるので開発もすごくしやすいです。

今後の展望

さて、React.jsを開発していく環境が整いましたので、今後はReact.jsのチュートリアルを手順通りに作成してみて学習していこうと思っています。
実際にやってみたのをReact.jsチュートリアルをやってみるという記事にまとめたのでよかったらどうぞ!

POSTED COMMENT

  1. […] React.jsの環境はすごく簡単に作成することができて、やり方に関してはこちらにまとめました。 今回みたいにチュートリアルだけ手軽にやってみたい、というような場合には環境構築をしなくてもhtmlファイルに直接書いていくのでも大丈夫です。 その場合は […]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です