Html React js with jsx:Uncaught ReferenceError:require未定义_Html_Reactjs_Jsx

Html React js with jsx:Uncaught ReferenceError:require未定义

html reactjs

Html React js with jsx:Uncaught ReferenceError:require未定义,html,reactjs,jsx,Html,Reactjs,Jsx,在我现有的web应用程序中，我有一个index.js文件，其中有一个按钮和一个谢谢.js文件，或者有一条谢谢你的消息，用jsx编写，现在如果有人点击按钮，我就会显示消息。如果我试图将感谢组件导入index.js无效，我会得到此错误未捕获引用错误：未定义require index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met

在我现有的web应用程序中，我有一个

index.js

文件，其中有一个

按钮

和一个

谢谢.js

文件，或者有一条

谢谢你的消息

，用jsx编写，现在如果有人点击按钮，我就会显示消息。如果我试图将

感谢组件

导入

index.js

无效，我会得到此错误

未捕获引用错误：未定义require

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My app</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <div class="title m-b-md">
                    <div id="like_container"></div>
                </div>
            </div>
        </div>
        <!-- Load React. -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <!-- Babel -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <!-- Load our React component. -->
        <script src="js/src/index.js" type="text/babel"></script>
    </body>
</html>


我的应用程序

index.js

'use strict';

import Thanks from './thanks';

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

let domContainer = document.querySelector('#like_container');
ReactDOM.render(<Like />, domContainer);

“严格使用”；
从“/谢谢”导入感谢；
类扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={liked:false}；
}
render（）{
if（this.state.liked）{
返回；
}
返回(
this.setState（{liked:true}}>
喜欢
);
}
}
让domContainer=document.querySelector（“#like_container”）；
render（，domContainer）；

谢谢

'use strict';

export default class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

“严格使用”；
导出默认类。组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

谢谢你的喜欢！

);
}
}

请帮忙

如果您使用npx create react app my app创建应用程序-在引擎盖下，您将获得Babel和

捆绑程序（如webpack或Parcel）允许您编写模块化代码，并将其捆绑到小的包中，以优化加载时间

如果你像你一样通过添加React/babeljs文件来添加React到一些现有的应用程序中

<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
....

为了解决这个问题，你可以在你的项目中添加一些bundler（这可能是解决这个问题的正确方法，尤其是如果你有一个大的应用程序）

或者，您可以将React代码放入JS文件（或单个文件），并使用

将其与React JS文件一起加载：

在这种情况下，您不需要在任何地方进行任何导入，因为您将加载所有组件，因此您可以随时使用它们

例如：

my components.js

class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

class.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

谢谢你的喜欢！

);
}
}
类扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={liked:false}；
}
render（）{
if（this.state.liked）{
返回；
}
返回(
this.setState（{liked:true}}>
喜欢
);
}
}

然后加载它：

<script src="my-components.js" type="text/babel"></script>
<script src="js/src/index.js" type="text/babel"></script>

由于感兴趣，可以添加不带npm的捆绑程序，npm在我的情况下不可用？@Diyata如果您不使用包管理器，可能会有点棘手。您需要选择要使用的bundler，然后按照它的文档说明如何添加和配置它。e、 g.以下是如何在本地添加网页包@Diyata Happy Hacking:）

class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

<script src="my-components.js" type="text/babel"></script>
<script src="js/src/index.js" type="text/babel"></script>