Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@utwang

Reduxのチュートリアルを試す環境を作るのにcreate-react-appを使う

ReduxのチュートリアルはサンプルコードがES6で提供されています。チュートリアルを試すにはbabelなどのパッケージをインストールするなど環境を整える必要があります。

簡単に環境を作れるnpmパッケージ create-react-app1 を使って、チュートリアルを進めるための環境を作る手順をまとめます。

対象者

  • Reduxがどんなものかチュートリアルを試してみたい
  • ES6を利用した環境のセットアップ方法がよくわからない

create-react-appとは

create-react-appはReactプロジェクトのスケルトンを作成してくれるコマンドラインツールです。create-react-appでプロジェクトを作成すると、reactreact-scriptsというパッケージを含めた形でプロジェクトを作成してくれます。このreact-scriptsは、babel、eslint、webpack、loaderなどの開発に必要なパッケージをまとめたパッケージです。

手順

  1. create-react-appをインストール
  2. npmプロジェクトを作る
  3. reduxをインストール
  4. コードを書く
1. create-react-appをインストール

npmパッケージのcreate-react-appをインストールします。

npm install -g create-react-app 
2. npmプロジェクトを作る

create-react-appでプロジェクトを作成する

create-react-app redux-tutorial
cd redux-tutorial
npm start

npm startを実行すると以下のログがコンソールに出力されて、ブラウザが自動で開きURLにアクセスします。

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

プロジェクトディレクトリの内容は次のようになります。パッケージのインストールだけではなくindex.jsやApp.jsファイルも作成されます。

プロジェクトディレクトリのtreeコマンド表示結果
.
└── redux-tutorial
    ├── README.md
    ├── node_modules
    │   ├── asap
    │   ├── core-js
    │   ├── encoding
    │   ├── fbjs
    │   ├── fsevents
    │   ├── iconv-lite
    │   ├── is-stream
    │   ├── isomorphic-fetch
    │   ├── js-tokens
    │   ├── loose-envify
    │   ├── nan
    │   ├── node-fetch
    │   ├── object-assign
    │   ├── promise
    │   ├── react
    │   ├── react-dom
    │   ├── react-scripts
    │   ├── ua-parser-js
    │   └── whatwg-fetch
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        └── logo.svg
packege.json
{
  "name": "redux-tutorial",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

3. reduxをインストール

reduxをインストールします。チュートリアルで利用するreact-reduxもインストールします。

npm install --save redux react-redux
4. コードを書く

以上で、チュートリアルを進めるための準備ができました。あとはチュートリアルを読みながらコードを写経していけばReduxを試すことができます。


  1. Reactの公式ドキュメントのセットアップにもcreate-react-appを使うようになっていました。また、サンプルコードがES6のものに更新されていますね(2016/11時点)。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
34
Help us understand the problem. What are the problem?