Переработано в react-app

Проект с пакетами React

Проект основан на create-react-app v2 --typescript
Расширенная конфигурация с помощью react-app-rewired
По умолчанию используется MobX для управления состоянием
Используется react-router для создания страниц, новые страницы можно добавлять через конфигурационные файлы страниц
По умолчанию используется antd | antd-mobile как основной UI, настроено условное импортирование, рекомендовано использовать повторное обертывание компонентов внутри файла для удобства изменения
Поддерживает разработку кросс-платформенного приложения для рабочего стола Electron, требуется самостоятельное использование библиотек
Это не фреймворк, а набор правил организации файлов проекта на React
Каждый новый проект может быть оптимизирован и расширен новыми компонентами и функциями
Периодическое обновление версий зависимостей

Разработка

---Бизнес-логика разделена на первичные маршруты, каждый компонент находится в отдельной директории и зарегистрирован в page/config.ts. Хранение данных также разделено по бизнес-логике на отдельные файлы в store и экспортировано в store/index.ts, что создаёт главный store и несколько подstore, внедрённые в App.tsx. Перед внедрением могут выполняться предварительные действия, такие как автоматическая проверка входа. Для внешних больших компонентов следует использовать import() для разделения пакетов. Если это компонент React, можно использовать React.lazy() и <React.Suspense>.

Tslint анализ кода

Документация проекта### Технологический стек

Используемые технологии

• ES next
• TypeScript
• Базовая структура проекта
  • create-react-app основной шаблон
  • react-app-rewired расширенная конфигурация
  • tslint анализ кода
• Обработка CSS
  • Предварительная обработка less scss sass
  • Последующая обработка postcss
  • Нормализация normalize.css
  • Модульный CSS Modules
• Основные зависимости
  • Живое обновление react-hot-loader
• Анимация react-addons-css-transition-group
• Роутинг react-router
• UI библиотека antd antd-mobile
• Управление состоянием mobx mobx-react
• Интерцептор запросов и возврат симулированных данных mockjs fetch-mock
• Превью изображений react-zmage используется динамическая загрузка /src/component/file/img/index.tsx 7 строка
• Инструментальные функции
  • fetch асинхронный запрос
  • dom вставка инструмента
  • обработка файлов и обрезка изображений

Содержание

---```markdown │ config-overrides.js конфигурационный файл react-app-rewired │ NORM.md документация по правилам разработки │ PROJECT.md проектная документация │ README.md описание проекта │ tsconfig.json конфигурация компиляции TypeScript │ tslint.json конфигурация проверки кода TypeScript ├─public │ config.js конфигурация проекта └─src ├── App.less глобальные стили ├── App.test.tsx ├── App.tsx инициализация проекта ├── api.ts инициализация инструмента запросов API ├── api_mock.ts регистрация тестовых данных API ├── react-app-env.d.ts типы внешних зависимостей ├── config.ts основной конфигурационный файл ├── index.tsx входной файл ├── component компоненты │ ├── mobile мобильные компоненты │ │ ├── antd переопределенные компоненты antd │ │ ├── header шапка сайта │ │ └── tabBar нижняя панель навигации │ ├── pc десктопные компоненты │ │ └── antd переопределенные компоненты antd │ ├── file файловые компоненты │ │ ├── get_file.tsx получение файла │ │ └── img изображения с возможностью просмотра │ ├── form формы │ ├── router регистрация маршрутов │ └── transition/style.less глобальная регистрация анимации CSS Transition Group ├── interface общие интерфейсы ├─page все страницы │ │ config.ts конфигурация страницы │ │ index.tsx регистрация и главная страница │ ├─Folder1 первая страница │ └─Folder2 вторая страница ├─store управление состоянием │ index.ts основное состояние │ view.

   │  user.ts состояние пользователя  
   │  File1.ts первое подсостояние  
   │  File2.ts второе подсостояние  
   └── tool вспомогательные функции  
       ├── city.json данные о городах  
       ├── dom.ts DOM-зависимости  
       ├── file.ts файловые зависимости  
       ├── function.less функции LESS  
       ├── index.ts часто используемые функции  
       ├── mock.ts макетные данные  
       ├── reg_exp.ts регулярные выражения  
       ├── request запросы  
       └── string.ts строки  

```### Инструкция по установке

---

1. npm config set registry https://registry.npm.taobao.org // Установите китайское зеркало
2. npm install --global yarn // Установите Yarn
3. yarn // Установите проект
4. yarn start // Запустите режим разработки
5. yarn build // Соберите проект
6. yarn serve // Запустите сборку как сервер
7. yarn electron-start // Запустите клиентский режим разработки, предварительно запустив yarn start
8. yarn packager // Соберите клиентский проект, предварительно запустив yarn build