Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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時点)。 

utwang
フリーランスエンジニア。Ruby, Swift, js使い。 jsはBackbone、Ractive、Vueなど触ってます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした