初心者でもできる！Reactを学んでアプリ作成に挑戦 3/3
JavaScriptのモジュール機能を学ぼう
参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
プログラムをモジュールという単位に分割する
原則は１ファイル＝１モジュール
必要な時に必要なモジュールのみ 読み込む
名前なしエクスポート セット
名前付きインポート セット
＊importは、どのブラウザにも対応中
import とexport
default export 通称 名前なしエクスポート
//アロー関数のデフォルトエクスポート
const Title = (props) => {
return <h2>{props.title}</h2>
};
export default Title;
//名前付き関数のデフォルトエクスポート
export default function Title(props) {
return <h2<{props.title}</h2>
};
デフォルトインポート default import (名前なしimport)
Article.jsx (export元）
const Article = (props) => {
return (
<div>
<h2>{props.title}</h2>
<p>{props.content}</p>
</div>
);
};
// Apps.jsx(import先）
import Article fro “./components/Article”;
function App() {
return (
<Article
title={黙々勉強会でReactを習得！}’
content={}
/>
);
}
export default Article;
default export したモジュールをそのまま読み込む
inport モジュール名