分裂反應的組分成多個文件

我只學反應。在一個星期，所以我是新來的，而且我想寫一個簡單的待辦事項應用程序。分裂反應的組分成多個文件

本來我寫的所有組件在一個文件並加載該文件到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