Разработка блога с использованием React, Webpack, Babel, Eslint, documentation.js и material-ui

Разработайте блог с использованием React, Webpack, Babel, Eslint, документации.js и Material-UI.

Я буду записывать все ресурсы и процессы на протяжении всей разработки проекта.

Запуск

1. git clone https://github.com/codingplayboy/react-blog.git
2. cd react-blog
3. npm install yarn -g
4. yarn install
5. yarn start для разработки
6. yarn build для продакшена
7. yarn doc для создания API-документации

API

1. API

Публикация

Я буду обновлять сайт постоянно. Пожалуйста, посмотрите React Blog (попробуйте).

Процесс разработки

1. Руководство по автоматизации сборки с помощью Webpack
2. Решение проблемы с обновлением страницы при использовании react-router и маршрутизации
3. Архитектура приложения React
4. Идеи дизайна и реализации адаптивного веб-приложения

Введение в структуру

1. webpack: каталог конфигурации для webpack;
2. webpack.config.js: файл конфигурации для webpack;
3. package.json: файл управления зависимостями для проекта;
4. yarn.lock: файл блокировки версий зависимостей для проекта;
5. .babelrc: конфигурационный файл babel для компиляции React и JavaScript кода;
6. eslintrc, eslintignore: конфигурация eslint и список файлов или содержимого, которые нужно игнорировать;
7. postcss.config.js: конфигурационный файл для CSS посткомпилятора postcss;
8. API.md: вход в документацию API;
9. docs: каталог документации;
10. README.md: документ с описанием проекта;
11. src: каталог с кодом разработки
12. ├── api: запросы API
13. ├── styles: стили
14. ├── components: компоненты для отображения
15. ├── config: глобальная конфигурация
16. ├── constants: константы
17. ├── containers: контейнерные компоненты
18. ├── helper: вспомогательные функции и инструменты
19. ├── store: связанные с redux store
20. ├── middlewares: промежуточные программы
21. ├── routes: модуль маршрутов приложения
22. ├── services: модуль сервисов приложения
23. ├── index.html: входной html приложения
24. └── app.js: корневой компонентный файл проекта

Прототип продукта

Самостоятельно нарисованные прототипы пользовательского интерфейса, довольно простые, можно посмотреть, добро пожаловать критиковать, хе-хе👀.

UI для ПК

Мобильный UI

Боковая навигация мобильного UI

Журнал разработки

1. Базовая структура проекта (с использованием material-ui)
2. Создание базовой структуры домашней страницы
3. Адаптивный показ
4. Список статей на домашней странице:
5. Начальная загрузка и перелистывание страниц
6. Самоадаптирующаяся демонстрация списка
7. Переключение боковой панели навигации
8. Компонент с информацией о правах и контактной информацией внизу страницы