2017-07-20 16 views
2

私はReactにとても慣れていて、問題があります。今までコードを実行しようとすると、"Bad JSFiddle configuration, please fork the original React JSFiddle"という警告が表示されます。JSFiddle設定が正しくありません

<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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> 
 

 
<div id="container"> 
 

 
</div> 
 

 
<script> 
 
    var Hello = React.createClass({ 
 
    render: function() { 
 
     return <div > Hello { 
 
     this.props.name 
 
     } < /div>; 
 
    } 
 
    }); 
 

 
    ReactDOM.render(< 
 
    Hello name = "World"/> , 
 
    document.getElementById('container') 
 
); 
 
</script>

私は文字通りコピーFacebookのJSFiddleベースラインからそれを貼り付け:ここ

は私は、コードを反応させるのです。

私が逃しているものを理解するのに役立つことができますか?

+0

これらのスクリプトは、フィドルをフォークする場合にのみ機能します。 – T4rk1n

+0

これらのスクリプトを使用せずにjsfiddleで反応する方法はありますか? –

+0

左のパネルを使ってこれらのスクリプトを追加してみませんか? – Muhaimin

答えて

1

JSXを使用しているため、Facebookは設定をJS 1.7に制限しています.JavaScriptにコンパイルするには、Babelを使用する必要があります。

コンパイル済みスクリプト(JSX)リンクとコーヒースクリプトの構文を使用すると、リアクションコードサンプルを実行できます。

は、この作業コードを試してみてください。https://jsfiddle.net/9gnkLgex/

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> 

<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 

<script> 
    Hello = React.createClass(
    displayName: 'Hello', 
    render:() -> 
     React.createElement("div", null, "Hello ", this.props.name) 
) 

React.render(
    React.createElement(Hello, {name: "World"}), 
    document.getElementById('container') 
) 
</script> 

はそれが役に立てば幸い!

関連する問題