web-dev-qa-db-ja.com

Reactコンポーネント宣言）の「エクスポート」の目的は何ですか？

React（ES6）では、なぜときどきこれが表示されるのですか？...

class Hello extends React.Component { ... }

そして時々this？

export class Hello extends React.Component { ... }

exportキーワードの意味は何ですか？ webpackを使用している場合、webpack.config.jsファイルを変更する必要がありますか？

これに関する情報は、事前に感謝します。

更新：

main-file.js

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

import { External } from './external';

class Hello extends React.Component {
  render() {
    return <div>

      <h1>Hello World (Main File this time)</h1>
      <External />

    </div>
  }
}

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

external.js（同じディレクトリ）

export class External extends React.Component {
  render() {
    return <div>This is my external component</div>
  }
}

これは機能しません-理由がわかりますか？

javascriptreactjsexportecmascript-6components
15
Paulos3000

exportキーワードについて説明する前に、何かを明確にしましょう。

インターネットで見たように、すべての反応アプリケーションでは、2つの重要なものを使用する必要があります。

1 / Babel

2 / webpack または browserify

説明

バベルの仕事とは？

jsxとES6を聞いたことがあるかもしれません。

まあBabelの仕事は、jsxをjsに、ES6をES5にトランスパイルして、ブラウザーがこれら2つのことを理解できるようにすることです。

exportキーワードはES6の新機能で、functions、variablesをエクスポートして、他のjsファイルでそれらにアクセスできるようにします

つまり：

hello.js

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

world.js

import { Hello } from './hello';

class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

Webpackジョブとは何ですか？

Webpackはモジュールバンドルです。一連のアセット（つまり、hello.js、world.jsとモジュール（react、react-dom ....））を取り込んで、1つのファイルに変換します。

i.e:

webpackの次の設定があるとしましょう

// dont need to set hello.js as an entry because we already import it into world.js
module.exports = {

  entry: [
    './src/world.js'  
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  }
};

webpackは、すべてのjsファイルとインポートされたモジュールを変換し、単一のファイルbundle.jsに変換します。

編集：問題の解決

jsx

返されたhtmlは常に()にラップします。

...
render() {
  return (
    <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  )
}
...
17
elreeda

値をエクスポートすると、別のファイルにインポートできます。

このクラスをhello.jsファイルからエクスポートする場合：

// hello.js
export class Hello extends React.Component { ... }

次に、それをインポートして、greeting.jsファイルで使用できます。

// greeting.js
import { Hello } from './hello';

export class Greeting extends React.Component {
  render() {
    return <Hello />;
  }
}

これはReactに固有のものではありません。この構文を使用して、あらゆる種類のJavaScriptアプリケーションであらゆる種類の値をインポートおよびエクスポートできます。

Babel のようなツールを使用してこれをブラウザーで実行できるコードに変換した後、Webpackなどのツールを使用して、使用したすべてのモジュールを単一のスクリプトファイルにバンドルします。ブラウザのために役立つ。

インポートおよびエクスポート用のこのモジュール構文は、「デフォルト」値をエクスポートするモジュールの便利な省略表現も提供します。

// hello.js
export default class Hello extends React.Component { ... }

// greeting.js
import Hello from './hello';

通常、モジュールが1つの値のみをエクスポートする場合は、このフォームを使用します。

8
Dan Prince