function foo()
{
}

2016年4月20日水曜日

Reactの勉強(1) ... Reactまでたどり着かない編

日々いろいろなものに襲われている。そんなわけで、今日はReact.jsとReduxの勉強。
Node.jsとはお付き合いがなかった人生を後悔中。

1. まずnodeをインストールしておきます。
$ brew install node
2. 作業ディレクトリを作り移動。プロジェクトを作ります。質問に対してはひたすらデフォルト値で。package.jsonがカレントディレクトリにできます。
$ mkdir first_sample; cd first_sample
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (first_sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/miya/workspace/react/first_sample/package.json:

{
  "name": "first_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) yes
4. 深く考えずにindex.htmlとindex.jsを用意します。
- index .html
<html>
  <body>
    <script charset="utf-8" src="bundle.js"></script>
  </body>
</html>
- index .js
  
console.log('Hello World!');
5. webpackをインストールします。webpackは依存を一つのファイルにまとめてくれます。
$ npm install webpack --save-dev
npm installの--save-devオプションは、これをつけるとpackage.jsonのdevDependenciesにwebpackを追加してくれます。

6. bundle.jsを作ります
$ ./node_modules/.bin/webpack index.js bundle.js
7. ブラウザでファイルを開くと、コンソールに「Hello World!」と表示されます(Javaコンソールを開いて確認してください) 
8. webpackを毎回長いコマンド叩くのは面倒だなぁ〜と思ったら、package.jsonのscriptに以下を追加し、webpack.config.jsを記述する。
-package.json
  "scripts": {
    "build": "./node_modules/.bin/webpack"
  },
- webpack.config.js
 module.exports = {
  entry: "./index.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
    }
};
$ npm run build
で実行できるようになる
9. jsを二つに分けてみます。
- document.js
module.exports = function() {
  console.log('Hello World!');
};
- index.js
var run = require('./document.js');
run();

npm run build した後でブラウザにアクセスすると、ちゃんとHello Worldが表示されています。
10. ES6っぽく書き換えます
- document.js
  
export default function() {
    console.log('Hello World!');
 };
- index.js
 
 import run from './document';
 run();
11. babelをインストール
$ npm install babel-loader babel-core babel-preset-es2015 --save-dev
12. webpack.config.jsを書き換える
module.exports = {
  entry: "./index.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets:['es2015']
      }
    }]
  }
};
13. npm run build してからファイルにアクセス

0 件のコメント:

コメントを投稿