どのようにして反応成分を作り、使うのですか？

Reactアプリケーションでコンポーネントを作成（エクスポートするかどうか）と使用（インポート？）する方法を理解しようとしていますか？たとえば、以下の小さなReactアプリは.HTMLファイルであり、うまく動作します。それは、乱数を繰り返し表示します。ですから、ShowRandomNumbersクラスをReact.Componentを別のファイル（拡張子.JSX？）に置き換えて、import文を使ってHTMLファイルで使用する場合、どのようなステップが必要ですか？行う？どのようにして反応成分を作り、使うのですか？

私はのように、外部のJSとCSSファイルを使用しての概念に慣れている：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

と

<link rel="stylesheet" href="../../css/base200.css" />

が、私は単にシンプルなエディタで作成し、保存し-として、それらのファイルスタンドアロンファイル。私は輸出のデフォルトと輸入についてgoogledを行っており、デフォルトのアプリケーションをエクスポートするような構文があります。 './App.jsx'からアプリケーションをインポートする。しかし、明確な「方法」はありません。 JSXファイルを作成するにはユーティリティが必要ですか？

ステップバイステップが評価されます。ありがとうございます。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
<title>79E - ALL CDN</title> 
</head> 

<body> 

<div id="container"></div> 

<script type="text/babel"> 

class ShowRandomNumbers extends React.Component { 

constructor(props) { super(props); } 

render() { 

       var elapsed = Math.round(this.props.timeNow/100); 
       var seconds = elapsed/10 + (elapsed % 10 ? '' : '.0'); 
    var r1 = this.props.random1; 
    return(<p >Running for {seconds} seconds. Random 1 is: {r1} Random 2 is: {this.props.random2}  </p >); 

} // render -- END 
} // Class - End 

var start = new Date().getTime(); 

setInterval(function() 
        { 
    ReactDOM.render( <ShowRandomNumbers 
       timeNow={ new Date().getTime() - start } 
       random1= { Math.floor(Math.random() * (500 - 100 + 1)) + 100 } 
       random2= { Math.floor(Math.random() * (600 - 100 + 1)) + 100 } 
                 />, 
      document.getElementById('container') ); 
    }, 
        50); 
</script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> 

</body> 
</html>

出典

2017-03-25 Milton Valler

jsxファイルを直接使用することはできません。ブラウザはjsxファイルを認識しません。それをjsファイルに変換する必要があります。この作業には、[このモジュール]（https://www.npmjs.com/package/babel-preset-react）を使用することができます。 –

お返事ありがとうございます。私はバベルとnpmなどを見てきました。再インポート/エクスポート、それはインポート（ちょっと間違っている）のようですが、まあ、まあ、偽です！そのウェブパックでは、すべてが1つのモジュールにまとめられているので、「実際の」動的な読み込みはありません。必要に応じてロードするWindow OSの.dllと同じように。この場合、通常のスクリプトステートメントと同じではありませんか？

どのようにして反応成分を作り、使うのですか？

関連する問題