Reactコンポーネントを複数のファイルに分割する

私は1週間でReactを学んだだけなので、初めてです。単純なtodoアプリを書くつもりです。Reactコンポーネントを複数のファイルに分割する

元々、すべてのコンポーネントを1つのファイルに書き込んで、そのファイルをHTMLファイルに読み込んだので、うまくいきました。今、私はリファクタリングし、コンポーネントを別のファイルに分割しようとしています。

私のフルコードは私のGithub https://github.com/yasgreen93/todolist-reactextracting-filesブランチにあります。

私は各コンポーネントを別々のファイルに分割し、それらをスクリプトタグで自分の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を取得：これは私のHTMLファイルには、次のようになります。私は成功していないさまざまな順序でそれらをロードしようとしました。私はwebpackを使わずに非常に似たアプローチをしている多くのビデオも見てきました。私はwebpackを使わずにこれを最初にやってみたいと思っています。

どこに間違っているのか誰にでも見えますか？

出典

2016-06-11 yasgreen

グローバルwindow変数にコンポーネントを追加する必要があります。これは、htmlのscriptタグで使用するためです。 window.TodoListApp =...のように。 var宣言は、宣言したファイルからの相対パスです。

しかし、あなたのコードの一部をグローバルスコープに公開し、JSXをブラウザーで公開することは悪い習慣と考えられます。代わりに、Webpackのようないくつかのビルディングシステムを使用することを検討する必要があります。

使用すると、1つのファイルにすべてのものをバンドルして、別のファイルからコンポーネントをインポートするes2015 import syntaxを使用することができるだろう。この方法で多くのコードの縮小、sourcemaps、livereloadなどのような複数の付加的なメリット

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

出典

2016-06-11 11:54:50

ありがとうございます。あなたが提供したリソースがすべて使用しているES6は使用していません。 ES5でもまだ動作しますか？ – yasgreen

はい。 babelローダーを使用せず、通常のノードCommonJSモジュールを使用しないでください - https://webpack.github.io/docs/commonjs.html –

私は著者に同意します。それほど急峻ではない曲線のために、ウェブパックなしでこれを行うことが可能でなければならない。 –

Reactコンポーネントを複数のファイルに分割する

答えて

関連する問題