Create-react-app

create-react-app дозволяє в одну команду розгорнути React проєкт. Ось як ядро відображення може бути встановлене в ході роботи create-reat-app:

1. Встановлення пакету create-react-app для швидкого розгортання React застосунку:

npx create-react-app . --template typescript

В ході влаштування create-react-app створить наступну файлову структуру:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.ts
    ├── App.test.ts
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── serviceWorker.ts
    └── setupTests.ts

2. Встановлення пакету @x-fiber/display для приєднання ядра відображення:

npm install --save x-fiber/dispay@latest

3. Додати опис бізнес-схеми

├── src
│   ├── business-logic
│   │   ├── web-client
│   │   │   ├── services
│   │   │   │   ├── {service-name-1}
│   │   │   │   ├── {service-name-2}
│   │   │   │   ├── {...}
│   ├── web-client.ts
│   ├── App.css
│   ├── App.ts
│   ├── App.test.ts
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── serviceWorker.ts
│   └── setupTests.ts

де:

• web-client - директорія з описом веб-клієнта.
  • business-logic - директорія з описом бізнес-логіки.
    • services - директорія з переліком сервісів бізнес-логіки.
      • {service-name-1} - директорія з конкретним сервісом.
• web-client.ts - вхідна точка підключення сервісів бізнес-логіки.

4. Створити сервіс та записати його в масив сервісів в файлі index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {setServices} from '@x-fiber/display'
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import {Service1} from './business-logic'


const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

setServices([Service1])


root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

інформація

Деталі опису та впровадження сервісів - дивись розділ "Бізнес-схема" - "Ядро відображення"

5. Запустити проєкт

Виконати команду в консольній панелі - npm start.