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

## tl;dr

最近Reactに入門したのですが、ローカル環境でも手軽にReactアプリを開発できるようにしたいなと思い、<a href="https://github.com/facebook/create-react-app" target="_blank" rel="nofollow noopener">create-react-app</a>と<a href="https://codesandbox.io" target="_blank" rel="nofollow noopener">CodeSandbox</a>を使って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アプリの雛形を簡単に作成してくれるコマンドです。

<a href="https://github.com/facebook/create-react-app" target="_blank" rel="nofollow noopener">GitHub - facebook/create-react-app: Create React apps with no build configuration.</a>

WebpackやBabelといったパッケージ管理ツールは不要で、プロジェクトを作成さえすればコードの開発に集中できるような作りになっているようです。（以下は<a href="https://github.com/facebook/create-react-app#get-started-immediately" target="_blank" rel="nofollow noopener">create-react-appのREADME</a>の引用です）

> **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``` でグローバルインストールし、インストールできたか確認します。

```bash

$ npm install -g create-react-app
$ create-react-app -V
1.5.2
```

### Reactアプリの雛形作成

単純に ```create-react-app``` 一発でアプリの雛形を作成できます。

```bash
$ 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アプリの起動確認

ダイアログの最後に表示されたコマンドを実行し、アプリを起動してみます。

```bash
$ cd react-practice
$ yarn start
```

Webブラウザで```http://localhost:3000/``` にアクセスすると、サンプル画面が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/4ec5ecbc-3476-ae54-cf8a-8e400401a4ea.png)

## CodeSandboxでReactのサンプルコードを探す

開発準備ができたので、後は実際作りたいアプリを作っていくことになると思います。その際参考になるようなサンプルコードは、<a href="https://codesandbox.io" target="_blank" rel="nofollow noopener">CodeSandbox</a>から探すのがいいと思いました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/41df72b8-412f-a338-688d-87dfb2f96f18.png)

CodeSandboxではオンライン上のエディタでReactのコードを書くことができ、かつ他の人が書いたコードも検索して読むことができます。ですので極論、ローカルに開発環境を準備しなくても、Webブラウザがあればオンライン上のみで開発することも可能です。

エディタと画面のイメージはこんな感じです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/649df13f-3739-0a24-7ccc-9955f8ae6396.png)

「Sandbox search」から、Templatesを```create-react-app```に絞って検索すれば、```create-react-app```の雛形から作成されたアプリを検索できます。

検索したアプリのコードをサンプルとして読むことで、どうやって開発の拡張をしていったのかがイメージしやすくなるかと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/1d6153d3-415c-f86b-c260-d232b061f352.png)

### 終わりに

Reactの動きの確認やコードの開発に集中できるcreate-react-appや、サンプルコードを探しやすくなるCodeSandboxなど、便利なツールがあるなと思いました。これから色々試してみようと思います。

### 参考サイト

* <a href="https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614" target="_blank" rel="nofollow noopener">Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する</a>
* <a href="https://reactjs.org/docs/add-react-to-an-existing-app.html#installing-react" target="_blank" rel="nofollow noopener">Add React to an Existing Application - React</a>
* <a href="https://qiita.com/ynunokawa/items/0759ba44e2b816884759" target="_blank" rel="nofollow noopener">もうJS開発環境は訳わからんって人に薦めたい CodeSandbox - Qiita</a>