0
我想了解如何在React應用程序中創建（導出？）和使用（導入？）組件？例如，下面的小React應用程序是一個.HTML文件，運行良好。它一遍又一遍地顯示隨機數字。因此，如果我想將ShowRandomNumbers類擴展爲單獨的文件（擴展名爲.JSX？），並將其用於具有導入語句的HTML文件，那麼我需要執行哪些步驟做？如何製作和使用React組件？
我已經習慣了使用外部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" />
但這些我只是一個簡單的編輯器創建並另存爲文件獨立文件。我已經搜索了關於導出默認和導入，並且我看到類似 導出默認應用的語法;並從'./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>
一個jsx文件不能直接使用，瀏覽器不理解jsx文件。你需要將它傳遞給一個js文件。您可以使用[此模塊]（https://www.npmjs.com/package/babel-preset-react）執行此任務。 –
感謝您的回覆。我一直在看babel和npm等。 重新導入/導出，在我看來（可能是錯誤的），進口是有點，假的！在那個webpack中，所有的東西都是一個模塊，所以沒有「真正的」動態加載。就像說，在需要時加載的Window OS中.dll。在這種情況下，它不就像是一個普通的腳本語句嗎？