Reactコンポーネントのエクスポートが機能しないのはなぜですか？

Question

私はただ反応して自分で試していました。私の画面上でこんにちはの世界を得るためにwebpackを設定してから、私は今すぐに行くことができると思ったが、ファイルから別のコンポーネントを次の問題にレンダリングしようとした。

私の主なファイルはすべてをレンダリングした、app.jsです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Hello} from './hello'; 

ReactDOM.render(
    <Hello/>, 
    document.getElementById('app') 
); 

こんにちはコンポーネントが同じフォルダに私のhello.jsから来ている：

import React from 'react'; 

class Hello extends React.Component{ 
    render(){ 
     return (
      <h1>Hello, world!</h1> 
     ) 
    } 
} 

export default Hello; 

とき、私それは罰金レンダリングされましたimport/exportせずにapp.jsだけですべてをやっていました。それはまたうまくコンパイルされます。しかし、コンソールには今多くのエラーがあります。それで私は何が欠けているのですか？

おかげ

ゲルト

Answer 1

あなたの輸出は、あなたのインポート・コンポーネント名の前後に括弧は必要ありませんdefaultですので：そのあなたの最終ES6モジュール構文にアクセルRauschmayerから

import Hello from './hello'; 

Here's a verbose technical articleを有用であるかもしれない。

And here's a slightly less techy postとほぼ同じトピックです。

Answer 2

デフォルトのクラスをインポートするとき、あなたは

import ClassName from 'something'; 

を使用して、他のクラスをインポートするとき、あなたは一例

import {ClassName} from 'something'; 

を使用します。

hello.jsファイルに

import React from 'react'; 

class Hello extends React.Component{ 
    render(){ 
     return (
      <h1>Hello, world!</h1> 
     ) 
    } 
} 

class Other extends React.Component{ 
    render(){ 
     return (
      <h1>Hello, world!</h1> 
     ) 
    } 
} 
export default Hello; 
export Other; 

他のファイルに

import Hello, {Other} from './hello'; 

ヒント： - `インポートこんにちはあなたは括弧を削除したいと思うので、あなたはまた、他の名前でデフォルトのクラスをインポートすることができ

import Component, {Other} from './hello';