Разработка микро-интерфейса с помощью Single SPA на React 2023

Разработка микро-интерфейса с помощью Single SPA на React 2023

Разработка микро-интерфейса с помощью Single SPA на React

Single SPA – это JavaScript-фреймворк для создания микро-интерфейсов. Он позволяет вам создавать несколько небольших приложений и объединять их в одно более крупное. С помощью Single SPA вы можете использовать различные интерфейсные фреймворки (такие как React, Angular, Vue и т.д.) для создания своих микро-интерфейсов.

@React – крупнейший телеграм канал для React разработчиков

Вот некоторые ключевые особенности Single SPA:

  • Модульная архитектура: Single SPA спроектирован таким образом, чтобы быть модульным, что означает, что вы можете создавать небольшие независимые приложения, которые могут быть объединены для создания более крупного приложения.
  • Не зависит от фреймворка: Single SPA не привязан к какому-либо конкретному интерфейсному фреймворку, что означает, что вы можете использовать свой любимый фреймворк для создания микро-интерфейсов.
  • Динамическая загрузка: Single SPA позволяет вам динамически загружать ваши микро-интерфейсы, что означает, что вы можете загружать их по требованию, сокращая время начальной загрузки вашего приложения.
  • Гибкая маршрутизация: Single SPA предоставляет гибкую систему маршрутизации, которая позволяет вам определять, как загружаются и разгружаются ваши микро-интерфейсы.
  • Общие зависимости: Single SPA позволяет вам совместно использовать зависимости между вашими микро-интерфейсами, что может уменьшить общий размер вашего приложения.

В целом, Single SPA предоставляет мощный и гибкий способ создания микро-интерфейсов, который может помочь вам создавать более обслуживаемые и масштабируемые интерфейсные приложения.

Вот базовый пример того, как использовать Single SPA с React:

1. Во-первых, вам нужно создать новый проект React. Вы можете сделать это, выполнив следующую команду в вашем терминале:

npx create-react-app my-react-app

2. Далее установите следующие зависимости:

npm install single-spa-react react-dom react-router-dom

3. Создайте новый файл под названием root.component.js в вашем каталоге src. Это будет отправной точкой для вашего Single SPA приложения.

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
});
export const { bootstrap, mount, unmount } = reactLifecycles;

4. Создайте новый файл с именем App.js в вашем каталоге src. Это будет основным компонентом вашего приложения React.

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello, Single SPA with React!</h1>
    </div>
  );
}
export default App;

5. Наконец, создайте новый файл с именем index.js в корне вашего проекта. Это позволит зарегистрировать ваше приложение в Single SPA.

import { registerApplication, start } from 'single-spa';
import { bootstrap, mount, unmount } from './src/root.component';

registerApplication(
  'my-react-app',
  () => import('./src/root.component.js'),
  () => true,
  { bootstrap, mount, unmount }
);

start();

6. Выполните следующую команду, чтобы запустить ваше Single SPA приложение:

npm start

Теперь вы должны иметь возможность видеть своё Single SPA приложение, запущенное в вашем браузере по адресу http://localhost:8080

7. Чтобы добавить маршрутизацию в ваше Single SPA приложение на React, вы можете использовать react-router-dom. Сначала установите зависимость:

npm install react-router-dom

8. Обновите свой App.js файл, содержащий базовый маршрутизатор и два маршрута:

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <p>Click <Link to="/about">here</Link> to go to the About page.</p>
    </div>
  );
}
function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About page.</p>
      <p>Click <Link to="/">here</Link> to go back to the Home page.</p>
    </div>
  );
}
function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}
export default App;

9. Обновите файл root.component.js для использования компонента BrowserRouter из react-router-dom:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: (props) => (
    <BrowserRouter>
      <App {...props} />
    </BrowserRouter>
  ),
});
export const { bootstrap, mount, unmount } = reactLifecycles;

10. Вот и всё! Теперь вы можете перемещаться между страницами “Главная” и “О программе” в вашем Single SPA приложении.

Обратите внимание, что это всего лишь базовый пример, который поможет вам начать. Существует множество других функций и библиотек, которые вы можете использовать с Single SPA и React, таких как Redux и styled-components. Ознакомьтесь с документацией Single SPA и документацией React для получения дополнительной информации.

11. Чтобы добавить управление состоянием в ваше Single SPA приложение, вы можете использовать redux. Сначала установите зависимость:

npm install redux react-redux

12. Создайте новый файл под названием store.js в вашем каталоге src, чтобы определить хранилище Redux:

import { createStore } from 'redux';

const initialState = {
  count: 0,
};
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}
const store = createStore(reducer);
export default store;

