npmとサーバーを使わない単純なReactjsアプリですか？

npmとserver.py、server.jsなどを使わずに単純なReactjsアプリケーションを作成したいと思います。ブラウザでindex.htmlを実行したいだけです。現在私が得ていることは何もレンダリングされず、ブラウザに白い空白の画面が表示され、コンソールにもエラーはありません。私は以下のスクリプトを含んでいます。ここでnpmとサーバーを使わない単純なReactjsアプリですか？

は私のindex.htmlです。ここ

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12350972_1539644969670605_801198237_n.js"></script> 
    <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12056978_1723186904561917_1347349243_n.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/babel" src="app.js"> 

    </script> 
    </body> 
</html>

app.js DOMに特定のコンポーネントをレンダリングしている私のjsです。

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
);

これは私のapp.js

で更新

今、私はこのエラーメッセージを取得しています

クロスオリジン・リクエストは、唯一のプロトコルスキームでサポートされています：http、データを、 chrome、chrome-extension、https、chrome-extension-resourceなどがあります。

出典

2016-04-15 Sushant

あなたは 'app.jsを含める必要がある場合は私の心のトップをオフに覚えていることはできません「ここでも - あなたのコードが見えなくても、何が問題なのかを理解するのは難しいです。 –

また、コンソールのエラーを調べる – rubentd

ChromeのXSSが非常に厳しいため、レンダリングしようとするものはFireFoxで行う必要があります。ローカルホストサーバーでこれらのすべてを実行することは、非センスのすべてをバイパスする1つの方法です。 – coderrick

たぶん、この命令とスターターキットは、あなたのための役に立つかもしれない：https://facebook.github.io/react/docs/getting-started.html

出典

2016-04-15 14:01:57 rubentd

問題はその場でバベルで処理されていない反応JSXです。 JSXを削除すると、正常に動作します：

https://jsfiddle.net/zevndLog/

var MyComponent = React.createClass({ 
    displayName: 'MyComponent', 

    render: function render() { 
    return React.createElement(
     'div', 
     null, 
     'Hello' 
    ); 
    } 
}); 

ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('container'));

/あなたがその場でJSXをコンパイルするバベルを伝える方法

出典

2016-04-15 14:10:32

npmとサーバーを使わない単純なReactjsアプリですか？

答えて

関連する問題