Разработка микро-интерфейса с помощью Single SPA на React
Single SPA - это JavaScript-фреймворк для создания микро-интерфейсов. Он позволяет вам создавать несколько небольших приложений и объединять их в одно более крупное. С помощью Single SPA вы можете использовать различные интерфейсные фреймворки (такие как React, Angular, Vue и т.д.) для создания своих микро-интерфейсов.
Модульная архитектура: Single SPA спроектирован таким образом, чтобы быть модульным, что означает, что вы можете создавать небольшие независимые приложения, которые могут быть объединены для создания более крупного приложения.
Не зависит от фреймворка: Single SPA не привязан к какому-либо конкретному интерфейсному фреймворку, что означает, что вы можете использовать свой любимый фреймворк для создания микро-интерфейсов.
Динамическая загрузка: Single SPA позволяет вам динамически загружать ваши микро-интерфейсы, что означает, что вы можете загружать их по требованию, сокращая время начальной загрузки вашего приложения.
Гибкая маршрутизация: Single SPA предоставляет гибкую систему маршрутизации, которая позволяет вам определять, как загружаются и разгружаются ваши микро-интерфейсы.
Общие зависимости: Single SPA позволяет вам совместно использовать зависимости между вашими микро-интерфейсами, что может уменьшить общий размер вашего приложения.
В целом, Single SPA предоставляет мощный и гибкий способ создания микро-интерфейсов, который может помочь вам создавать более обслуживаемые и масштабируемые интерфейсные приложения.
Вот базовый пример того, как использовать Single SPA с React:
1. Во-первых, вам нужно создать новый проект React. Вы можете сделать это, выполнив следующую команду в вашем терминале:
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:
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, чтобы зарегистрироваться и запустить наш микро-интерфейс.
И это всё! Теперь вы создали микро-интерфейс с Single SPA, используя React и Redux с react-router-redux для маршрутизации. Этот код должен послужить отправной точкой для создания более сложных приложений с Single SPA с помощью React.
21. Не забудьте запустить свой проект, запустив npm start в корневом каталоге вашего проекта. Теперь вы должны иметь возможность просматривать его, посетив http://localhost:9000/react .
Поздравляем, вы успешно создали Single SPA микро-интерфейс с использованием React и Redux!
