Javascript 将组件拆分为多个文件_Javascript_Html_Reactjs

Javascript 将组件拆分为多个文件

javascript html reactjs

Javascript 将组件拆分为多个文件,javascript,html,reactjs,Javascript,Html,Reactjs,我只在一周内学习了React，所以我是新手，我正在尝试编写一个简单的todo应用程序最初，我将所有组件编写在一个文件中，并将该文件加载到HTML文件中，效果非常好。现在我正在重构并尝试将组件拆分为不同的文件我的完整代码位于我的Github上的解压文件分支上我已经将每个组件分割成不同的文件，并在脚本标记中将它们链接到我的HTML中。这是我的HTML文件的外观： <!DOCTYPE html> <html> <head> <meta cha

我只在一周内学习了React，所以我是新手，我正在尝试编写一个简单的todo应用程序

最初，我将所有组件编写在一个文件中，并将该文件加载到HTML文件中，效果非常好。现在我正在重构并尝试将组件拆分为不同的文件

我的完整代码位于我的Github上的

解压文件分支上
我已经将每个组件分割成不同的文件，并在脚本标记中将它们链接到我的HTML中。这是我的HTML文件的外观：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
    <script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
    <script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
    <script type="text/babel" src="scripts/components/TodoList.js"></script>
    <script type="text/babel" src="scripts/components/SingleTodo.js"></script>
    <script type="text/babel" src="scripts/components/AddTodo.js"></script>
    <script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>

    <script type="text/babel">
      ReactDOM.render(
        <TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
        document.getElementById('container')
      );
    </script>
  </body>
</html>


事項清單
ReactDOM.render(
,
document.getElementById（'容器'）
);

在控制台中，我总是收到错误消息uncaughtreferenceerror:TodoListApp未定义
。我试着按不同的顺序加载它们，但没有成功。我也看过很多视频，他们在没有使用webpack的情况下采用了非常相似的方法，这对他们很有用。我想在不使用webpack的情况下先让它工作，然后继续学习
有人知道我哪里出错了吗？
您必须将组件添加到全局<代码>窗口

变量中，以便在html<代码>脚本标记中使用它们。比如

window.TodoListApp=…

<代码>变量声明与您在其中声明它的文件相关

但将部分代码公开到全局范围并在浏览器中传输JSX被认为是一种不好的做法。相反，你应该考虑使用一些建筑系统，比如：

通过这种方式，您可以将组件从一个文件导入到另一个文件，将所有内容捆绑到一个文件中，并获得更多额外的好处，如代码缩减、源地图、livereload等

谢谢您的建议。我没有使用ES6，您提供的资源都在使用它。ES5还能用吗？是的。只是不要使用babel loader和常规节点CommonJS模块——我同意作者的观点。对于不太陡峭的学习曲线，必须能够在不使用webpack的情况下实现这一点。