13. Обновите файл App.js для использования хуков useSelector и useDispatch из react-redux для доступа и обновления состояния:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Switch, Route, Link } from 'react-router-dom';

function Home() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };
  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <p>Click <Link to="/about">here</Link> to go to the About page.</p>
    </div>
  );
}
function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About page.</p>
      <p>Click <Link to="/">here</Link> to go back to the Home page.</p>
    </div>
  );
}
function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}
export default App;

14. Обновите файл root.component.js для использования компонента Provider из react-redux для передачи хранилища вашим компонентам:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import singleSpaReact from 'single-spa-react';
import App from './App';
import store from './store';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: (props) => (
    <Provider store={store}>
      <BrowserRouter>
        <App {...props} />
      </BrowserRouter>
    </Provider>
  ),
});
export const { bootstrap, mount, unmount } = reactLifecycles;

15. Вот и всё! Теперь вы можете использовать Redux для управления состоянием вашего Single SPA приложения.

Обратите внимание, что это всего лишь базовый пример, который поможет вам начать. Существует множество других функций и библиотек, которые вы можете использовать с Single SPA и React, таких как react-router-redux

16. Чтобы использовать react-router-redux, сначала установите зависимость:

npm install --save react-router-redux@next

17. Обновите файл store.js для использования функции connectRouter из react-router-redux для добавления состояния маршрутизации в ваше хранилище Redux:

import { createStore, combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

const rootReducer = (history) => combineReducers({
  router: connectRouter(history),
  count: (state = 0, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  },
});
export default function configureStore(history) {
  const store = createStore(
    rootReducer(history),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  return store;
}

18. Обновите файл root.component.js для использования компонента ConnectedRouter из react-router-redux и передачи объекта history в ваше хранилище:

import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import singleSpaReact from 'single-spa-react';
import App from './App';
import configureStore from './store';

const history = createBrowserHistory();
const store = configureStore(history);
const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: (props) => (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App {...props} />
      </ConnectedRouter>
    </Provider>
  ),
});
export const { bootstrap, mount, unmount } = reactLifecycles;

19. Обновите файл App.js для использования хука useSelector из react-redux для доступа к состоянию маршрутизатора:

import React from "react";
import { useSelector } from "react-redux";
import { Switch, Route, Link } from "react-router-dom";

function Home() {
  const count = useSelector((state) => state.count);
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <p>Count: {count}</p> <button onClick={() => {}}>Increment</button>
      <button onClick={() => {}}>Decrement</button>
    </div>
  );
}
function About() {
  return (
    <div>
      <h1>Welcome to the About page!</h1>
      <p>This is a demo of single-spa with React and Redux.</p>
    </div>
  );
}
function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}
export default App;

20. Наконец, мы зарегистрировали наше приложение React в качестве микро-интерфейса с Single SPA, обновив файл index.js и использовали функцию start из single-spa, чтобы зарегистрироваться и запустить наш микро-интерфейс.

import { registerApplication, start } from 'single-spa';
import { constructApplications } from 'single-spa-layout';
import { getLayoutEngine } from '@single-spa-layout/webpack';
import { LayoutEngine } from '@single-spa-layout';
import { matchRoute } from 'single-spa-react-router';
import { pathToRegexp } from 'path-to-regexp';
import rootComponent from './root.component';

const routes = [
  { path: '/', component: rootComponent },
  { path: '/react', app: () => System.import('react-app'), match: matchRoute('/') },
  { path: '/vue', app: () => System.import('vue-app'), match: matchRoute('/vue') },
];
const layoutData = {
  'primary-navbar': [
    ['navbar'],
  ],
  'react-container': [
    ['react-app'],
  ],
  'vue-container': [
    ['vue-app'],
  ],
};
const layoutEngine = new LayoutEngine({
  routes,
  layoutData,
  urlRerouteOnly: true,
  pathname: window.location.pathname,
  active: 'primary-navbar',
  engine: getLayoutEngine(),
  pathToRegexp,
});
const applications = constructApplications({
  routes,
  loadApp({ app }) {
    return app().then((module) => {
      return {
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      };
    });
  },
});
applications.forEach(registerApplication);
start();

И это всё! Теперь вы создали микро-интерфейс с Single SPA, используя React и Redux с react-router-redux для маршрутизации. Этот код должен послужить отправной точкой для создания более сложных приложений с Single SPA с помощью React.

21. Не забудьте запустить свой проект, запустив npm start в корневом каталоге вашего проекта. Теперь вы должны иметь возможность просматривать его, посетив http://localhost:9000/react .

Поздравляем, вы успешно создали Single SPA микро-интерфейс с использованием React и Redux!

+1
0
+1
6
+1
1
+1
0
+1
3
Просмотры: 1 521

Похожие записи

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *