javascript - 如何在没有 webpack、node、nvm 等的情况下使用 React-6ren

javascript - 如何在没有 webpack、node、nvm 等的情况下使用 React

转载作者：行者123 更新时间：2023-11-30 15:30:10

我正在尝试在没有 webpack、node 等的情况下使用 React。我想在单独的文件中构建每个组件，这就是我正在做的:

index.html

<html>
<body>
    <div id="root">
      <!-- This div's content will be managed by React. -->
    </div>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="js/demandAnalysis/app.js"></script>
    <script type="text/babel">
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

App.js

import SimpleButton from './componets/Buttons/SimpleButton.js';

    class App extends React.Component {
      render() {
        return (
          <div>
            <Button/>
          </div>
        );
      }
    }

SimpleButton.js

class SimpleButton extends React.Component {
   render() {
      return (
         <div>
            <button type="button">Click me!</button>
         </div>
      );
   }
}

但是在控制台中给我这个错误:

Uncaught ReferenceError: require is not defined

我认为是 import 造成的，如何在没有节点或 web pack 的情况下使用这种结构？

最佳答案

import 是 ES6 的特性，目前很多浏览器不支持。这就是为什么使用 babel 将代码转换为 ES5 的原因。对于您正在使用的 class、extends 和 JSX 也是如此。

如果你不想使用转译器，你应该使用 require 而不是 import 和 React.createClass({ ... }) 而不是 class。

require 而不是 import 的示例:

var SimpleButton = require('./componets/Buttons/SimpleButton.js');

关于javascript - 如何在没有 webpack、node、nvm 等的情况下使用 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42376536/

文章推荐： c# - 如何找到一段代码的执行时间？

文章推荐： c - 删除字符串的子字符串

文章推荐： javascript - 如何在 emscripten 中使用 preamble.js 文件？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在没有 webpack、node、nvm 等的情况下使用 React