tl;dr
最近Reactに入門したのですが、ローカル環境でも手軽にReactアプリを開発できるようにしたいなと思い、create-react-appとCodeSandboxを使ってReactアプリを手軽に開発できる環境を準備した記録です。
環境
- Mac OS X 10.13.4
- NodeJS v9.7.1
- npm 5.6.0
- yarn 1.5.1
create-react-appでローカルReact開発環境準備
手順アウトライン
大きく3ステップでできました。所要時間は5 ~ 10分くらいです。
-
create-react-appコマンドインストール - Reactアプリの雛形作成
- Reactアプリ起動確認
create-react-app コマンドインストール
create-react-app はFacebookが公式に提供している、Reactアプリの雛形を簡単に作成してくれるコマンドです。
GitHub - facebook/create-react-app: Create React apps with no build configuration.
WebpackやBabelといったパッケージ管理ツールは不要で、プロジェクトを作成さえすればコードの開発に集中できるような作りになっているようです。（以下はcreate-react-appのREADMEの引用です）
Get Started Immediately
You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.
Just create a project, and you’re good to go.
npm でグローバルインストールし、インストールできたか確認します。
$ npm install -g create-react-app
$ create-react-app -V
1.5.2
Reactアプリの雛形作成
単純に create-react-app 一発でアプリの雛形を作成できます。
$ create-react-app react-practice
...
Success! Created react-practice at /path/to/react-practice
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-practice
yarn start
Reactアプリの起動確認
ダイアログの最後に表示されたコマンドを実行し、アプリを起動してみます。
$ cd react-practice
$ yarn start
Webブラウザでhttp://localhost:3000/ にアクセスすると、サンプル画面が表示されます。
CodeSandboxでReactのサンプルコードを探す
開発準備ができたので、後は実際作りたいアプリを作っていくことになると思います。その際参考になるようなサンプルコードは、CodeSandboxから探すのがいいと思いました。
CodeSandboxではオンライン上のエディタでReactのコードを書くことができ、かつ他の人が書いたコードも検索して読むことができます。ですので極論、ローカルに開発環境を準備しなくても、Webブラウザがあればオンライン上のみで開発することも可能です。
エディタと画面のイメージはこんな感じです。
「Sandbox search」から、Templatesをcreate-react-appに絞って検索すれば、create-react-appの雛形から作成されたアプリを検索できます。
検索したアプリのコードをサンプルとして読むことで、どうやって開発の拡張をしていったのかがイメージしやすくなるかと思います。
終わりに
Reactの動きの確認やコードの開発に集中できるcreate-react-appや、サンプルコードを探しやすくなるCodeSandboxなど、便利なツールがあるなと思いました。これから色々試してみようと思います。