Happy hacking Blog

Предварительный просмотр

Цель

Создание полноценного блога, включающего в себя следующие четыре части:

1. Фронтенд-презентация блога (React + antd);
2. Система управления данными на бэкенде (Vue3 + element (vuetify));
3. Интерфейс бэкэнда (nodejs);
4. Маленькая программа для WeChat.

Использование

1. В корневом каталоге выполните yarn install или npm install;
2. Выполните yarn start или npm run start.

Технологический стек

• Использование Flex для макета;
• Настройка путей с использованием: carco;
• Управление маршрутами с помощью react-router;
• Централизованное управление путями с помощью react-router-config;
• Написание стилей с помощью styled-components и обычного CSS;
• Отправка сетевых запросов с помощью axios;
• Полное принятие React Hooks;
• Использование библиотеки компонентов: ant design;
• Иммутабельное управление состоянием проекта с помощью immutable;
• Управление состоянием корня с помощью redux-immtable;
• Промежуточное ПО с использованием redux-thunk;
• Проверка типов props и установка значений по умолчанию с помощью propType;
• Добавление эффектов перехода с помощью motion.ant.design;
• Оптимизация проекта: использование memo для всех функциональных компонентов, отложенная загрузка маршрутов, предотвращение повторного рендеринга функций.

Структура файлов

│─src ├─assets Общедоступные ресурсы CSS и изображения ├─css Глобальный CSS ├─img Изображения ├─common Общедоступные константы и имитированные данные ├─components Общедоступные компоненты ├─pages Страницы ├─router Конфигурация маршрутов ├─service Сетевая конфигурация и запросы └─store Глобальная конфигурация хранилища └─utils Инструменты └─hooks Пользовательские хуки

Начало работы с Create React App (официальное руководство по React)

Этот проект был запущен с помощью Create React App.

Доступные скрипты

В каталоге проекта вы можете запустить:

yarn start

Запускает приложение в режиме разработки. Откройте http://localhost:3000, чтобы просмотреть его в браузере. Страница будет перезагружаться при внесении изменений. Вы также увидите любые ошибки линтинга в консоли.

yarn test

Запускает средство запуска тестов в интерактивном режиме просмотра. Дополнительную информацию см. в разделе о запуске тестов.

yarn build

Создаёт приложение для производства в папке build. Оно правильно связывает React в рабочем режиме и оптимизирует сборку для лучшей производительности. Сборка минимизирована, а имена файлов включают хэши. Ваше приложение готово к развёртыванию! Дополнительную информацию см. в разделе о развёртывании.

yarn eject

Примечание: это односторонняя операция. После выполнения eject вы не сможете вернуться! Если вас не устраивают инструменты сборки и настройки, вы можете выполнить eject в любое время. Эта команда удалит единственную зависимость сборки из вашего проекта. Вместо этого она скопирует все файлы конфигурации и транзитивные зависимости (webpack, Babel, ESLint и т. д.) прямо в ваш проект, чтобы у вас был полный контроль над ними. Все команды, кроме eject, по-прежнему будут работать, но они будут указывать на скопированные сценарии, чтобы вы могли их настроить. На этом этапе вы действуете самостоятельно. Вам не нужно когда-либо использовать eject. Кураторский набор функций подходит для небольших и средних развёртываний, и вы не должны чувствовать себя обязанным использовать эту функцию. Однако мы понимаем, что этот инструмент не был бы полезен, если бы вы не могли настроить его, когда будете готовы к этому.

Узнать больше

Вы можете узнать больше в документации Create React App. Чтобы изучить React, ознакомьтесь с документацией React.

Разделение кода

Этот раздел переместился сюда: https://facebook.github.io/create-react-app/docs/code-splitting.

Анализ размера пакета

Этот раздел переместился сюда: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size.

Создание прогрессивного веб-приложения

Этот раздел переместился сюда: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app.

Расширенная конфигурация

Этот раздел переместился сюда: https://facebook.github.io/create-react-app/docs/advanced-configuration.

Развёртывание

Этот раздел переместился сюда. В этом разделе: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify рассказывается о проблеме, когда команда yarn build не может выполнить минификацию.