ReactJSの子コンポーネントエラーのインポート/エクスポート

Question

子コンポーネントをエクスポートして、腐敗ディレクトリ（App.js）にインポートしてブラウザに表示するだけですが、このエラーメッセージは端末「モジュールエラー： 'ファイル'または 'ディレクトリ'を解決できません。間違って入力したことや、なぜ私のApp.jsに私の子供をインポートできないのか分かりません。

この問題を解決しようとしましたが、結果はありませんでした。私はより多くの明示的な名前を得るために、私の「App.js」でこれをテストしたが動作していないされてきた。

import { ContactsList } from './ContactsList'; 

私も私の「ContactsList.js」でなく、結果なしでこれを入力して試してみた：

export default class ContactsList extends React.Component {} 

私は初心者ですので、私の知識は失礼ですが、私は本当にこれとリアクションの力を学びたいと思っています。理解を深めてください！

-------- App.js ---------

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ContactsList from './ContactsList'; 


class App extends React.Component { 
    render() { 
     return (
      <div> 
       <h1>Contacts List</h1> 
       <ContactsList /> 
      </div> 
     ) 
    } 
} 
ReactDOM.render(<App />, document.getElementById('app')); 

-------- -------- ContactsList.js - あなたのContactsList.jsファイルで

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class ContactsList extends React.Component { 
    render() { 
     return (
      <ul> 
       <li>Joe 555 555 5555</li> 
       <li>Marv 555 555 5555</li> 
      </ul> 
     ) 
    } 
} 
export default ContactsList; 

-------- webpack.config.js ---------

module.exports = { 
    entry: './src/App.js', 
    output: { 
     path: __dirname, 
     filename: 'app.js' 
    }, 
    module: { 
     loaders: [{ 
      test:/\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }] 
    } 
}; 

Answer 1

、ラップに<div>を使用<ul>

webpack設定ファイルにもあります。代わりにローダーの「バベル・ローダー」：あなたはローダーを使用しようとすることができます「バベル」（バベル・ローダー・パッケージをインストールすることを忘れないでください）

またクエリ部分を削除して、作成しよう次の設定で別の.babelrcファイル：

{ 
    "presets" : [ 
     "react", 
     "es2015" 
    ] 
} 

・ホープこれはあなたの問題を解決することができ

Answer 2

According to es6 module mechanism the default module should be imported without {}

import ContactsList from './ContactsList'; 

and export like

export default class ContactsList extends React.Component {} 

But I guess you are trying babel on .jsx extension however it seams you are using ContactsList.js

Just change the to .jsx to .js in

--webpack.config.js

module.exports = { 
    entry: './src/App.js', 
    output: { 
     path: __dirname, 
     filename: 'app.js' 
    }, 
    module: { 
     loaders: [{ 
      test:/\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }] 
    } 
}; 

Hope it works

Answer 3

あなたはwebpack.config.jsファイルにいくつかの変更を行う必要があります。最初

import ContactsList from 'path-of-the-file'; 

を次のように第二

test: /\.(js|jsx)$/, 

インポートモジュールと

test:/\.jsx?$/, 

を置き換えるしかし、あなたは実際のパスを提供する必要があります。正しいパスを取得するには、使用するテキストエディタに応じて利用可能な多くのプラグインがあります。私は使用していますhttps://github.com/sagold/FuzzyFilePath