Reduxチュートリアルでindex.jsを実行すると、 "ReferenceError：ドキュメントが定義されていません"

Question

私は公式のreduxサイトhereに記載されているreduxチュートリアルで作業しています。しかし、私がそれを実行すると、エラーが発生します。私は欠けている構成の問題があるかどうかを知りたいです。

ノードからエントリポイントindex.jsを実行しようとしています。このファイルには、次のようになります。

import React from 'react' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import todoApp from './reducers' 
import App from './components/App' 

let store = createStore(todoApp) 

render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
) 

私は、このコマンドでそれを実行しています：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 
/Users/dan/code/tutorial/redux-todo/index.js:29 
), document.getElementById('root')); 
^

ReferenceError: document is not defined 
    at Object.<anonymous> (/Users/dan/code/tutorial/redux-todo/index.js:14:3) 
    at Module._compile (module.js:571:32) 
    at loader (/Users/dan/code/tutorial/redux-todo/node_modules/babel-register/lib/node.js:144:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dan/code/tutorial/redux-todo/node_modules/babel-register/lib/node.js:154:7) 
    at Module.load (module.js:488:32) 
    at tryModuleLoad (module.js:447:12) 
    at Function.Module._load (module.js:439:3) 
    at Function.Module.runMain (module.js:605:10) 
    at /Users/dan/code/tutorial/redux-todo/node_modules/babel-cli/lib/_babel-node.js:159:24 
    at Object.<anonymous> (/Users/dan/code/tutorial/redux-todo/node_modules/babel-cli/lib/_babel-node.js:160:7) 

私はOSXの午前、バージョンを使用して：このエラーになり

./node_modules/.bin/babel-node --presets react,es2015 index.js 

npmと自作のノードがインストールされています。以下のモジュールは、NPMを使用してインストールされます。

react 
react-dom 
redux 
react-redux 
babel 
babel-cli 
babel-preset-es2015 
babel-preset-jsx 

は、コンフィギュレーションまたはスクリプトを実行しているとき、私はそれがこのエラーを引き起こす欠けているコンテキストの問題はありますか？

Answer 1

にコードを使用してコードをコンパイルして実行する必要があります。 babel-nodeは最初にそれをコンパイルし、それをノードスクリプトとして実行しようとします。 documentオブジェクトは、ブラウザ環境でのみ使用できます。

は、代わりにこれを試してみてください：

./node_modules/.bin/babel --presets react,es2015 index.js --outfile compiled.js 

これが正常に実行された場合、その後、compiled.jsはブラウザ準備のコードが含まれている必要があり、あなたがブラウザでそれを実行するために、HTML文書からそれにリンクすることができます。