私のhtmlファイルに反応コンポーネントが必要です

Question

expressでnode.jsサーバーをセットアップしました。jsxコードを含むhtmlページをレンダリングしています。私のメインスクリプトでそれらを使用するために、他のjsxコンポーネントをhtmlファイルにインポートする方法がわからないことを除いて、すべてうまく動作しています。

私は

<script type="text/babel" src="./Modulo.jsx" /> 

ような何かをしようとしました。しかし、私はGET http://localhost:5000/Modulo.jsx

エラーがここに私のModulo.jsx

var Modulo = React.createClass({ 
    render: function() { 
    return(
     <h1>Hello</h1> 
    ) 
    } 
}); 

の内容だと、これは取得私のメインモジュールindex.js

var express = require('express'); 
var React = require('react'); 
var app = express(); 

var server = require('http').Server(app); 
var swig = require('swig'); 
var path = require('path'); 

app.engine('html', swig.renderFile); 
app.set('view engine', 'html'); 

server.listen(5000); 
app.get('/', function (req, res) { 
    res.render('ModuleScreen'); 
}); 

ModuleScreenは、それはあなたがセットアップは、静的なファイルを提供するために発現しているように、あなたはあなたのセットアップで、次のようなものを持っている必要があり聞こえる私は私のModulo.jsx

Answer 1

をインポートしようと、単純なHTMLファイルです：

app.use(express.static(path.join(__dirname, 'public'))); 

これはあなたのscriptタグが必要とするものである静的なリソースとしてpublicディレクトリにあるすべてのものを提供します。

---

ただし、通常はHTMLに直接他のJSXモジュールをインポートしないと、それはのようなもの使ってメインバンドルにインポートする必要があります。

var Modulo = require('./Modulo.jsx'); 

をあなたも配置する必要がありますあなたのModulo.jsxファイルの一番下の行を次のよう：あり/インポートモジュールを必要とする他の方法がありますが、それはおそらく行くための方法だ

module.exports = Modulo 

。より多くの助けが必要な場合は、メインモジュールとより多くのHTMLとビルドプロセス（ブラウザにビルドする場合を含む）を使用して答えを更新してください。

Answer 2

最初に：jsxはブラウザが理解できるものではありません。あなたは反応プリセット、またはwebpackとbabelのようなツールを使用してjavascriptにそれをtranspileする必要があります。

2番目：同じコードをjsに貼り付けてhtmlに入れても、何もしません。 reactDOMを使用してDOM要素にマウントする必要があります。次のようなもの：

ReactDOM.render('<Modulo/>', document.querySelector('#root'))