React ES6モジュール
モジュール
JavaScriptモジュールを使用すると、コードを個別のファイルに分割できます。
これにより、コードベースの保守が容易になります。
ESモジュールはimportおよびexportステートメントに依存します。
Export(エクスポート)
関数または変数は、任意のファイルからエクスポートできます。
person.jsという名前のファイルを作成してください、ここにエクスポートしたいものを入力します。
エクスポートには、名前付きとデフォルトの2つのタイプがあります。
名前付きエクスポート
名前付きエクスポートは2つの方法で作成できます。個別、または下部にまとめてインライン化します。
例
個別にインライン:
person.js
export const name = "Jesse"
export const age = 40
下部に一度に：
person.js
const name = "Jesse"
const age = 40
export { name, age }
デフォルトのエクスポート
message.jsという名前の別のファイルを作成し、それをデフォルトでエクスポートのデモに使用してみましょう。
1つのファイルに含めることができる既定のエクスポートは1つだけです。
例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Import(インポート)
モジュールの名前がエクスポートであるかデフォルトエクスポートであるかに基づいて、2つの方法でモジュールをファイルにインポートできます。
名前付きエクスポートは、中かっこを使用して構造を解除する必要があります。デフォルトのエクスポートはそうではありません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。