ReactでHello World

Reactアプリケーションの環境構築、開発をサクっと行いたい場合は、どのような方法があるのだろうか。

結果

Facebookが提供するcreate-react-appを利用することで、手軽にReactアプリケーションの環境構築を行なえることが出来るようになります。
今までは所定のフォルダを作って、このファイルを配置して…、という手順を踏んでたり、このモジュールの依存関係はホニャララで悩ましい思いをしたと思いますが、create-react-appを利用することでサクっと出来るようになったのは嬉しいですね。

create-react-appのインストール

npmから入れます。グローバルインストールにします。

npm install -g create-react-app

create-react-appの使い方

Reactアプリケーションを作成するためには以下コマンドを実行するだけです。

➜  tmp create-react-app helloworld

うまく行くとターミナルに以下が出力されます。

Creating a new React app in /Users/xxx/tmp/helloworld.
...
omitted
...

Success! Created helloworld at /Users/xxx/tmp/helloworld
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 helloworld
  npm start

Happy hacking!

Reactアプリケーションの起動

先に作成されたReactアプリケーションのディレクトリに移動し、npm startを実行します。

  cd helloworld
  npm start