ReactJS 15.0.1 環境構築メモ
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