分裂反应的组分成多个文件

我只学反应。在一个星期，所以我是新来的，而且我想写一个简单的待办事项应用程序。分裂反应的组分成多个文件

本来我写的所有组件在一个文件并加载该文件到HTML文件和它的工作很大。现在我正在重构并尝试将组件分割成不同的文件。

我完整的代码是在我的Github上https://github.com/yasgreen93/todolist-react在extracting-files分支。

我已经分手了每个组件成不同的文件，并有一个链接他们的脚本标记到我的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>

在控制台中，我总是得到错误信息Uncaught ReferenceError: TodoListApp is not defined。我试图以不同的顺序加载它们，但没有成功。我也观看了许多视频，他们在没有使用webpack的情况下采用非常类似的方法，并且适用于他们。我想在不使用webpack的情况下先开始工作，然后继续学习。

任何人都可以看到，我错了？

来源

2016-06-11 yasgreen