create-react-appとCodeSandboxで手軽にReactアプリの開発準備

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分くらいです。

1. create-react-app コマンドインストール
2. Reactアプリの雛形作成
3. 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など、便利なツールがあるなと思いました。これから色々試してみようと思います。

参考サイト

• Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する
• Add React to an Existing Application - React
• もうJS開発環境は訳わからんって人に薦めたい CodeSandbox - Qiita