Question

我试图了解如何在React应用程序中创建（导出可能？）和使用（导入？）组件？例如，下面的小型React应用程序是.HTML文件，运行正常。它一遍又一遍地显示随机数。所以，如果我想把ShowRandomNumbers类扩展到一个单独的文件（带有什么.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" />

但这些文件我只是使用简单的编辑器和另存为独立文件创建。我已经用Google搜索了导出默认和导入，我看到了类似的语法出口默认App;并从＆＃39; ./ App.jsx＆＃39;中导入应用程序;但是没有明确的＆＃34;如何。＆＃34; 我是否需要实用程序来创建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>

Answer 1

为了利用导入/导出，您需要使用模块捆绑器。 Webpack是React应用程序的标准选择。基本上，这允许您从一个文件导出组件（以及其他javascript函数，常量等）并将它们导入另一个文件并使用它们。 Webpack通过从根应用程序文件开始分析导入/导出来构建依赖关系图。它将所有必要的代码捆绑在一起，并为您提供一个文件，您可以通过脚本标记包含该文件，就像您习惯的那样。

学习如何使用Webpack设置项目对于很多人来说可能有点令人生畏，也是一个绊脚石。如果您刚开始使用React，我强烈建议您查看Create React App。它为您提供了一个现代化的React开发环境，您无需担心任何配置。

如何制作和使用React组件？

1 个答案: