? ??????? ????? ?? ?? ???? ?? ?? ??? ????? ???? ???? ???????. ???? ?????? ???? ????? ??????? ? ?? ?? ??? ???? ???? ???? ?????. ? ?????? ???? ?????? ??, React? ???? ?? ???? ??, ?? ????? ???? ??? ?? ???????.

???? ?????? ??????

???? ?????? ??????? ????? ?????? ?????. ?? ???? ?????? ?? ???? ?????? ???? ??????? ?? ???? ??? ????? ???? ??? ? ????. ? ?? ??????? ?? ??? ??? ? ???? ???? ?? ???? ?????.

???? ?????? ?? ??:

????? ?? ??: ? ???? ?????? ????? ??, ??? ? ??? ?????.
?? ????: ?? ??? ???? ?????? ?? ??? ??? ??? ? ?? ???? ?????.
? ???: ?? ????? ???? ???? ?? ??? ?? ? ????.

???? ?????? ???? ??? ??????

???: ??????? ???? ?? ???? ?????? ???? ?? ?? ?? ?? ??? ??? ? ????.
? ?? ??: ???? ??? ? ?? ??? ??? ?? ?? ??? ?????.
????? ??: ?????? ???? ??, ??? ? ????? ? ????.

React? ???? ????? ????

• ???? ????? ???? ?? ???? ?????? ???? ?? ?? ?? ?? ??? ????. ??? ?? ???? ? ?? ?????.

Iframe ??: ? ???? ?????? iframe? ?????. ? ?? ??? ??? ???? ????? ???? ? ????? ???? ?? ? ????.

JavaScript ??: ? ???? ?????? ?? ??????? ???? ??? JavaScript ?????. ? ?? ??? ???? ? ?? ??? ?? ?? ??? ?????.

• ???? ????? ?????? ?? JavaScript ?? ?? ??? ???? ??? ??? ??? ?????. ??? ?????? ?? ??? ??? ? ?? ??? ??? Webpack Module Federation? ???????.

1??: ? ?? React ?????? ??
? ?? ?? React ??????? ?????. ??? ?????? ?? ??? ???? ?????????.

npx create-react-app host-app
npx create-react-app micro-frontend

2??: Webpack ?? ?? ??
???? ????? ???????? ??? ???? ?????.

npx create-react-app host-app
npx create-react-app micro-frontend

?? ?? webpack.config.js? ???? ???? ????? ?? ??? ?????.

npm install --save-dev webpack webpack-cli webpack-dev-server @module-federation/webpack

??? ??? ???? ?????? ????? ?????.

// micro-frontend/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "micro_frontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button", // Expose the Button component
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

3??: ???? ????? ??
?? ??? ??? ???? ????? ?? ??? ???? ??? ? ????.

// host-app/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        micro_frontend: "micro_frontend@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

• ?????? ?? ? ??????? ?? ?? ???? ???? ???. ?? ?? ?? 3001?? ???? ?????? ???? ?? 3000?? ??? ?? ??? ? ????.

// host-app/src/App.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [Button, setButton] = useState(null);

  useEffect(() => {
    const loadButton = async () => {
      const { Button } = await import("micro_frontend/Button");
      setButton(() => Button);
    };
    loadButton();
  }, []);

  return (
    <div>
      <h1>Host Application</h1>
      {Button ? <Button label="Click Me!" /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

?? http://localhost:3000?? ???? ??? ??????? ???? ??????? ??? ???? ?? ? ? ????.

???? ?????? ??? ????? ??????? ????? ??? ? ?? ?? ???? ??? ???? ??? ??? ?????. React? Webpack Module Federation? ?? ??? ???? ? ???? ???? ?? ??? ??? ?? ??? ????? ?? ? ????. ???? ????? ??? ??? ? ?? ?? ???? ???? ??? ???? ???? ?? ??? ?? ??? ?? ??? ?????.

? ??? React? ??? ???? ?????: ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!