Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/archakov06/react-pizza-v2


https://github.com/archakov06/react-pizza-v2

Last synced: about 4 hours ago
JSON representation

Awesome Lists containing this project

README 

        
# 🍕 React Pizza v2 (REMASTERED) 🍕



Это обновлённый курс на 2022 год, одного из [самых популярных курсов](https://www.youtube.com/watch?v=bziVFvq8cLQ&list=PL0FGkDGJQjJFMRmP7wZ771m1Nx-m2_qXq) по ReactJS для начинающих.



В данном курсе подробно раскрывается тема создания фронтенд части интернет-магазина пиццерии на всех нижеперечисленных технологиях.



Я собрал все самые **топовые** и **актуальные** темы по фронтенду + React на 2022 год, которые тебе пригодятся для **трудоустройства** или же разработки приложений на заказ.



Обновлённый курс идеально подойдёт как для начинающих разработчиков (junior), так и для pre-middle/middle.



## 🔥 Ты научишься:



- Разрабатывать полноценное фронтенд-приложение на ReactJS.

- Создавать компоненты, страницы, сортировку, поиск, пагинацию, фильтрацию, popup-окна и т.д.

- Взаимодействовать с серверной частью, отправлять запросы на бэкенд.

- Разрабатывать навигацию по странице без перезагрузки.

- Создавать глобальное хранилище данных для всего приложения.

- Писать строго типизированный код на TypeScript.

- Работать с LocalStorage для хранения настроек сайта.

- Lazy Loading (ленивую подгрузку) + debounce (оптимизацию для поиска пицц).

- Оптимизировать перерисовки/ререндеры компонентов, code splitting (разделение кода на отдельные JS-файлы), что такое tree shaking и как сокращать импорты компонентов.

- Делать адаптивную вёрстку.

- Деплоить приложение в интернет

- и т.д.



# 🛠 Технологии:



- **ReactJS 18**

- **TypeScript**

- **Redux Toolkit** (хранение данных / пицц)

- **React Router v6** (навигация)

- **Axios + Fetch** (отправка запроса на бэкенд)

- **React Hooks** (хуки)

- **Prettier** (форматирование кода)

- CSS-Modules / SCSS (стилизация)

- React Content Loader (скелетон)

- React Pagination (пагинация)

- Lodash.Debounce

- Code Splitting, React Loadable, useWhyDidYouUpdate



### Подробнее о технологиях



- **[TypeScript](https://www.typescriptlang.org/) —** необходим для написания более грамотного JavaScript-кода. Благодаря правильному написанию TS-кода, мы автоматически документируем наш код + наше приложение будет содержать меньше багов из-за строгой типизации.

- **[Redux Toolkit](https://redux-toolkit.js.org/)** — с помощью данной библиотеки, мы сможем создать глобальное хранилище данных для нашего приложения, тем самым, более удобным способом обмениваться информацией между разными компонентами нашего приложения. Данная библиотека активно внедряется во все крупные и малые react-проекты на 2021-2022 г.

- **[React Router v6](https://reactrouter.com/docs/en/v6/getting-started/overview)** — позволит нам создать навигацию по нашему сайту без перезагрузок страницы. Ты, наверное, обратил внимание, что сайт VK или Instagram при переходе по разным разделам, не перезагружает всю страницу, а только определенную часть сайта. Именно эту возможность мы и будем внедрять в наше приложение с помощью React Router.

- **[Axios](https://github.com/axios/axios)** — нам поможет взаимодействовать с серверной частью. Отправлять данные на сервер или получать их при необходимости из сервера уже в наше фронтенд-приложение.

- **[React Hooks](https://ru.reactjs.org/docs/hooks-intro.html)** — это набор готовых функций внутри библиотеки React для решения разнообразных задач, например, хранение данных, определение первого отображения приложения, оптимизаций функций и т.п.

- **[Prettier](https://prettier.io/)** — наш код должен быть не только хорошо написано, но и **красиво**. С помощью Prettier наш код будет автоматически выровняться внутри нашего редактора кода, тем самым, становиться более читабельным.

- **[SCSS](https://sass-scss.ru/)** — это тот же CSS, но с более мощными возможностями, функциями, переменными, циклами (да, Карл, циклы в CSS) и кучей других крутых решений.

- **[CSS-Modules](https://github.com/css-modules/css-modules)** — мы будем использовать SCSS вместе с CSS-модулями. По факту, тебе не придётся учить ничего нового. Ты будешь писать те же самые стили, но уже в отдельных файлах (css-модулях), тем самым, инкапсулируя свои CSS-классы.

- **[Lodash](https://lodash.com/docs)** — набор готовых JS-функций для огромного количества разнообразных задач.



# 👀 С чего начать?



1. Установить редактор кода **[Visual Studio Code](https://code.visualstudio.com/)**

2. Установить [NodeJS](https://nodejs.org/en/)

3. Установить [Create React App](https://create-react-app.dev/) **\* (см. видео)**

4. Скачать репозиторий с вёрсткой https://github.com/Archakov06/react-pizza-html

5. Начать разработку.



# 🗄Материалы



[pizzas.json](https://gist.github.com/Archakov06/0421a3edb0ec6f4fc907a6fed3eb5433)



> 💡 Если каких-то ссылок или материалов не будет хватать в этой странице, пишите в комментариях к видео, чтобы я обновил информацию.