ReactJSを開始する

コンポーネントの基本的な例を試してみましょう。次の手順は、私は、様々な入門ガイドの組み合わせReactJSを開始する

"dependencies": { 
    "http-server": "~0.8.0", 
    "forever": "0.14.1", 
    "gulp": "^3.9.0", 
    "gulp-chmod": "^1.2.0", 
    "gulp-inject": "^1.3.1", 
    "gulp-useref": "^1.2.0", 
    "grunt": "0.4.5", 
    "grunt-cli": "0.1.13", 
    "grunt-contrib-copy": "0.8.0", 
    "grunt-ssh-deploy": "~0.2.8", 
    "react": "15.1.0" 

    },

index.htmlに/この

<!DOCTYPE html> 
<html> 

    <body> 
    <div id="outer-container"> 
    <h1>This is the outer container</h1> 
    </div> 
    <script type="text/javascript" src="dist/react-dom.js"></script> 
    <script type="text/javascript" src="dist/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    <script type="text/babel" src="js/components/outerContainer.js"></script>

のように見えますが、以下のようにノードの依存関係を設定し

ように続くものです/コンポーネントjsファイル

私はクライアント側でこれを使用しようとしています、次のエラー

react-dom.js:41 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined

と

Uncaught TypeError: React.CreateClass is not a function

との

このエラーアウト。そして、両方のソースファイルがブラウザにロードされているのが見えます。

出典

2016-05-26 user_mda

あなたがたどったガイドはちょっと古いかもしれません。ここにはいくつかのものがあります：

React.renderComponent DOMにコンポーネントをレンダリングする現在の方法は、ReactDOM.renderを使用することです：
```
ReactDOM.render(
    <Hello now={new Date().toString()} />, 
    document.getElementById('outer-container') 
); 
```
あなたは大文字と小文字の区別の問題を持っている：あなたは、react.CreateClassを呼んでいる、方法が実際にReact.createClassあるとき。 JavaScriptは大文字と小文字を区別する言語です。
の後にスクリプトタグの後にコンポーネントをレンダリングする必要があります。スクリプトファイルはインラインで実行されるため、document.getElementByIdへの呼び出しは失敗します。その要素はページにまだ存在しないためです。

スクリプトタグは、ブラウザがネイティブに理解できないタイプtext/jsxを使用します。ブラウザでサポートされているjsxプロセッサを含める必要があります。バベルのbrowser.jsは動作するはずですが、あなたはtext/babelへtext/jsxからtypeを変更する必要があります：

<!DOCTYPE html> <html> <head> <title> P4 Web Query </title> </head> <body> <div id="outer-container"> <h1>This is the outer container</h1> </div> <script type="text/babel" src="js/components/outerContainer.js">/script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> </body> </html>

出典

2016-05-26 16:32:11 rossipedia

役立つのthatsおかげで、私はyur応答に基づいて、私のファイルを編集したが、それでも、それは働いて得るいけません。編集した質問 –

を参照してください。あなたは 'react-dom.js'_after_' react.js'を含める必要があります。順序は重要です。 – rossipedia

あなたはまだ大文字の 'CreateClass'を使用しています。それは小文字にする必要があります： 'createClass' – rossipedia

答えて

関連する問題