読者です 読者をやめる 読者になる 読者になる

ReactJS 15.0.1 環境構築メモ

ReactJS

ReactJS 15.0.1を最初に試した時のメモ。

http://d.hatena.ne.jp/tomoya/touch/20160403/1459665374

エラー

ES6版React.jsチュートリアル - Qiita
を試したらエラーが出た。

TypeError: _react2['default'].render is not a function. (In '_react2['default'].render(_react2['default'].createElement(CommentBox, null), document.getElementById('container'))', '_react2['default'].render' is undefined)

このエラーはどうやら、
ReactDOM
というものがないことが原因のようだ。

index.htmlにreact-dom.js などの読み込みを追加して、
index.jsのReact.render()をReactDOM.render()に書き換えたら動いた。
import ReactDOM from 'react-dom'という文を足すのが正しい方法っぽい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/react/15.0.1/react.js"></script>
    <script src="https://cdn.jsdelivr.net/react/15.0.1/react-dom.js"></script>
    <title>React Tutorial ES6</title>
  </head>
  <body>
    <header>
      <h1>React Tutorial ES6</h1>
    </header>
    <div id="container"></div>
    <script src="build/bundle.js"></script>
  </body>
</html>

https://www.jsdelivr.com/projects/react

動いたコード

package.json
"react-dom": "^15.0.1",

{
  "name": "react_es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ku",
  "license": "MIT",
  "devDependencies": {
    "babelify": "^6.4.0",
    "body-parser": "^1.15.0",
    "browser-sync": "^2.12.3",
    "browserify": "^13.0.0",
    "express": "^4.13.4",
    "jquery": "^2.2.3",
    "marked": "^0.3.5",
    "node-dev": "^2.6.2",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

index.js
ReactDOM.render(

import React from 'react'
import ReactDOM from 'react-dom'

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return(
      <div className='commentBox'>
        Hello, world! I am a CommentBox.
      </div>
    );
  }
}


ReactDOM.render(
  <CommentBox />,
  document.getElementById('container')
);

warning

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of CommentList. See https://fb.me/react-warning-keys for more information.

http://qiita.com/koba04/items/a4d23245d246c53cd49d

CommnetList.js

return(<Comment key={comment.id} author={comment.author}>{comment.text}</Comment>);

sourcemaps

browserify({entries: ['./index.js'], debug: true})
でブラウザのDeveloper Toolsで元のソースでエラー行が出た。
debug: trueにするだけ。

gulpfile.js

gulp.task('build', function() {
  browserify({entries: ['./index.js'], debug: true})
    .transform(babelify)
    .bundle()
    .on('error', errorHandler)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.reload({stream: true}));
});

Browserify を使ってみる 2 – Source Map – アカベコマイリ

npm install -D gulp-sourcemaps

とかやったけど、要らなかったっぽい。

エラーその2

動くようになったチュートリアルのコードをgithubに上げてcloneしたら、
gulpコマンドで、デバッグ用ウェブサーバーが起動しなかった。

$ gulp
[13:15:58] Using gulpfile C:\react_docs\react_es6_tutorial\gulpfile.js
[13:15:58] Starting 'server'...
[13:15:58] 'server' errored after 272 μs
[13:15:58] TypeError: `script` must be a string
    at module.exports (C:\react_docs\react_es6_tutorial\node_modules\node-dev\lib\index.js:11:11)
    at Gulp.<anonymous> (C:\react_docs\react_es6_tutorial\gulpfile.js:38:3)
    at module.exports (C:\react_docs\react_es6_tutorial\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\react_docs\react_es6_tutorial\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\react_docs\react_es6_tutorial\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\react_docs\react_es6_tutorial\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
    at C:\Users\kubotad\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:415:9)
    at process._tickCallback (node.js:344:13)
    at Function.Module.runMain (module.js:443:11)

node_modules\node-dev
のバージョンが違っている。

{
  "name": "node-dev",
  "version": "2.6.2",
----
{
  "name": "node-dev",
  "version": "2.7.1",

gulpfile.js

 // ローカルサーバーの起動
 gulp.task('server', function() {
-  node(['./server.js']);
+  node('./server.js',[],[]);
 });

動くようになったっぽいので、Githubにpushした。
https://github.com/kubotti/react_es6_tutorial