如何制作和使用React组件？

我想了解如何在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>

来源

2017-03-25 Milton Valler

一个jsx文件不能直接使用，浏览器不理解jsx文件。你需要将它传递给一个js文件。您可以使用[此模块]（https://www.npmjs.com/package/babel-preset-react）执行此任务。 –

感谢您的回复。我一直在看babel和npm等。重新导入/导出，在我看来（可能是错误的），进口是有点，假的！在那个webpack中，所有的东西都是一个模块，所以没有“真正的”动态加载。就像说，在需要时加载的Window OS中.dll。在这种情况下，它不就像是一个普通的脚本语句吗？

如何制作和使用React组件？

相关问题