最小構成
まず一番簡単な最小構成のビルドタイム組成を説明する。 説明する順は、次のとおりだ。
- 組成の説明
- フラグメントの説明
- 結果
サンプルコードは、こちら。
組成
team_composite/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>
起動手段は、react-scripts startである。
次に、#rootに対して ReactDOM.renderを実行する。
team_composite/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
そのレンダリングで、App.jsというものがある。
team_composite/src/App.js
import TeamInspireText from '@bit/silver-birder.micro-frontends-sample-collections.team-inspire-text'
import TeamProductText from '@bit/silver-birder.micro-frontends-sample-collections.team-product-text'
import TeamSearchText from '@bit/silver-birder.micro-frontends-sample-collections.team-search-text'
function App() {
return (
<div>
<TeamInspireText />
<TeamProductText />
<TeamSearchText />
</div>
);
}
export default App;
こちらにあるとおり、App.jsには @bit/silver-birder.*というモジュールをimportしている。
フラグメント
@bit/silver-birder.micro-frontends-sample-collections.team-search-textのモジュールは、次のようなものである。
team_search/src/components/team-search-text/index.js
import React, { Component } from 'react';
export default class TeamSearchText extends Component {
render() {
return (
<div>
Team Search
</div>
);
}
}
このコードは、bit.devでprivateに公開している。
結果
その結果、次のような画面が表示される。
