未知のSyntaxError：埋め込み：予期しないトークンvar Comment = React.createClass（{...}）;

こんにちは、スタックオーバーフローの素晴らしい人。私は今REACTJSを学んでいます。 Uncaught SyntaxError：埋め込み：予期しないトークンvar Comment = React.createClass（{...}）;私はここで何が起こっているかわからない `未知のSyntaxError：埋め込み：予期しないトークンvar Comment = React.createClass（{...}）;

<body> 

<div id="example"> 

</div> 

<div id="container"> 

</div> 
<script type="text/babel"> 

var Comment = React.createClass({...}); 

var Board = React.createClass({ 
    getinitialState: function(){ 
    return{ 
     comments: [ 
     "I like bacon.", 
     "Want to get ice cream?", 
     "Okay, we've got enough comments now." 
     ] 
    } 
    }, 
    render: function() { 
     return(
     <div className="board"> 
      { 
      this.state.comments.map(function(text, i){ 
       return(<Comment key={i}>{text}</Comment>); 
      }) 
      } 

     </div> 
    ); 
    } 

}) 
ReactDOM.render(<Board/>, document.getElementById("container")); 



</script> 








    <script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <!-- older transpiler 5.8.24 works with this app--> 

</body>

：

は、ここに私のコードです。私は "var Comment = React.createClass（{..}）の配列を持つはずのvar Commentを介してコンポーネントを作成しようとしています;なぜ使用される配列として認識しないのかわかりません。

出典

2016-08-25 Marcode777

あなたはあなたのスクリプトタグによって理解されていないJSXのコードを反応させるの書いている。WebPACKのを使用するか、にあなたのJSXをバンドルするbrowserifyいずれかリアクトコードを実行するためにとファイルにコピーして、.jsファイルをスクリプトタグに含めるか、コードをテストするためにJSFIDDLEを使用してコードを記述します。それはJSXのための統合を持っています。

サンプルwebpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    } 
}; 

module.exports = config;

index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
var Board = React.createClass({ 
    getinitialState: function(){ 
    return{ 
     comments: [ 
     "I like bacon.", 
     "Want to get ice cream?", 
     "Okay, we've got enough comments now." 
     ] 
    } 
    }, 
    render: function() { 
     return(
     <div className="board"> 
      { 
      this.state.comments.map(function(text, i){ 
       return(<Comment key={i}>{text}</Comment>); 
      }) 
      } 

     </div> 
    ); 
    } 

}) 
ReactDOM.render(<Board/>, document.getElementById("container"));

index.htmlを

<body> 

<div id="example"> 

</div> 

<div id="container"> 

</div> 
<script src="./src/bundle.js"></script> 
</body>

あなたALSすべての依存関係を提供するためにpackage.jsonを持つ必要があります。

Hereあなたは新しい.jsxファイルにあなたのJSXコードを移動し、私は会ったあなたの.html

出典

2016-08-25 04:03:07

Hey Shubham Khatri、あなたの非常にきめ細かな対応に感謝します。私はあなたが専門家であることをそれから知ることができます。私はこれを調べます。もう一度ありがとう。 – Marcode777

おかげさまで –

npmをインストールしてwebpackと入力すると、「-bash：webpack：command not found」と表示されます。これは権限ですか？私が "うわみ"とタイプすると、作者は私なので、まだ分かりません。 – Marcode777

JSX構文はスクリプトタグでは理解できません。JavaScriptをコンパイルする必要があります。JSFiddle JSFiddleには、動作する統合スクリプトがあります。反応する。

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"> 
</script>

出典

2016-08-25 02:57:11 vijayst

こんにちはビジェイ、私の質問に答えるために感謝します。しかし、私はすでに下にバベルの雲のスクリプトがあります。これはあなたが話していることです、そうではありませんか？ – Marcode777

のお手伝いをすることができます良いビデオチュートリアルシリーズですあなたと同じ問題は、私たちは同じチュートリアルのビデオを見ていたようです：

とにかく、getinitialStateはgetInitialStateでなければなりません。第4の手紙を見てください。

出典

2016-08-25 04:55:13

ありがとう、Nahush Farkande。 – Marcode777

いいえ問題：）... –

でそのファイルを参照しようとすることができ、すべての構成

出典

2017-12-29 22:06:19

上記セクションに記載されているスニペットコードを1つ変更してください。マイナーなスペルミスを修正しました。

getinitialState() should be getInitialState().

ES5 getInitialState（）は、状態変数React.createClass（..）を初期化するために使用します。

ES6コンストラクタ（）を使用して状態変数を初期化しました。クラスComment React.Component（..）

ここにES6の別の例がありますので、これをチェックしてください。

<!DOCTYPE html> 
    <html> 

    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title></title> 
    </head> 

    <body> 
     <div id="content"></div> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
     <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script> 


     <script type="text/babel"> 

      class CommentBox extends React.Component{ 
      constructor(props){ 
       super(props); 
       this.state = { 
       editable : false, 
       commentMsg : ">>" 
       }; 
      } 

      save(event){ 
       this.setState({commentMsg:event.target.value}) 
      } 
      remove(){ 
       this.setState({ 
        editable:false 
       }) 
      } 
      edit(){ 
       this.setState({ 
        editable:true 
       }) 
      } 
      renderForm(){ 
       return (
       <div className="row"> 
        <div>{this.props.children}</div> 
        <div><textArea name="commentBox" onChange={this.save.bind(this)}></textArea></div> 
        <button type="button" className="btn btn-danger">Save</button> 
        <button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button> 
        {this.state.commentMsg} 
       </div> 
       ); 
      } 
      renderHtml(){ 
       return (
        <div className="row"> 
        <div>{this.props.children}</div>  
        <div>{this.state.commentMsg}</div> 
        <button type="button" className="btn btn-danger" onClick={this.edit.bind(this)}>Edit</button> 
        <button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button> 
        </div> 
       ); 
      } 

      render() { 
       if(this.state.editable){ 
        return this.renderForm(this); 
       }else{ 
        return this.renderHtml(this); 
       } 
      } 
      } 

     class Board extends React.Component{ 
      constructor(props){ 
       super(props); 
       this.state ={ 
        comments:[ 
         'Techical Comments', 
         'Wordpress Comments', 
         'Facebook Comments' 
        ] 
       } 
      } 

      render(){ 
       return(
        <div className="container-fluid">{ 
        this.state.comments.map(function(text,i){ 
         return (
          <CommentBox key={i}>{text}</CommentBox> 
         ); 
        }) 
        } 
        </div> 
       ); 
      } 
     } 
     ReactDOM.render(
      <Board /> 
      , document.getElementById('content')) 
     </script> 
    </body> 

    </html>

出典

2018-02-06 16:23:58 Ajay

未知のSyntaxError：埋め込み：予期しないトークンvar Comment = React.createClass（{...}）;

答えて

関連する問題