如何制作和使用React组件？-Java 学习之路

我试图了解如何在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搜索导出默认和导入，我看到像export export app这样的语法;并从'./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>

1 回答

1

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

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

回复于 2024-04-19T00:56:11+08:00

如何制作和使用React组件？

1 回答

相关问题