🪐 Star Wars Application

🐧 Links

Project https://letscode-dev.github.io/react-star-wars
Repository https://github.com/letscode-dev/react-star-wars
StoryBook https://letscode-dev.github.io/react-star-wars/storybook
YouTube Playlist https://www.youtube.com/playlist?list=PL7cTIfGFrdKkQAWKDu2NdFt5Cx38B-A3i
Let's Code https://letscode-dev.github.io/

🐶 Available Scripts and Commands

# Install
npm i                    # install dependencies

# General
npm run start            # run app in the development mode
npm run storybook        # run storybook
npm run deploy           # deploy app on Github Pages

# Deploy (part of "deploy" script)
npm run build            # builds the app for production
npm run build-storybook  # storybook build
npm run build-gh-pages   # deploy on Github Pages

# Not used
npm run eject            # remove the single build dependency
npm run deploy-storybook # storybook deploy

🦄 API

https://swapi.dev (основное API)
https://swapi.py4e.com (запасное API - если основное не работает)
https://starwars-visualguide.com (изображения для API)

🐗 Lighthouse Metrics Performance

🐼 Рассмотренные темы

React.js

Разворачивание приложения с create-react-app
Состояние компонента (хук useState)
Жизненный цикл компонента (хук useEffect)
Context API (хук useContext)
Рефы и DOM (хук useRef)
Мемоизация (хук useCallback)
Создание собственных хуков
Фрагменты
Паттерн Higher-Order Component
Паттерн Подъём состояния
Обработка событий
Controlled Components
Подключение CSS, css-modules, библиотека classnames
Списки и ключи, Reconciliation Algorithm
Отложенная загрузка компонентов React.lazy()
Библиотека prop-types для валидации props

React Router

Базовый роутинг
URL Parameters
Query Parameters
Обработка страницы 404 (Not Found)
Хуки useLocation и useHistory

Redux

Базовая структура react-redux-приложения
Хуки useDispatch, useSelector
Redux Middleware
Создание асинхронных action с библиотекой redux-thunk
Отслеживание состояния store с redux-devtools-extension

Общее

Задание Alias в React-приложении (библиотека react-app-rewire-alias)
Деплой приложения на GitHub Pages (библиотека gh-pages)
Создание Ui-Kit из визуальных компонентов и публикация в @storybook
Библиотека lodash с готовыми функциями
Visual Studio Code. Сниппеты и плагины

JavaScript

Методы работы с массивами: map, filter, forEach
Асинхронность: Promise, Async Functions
ES6-модули (import и export)
Оператор разворота для объектов (props для компонента)
Деструктуризация массивов и объектов
Тернарные операторы
Работа с Local Storage
Работа с API с использованием Fetch

Вёрстка

CSS Custom Properties, изменение через JavaScript
CSS Filters
CSS Flexbox
CSS Multi Columns
Стилизация скроллбара

🐣 Порядок импортов

Библиотеки
Контекст
HOC
UI-компоненты
Компоненты
Изображения
Хуки
Роуты
Сервисы
Утилиты
Константы
Стили

🐨 TODO

Тестирование и перформанс

ESLint + Prettier
Тесты: Jest, Enzyme
Тесты Cypress
Проверка производительности в Lighthouse (Google Chrome)

Технологии

TypeScript https://github.com/letscode-dev/react-star-wars/tree/typescript-part
Firebase регистрация
Material UI, стилизация через css-in-js
Redux Thunk
React Hook Form для обработки данных форм

Функционал

Перегруппировка компонентов Header при адаптиве
Роутер. Анимация при переходе между страницами
Добавить шрифты
Публикация NPM-пакета для UiKit
.bat-файлы для запуска скриптов

NPM

npm i --save classnames lodash prop-types react react-dom react-redux react-router react-router-dom react-scripts redux redux-devtools-extension redux-thunk

npm i --save-dev @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/node-logger @storybook/preset-create-react-app @storybook/react @storybook/storybook-deployer gh-pages react-app-rewire-alias react-app-rewired

andrey-next / react-star-wars Goto Github PK

react-star-wars's Introduction

🪐 Star Wars Application

🐧 Links

🐶 Available Scripts and Commands

🦄 API

🐗 Lighthouse Metrics Performance

🐼 Рассмотренные темы

React.js

React Router

Redux

Общее

JavaScript

Вёрстка

🐣 Порядок импортов

🐨 TODO

Тестирование и перформанс

Технологии

Функционал

NPM

react-star-wars's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org