CDNを使用して既存のノードエクスプレスアプリに反応を統合

私はノードを使用してWebアプリケーションを作成し、反応します。 NodeとReactのアプリケーションを分離するのではなく、Reactを統合したいと思っています。したがって、反応するアプリではなく、反応するCDNをindex.htmlにインポートしようとしました。私のサーバはindex.htmlを完全に提供していますが、反応コンポーネントにエラーが発生しています。CDNを使用して既存のノードエクスプレスアプリに反応を統合

これは私のindex.html

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Powered chat App</title> 
    </head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script> 
    <script src="/scripts/main.js" charset="utf-8"></script> 
    <body> 
    Hello ! 
    <div id ='App'></div> 
    </body> 
</html>

であり、これは私が得ているエラーが

Uncaught SyntaxError: Unexpected token <      main.js:4

私が間違って何をした？ある私のmain.js

class App extends React.Component { 
    render(){ 
    return (
     <div> 
     Hello ! 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('App'));

ですかCDNと反応させることはできないのですか？

最初に私がreact/cjs/react.developmentライブラリを使用したときに、より多くのエラーが発生しました。その後、読んだ後this stackoverflowの質問私は/反応/ umd /ライブラリを使用します。では、cjsとumd CDNライブラリの違いは何ですか？

出典

2017-12-31 Thidasa Paranavitharana

あなたは公式サイトから[ReactDOMServer]（https://reactjs.org/docs/react-dom-server.html）このドキュメントを参照していますか？ –

ため、ブラウザで読むことができませんJSX（ジャバスクリプト内のHTML）を、使用し、ブラウザで読み取ることができ、通常のJavaScriptにtranspiledする必要が反応します。そのような蒸散器の1つはバベルです。あなたのコードは、transpilerがないために動作しません。

あなたが反応を始めるために必要がありますtranspiler、すべてがバンドルされていcreate-react-appを、使用することができます。また、わかっているように、エクスプレスバックエンドを追加したいので、ここではtutorialがあります。これは、エクスプレスバックエンドにcreate-react-appをアタッチするのに役立ちます。お役に立てれば。

出典

2017-12-31 07:31:35 illiteratewriter

はいわかりました。しかし、その後、私は別にサーバーを反応させる必要がありますか？または、高速静的ミドルウェアを使用してindex.htmlを提供することは可能ですか？はapp.use（express.statis（dirname + '../client'））のようです。 –

できますが、微妙な調整が必要です。 https://blog.codingbox.io/react-for-beginners-part-1-setting-up-repository-babel-express-web-server-webpack-a3a90cc05d1eこのリンクを確認してください。これは高速サーバー上で反応しますが、ホットリロードはありません。だから毎回再起動する必要があります。しかし、これにホットリロードを追加することができます。 – illiteratewriter

私は両方のチュートリアルを試しました。反応アプリを使用するものは別途動作します。そして今、私はその概念をはっきりと理解しています。 –

JSX（JavaScriptで振りかけHTMLコード）は通常のJavaScriptまたはES6コードではありませんので、あなたは、あなたのブラウザーで直接ロードすることはできません。

問題はReactライブラリをCDNから取得できないため、問題ありません。

問題はバベルを使用して、たとえば、通常のJavaScriptコードにあなたのmain.jsファイルをtranspileしなければならないということです。自動的にバベルでこれtranspilationを行うには

最も一般的に使用されるツールは、WebPACKのです。あなたが詳細にWebPACKのとバベルをセットアップする方法を学習したくない場合は

は、私がcreate-react-appを使用することをお勧めします、これはあなたの肩から定型のすべてを設定する負担がかかり、JavaScriptのバンドルを作成し、そのことができますあなたのブラウザで直接使用してください。

Note：あなたがcreate-react-appを使って終わると、CDNからReactライブラリを入手する必要はありません。すでにそれがバンドルに含まれています。

コードは動作しません

出典

2017-12-31 07:07:15

はい、わかりました。しかし、その後、私は別にサーバーを反応させる必要がありますか？または、高速静的ミドルウェアを使用してindex.htmlを提供することは可能ですか？はapp.use（express.statis（dirname + '../client'））のようです。 –

確かに、CRAサーバーは実際には便宜上のものであり、コードの作業中にホットモジュールの再読み込みが行われます。しかし、Express静的ミドルウェアで提供できるJSバンドルの作成にも使用できます –

create-react-appからindex.htmlを提供することはできませんが、npmを実行すると作成されたJavascriptバンドル –

CDNを使用して既存のノードエクスプレスアプリに反応を統合

答えて

関連する問題