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