Пройти курс по React и Redux
React — популярная JavaScript-библиотека для создания пользовательских интерфейсов.
Настало время для нового вызова — изучение React! Я уже освоил основы JavaScript и TypeScript, и теперь готов погрузиться в мир одного из самых популярных фреймворков для создания пользовательских интерфейсов.
У меня нет опыта работы с React. Учиться буду по курсу Богдана Стащука (курс с Udemy). У него есть на YouTube первый вводный урок по курсу React. В вводном уроке мне понравилось, как он структурирует материал, поэтому я решил полностью следовать его курсу. Я планирую пройти этот курс полностью, а затем создать от 3 до 5 собственных веб-приложений на React, чтобы показывать их в качестве примера моего опыта при устройстве на работу.
Если ты тоже начинаешь изучать React или просто хочешь посмотреть, как кто-то другой справляется с изучением этой библиотеки, подписывайся на мою цель! Здесь будут не только успехи, но и ошибки, из которых я буду учиться. А ещё я всегда рад услышать ваши советы и идеи, особенно когда дойду до создания своих первых проектов.
Надеюсь, что мои шаги и достижения смогут вдохновить вас на ваши собственные цели в изучении React или других технологий. Подписывайтесь на мою цель, чтобы вместе учиться и развиваться!
〰
Эта цель — часть моей большой мечты о переезде в Австралию, где я хочу начать новую жизнь и работать разработчиком в одном из самых современных и комфортных для жизни городе мира.
Критерий завершения
Курс полностью пройден и разработаны 3 веб-приложения на React
-
Курс по React от Purpleschool
Для закрепления изученного материала и обучение работе React/Redux совместно с TypeScript.
-
Введение
-
Настройка Окружения
-
Компоненты
-
События и состояние
-
Отображение данных
-
Стилизация
-
Другие hooks
-
Контекст
-
Работа с React
-
Переход на TypeScript
-
React Router
-
Взаимодействие с сервером
-
Авторизация
-
Redux Toolkit
-
Завершение проекта
-
-
Курс по React от Bogdan Stashchuk
-
Введение в React
-
Основы и ключевые понятия в React
-
Программы для курса
-
Проект с Vanilla JS
-
Подключение библиотеки React
-
Проект с JSX
-
Проект React с изменением кнопки при нажатии
-
Добавление состояния и свойств для компонента
-
Курс по предварительным требованиям
-
Create React App
-
Подготовка шаблонного проекта
-
Проект по переиспользованию компонентов
-
Проект по использованию props
-
Проект по условному возврату JSX
-
Проект с состоянием компонента
-
Проект по передаче состояния через свойства
-
Проект с методом массивов map
-
Проект с итерацией по массиву объектов
-
Проект с оператором И в коде JSX
-
Проект по использованию React Fragment
-
Проект по неконтролируемым полям ввода
-
Проект по контролируемым полям ввода
-
Проект с использованием свойства children
-
Проект с fetch и useEffect
-
Проект с массивом постов
-
Проект с async await в useEffect
-
Проект с модулями CSS
-
Первая версия проекта Todo App
-
Вторая версия проекта Todo App
-
Введение в React Router
-
Навигация в React Router
-
Использование хуков React Router
-
Context API
-
Введение в Redux
-
Проект с созданием reducer без Redux
-
Проект с Redux без React
-
Проект React с Redux - Book Library App
-
Использование createSlice в Redux
-
Обработка API запросов в Redux
-
-
Прохождение мастер-классов по React
Этап закрепления изученного материала, чтобы больше увидеть чужих примеров работы с React.
-
Modern Blog Website using React JS and Tailwind CSS
-
Создание корзины товаров
-
Разработай 6 проектов на ReactJS (для начинающих)
-
React Sneakers - создаем простой интернет-магазин (junior)
-
Список Игр с Фильтрами и Поиском на React
-
-- на потом, после курса от Purpleschool --
-
React Pizza v2 [REMASTERED]
-
Tailwind CSS + React - Проект с нуля
-
ToDoList от IT-Kamasutra
-
Делаем и Деплоим Фуллстак Приложение на React, TypeScript, Redux Toolkit, Express | 11+ часов
-
NextPizza / Разработка FullStack интернет-магазина (клон ДодоПиццы) [NextJS, TS, Prisma, NextAuth]
-
-- на потом, если будет время и желание --
-
Разрабатываем клон TJournal (NextJS, TS, Redux Saga, NestJS, PostgreSQL) / pre-middle
-
Создание ИНТЕРНЕТ-МАГАЗИНА на REACT.JS + REDUX + Деплой c API с нуля
-
-
Создание первого проекта
Веб-приложение калькулятора нагрузки на оси тягача и полуприцепа
-
Создание второго веб-проекта
Веб-приложение бронирования мест в офисе.
-
Создание третьего веб-проекта
На этом этапе буду откликаться на вакансии и паралельно делать ещё один проект.
Дневник цели
Прошёл 8 видео, посвящённых Redux Toolkit, из 27 - React Pizza v2 [REMASTERED]
12. Изучаем библиотеку Redux Toolkit
13. Изучаем хуки useSelector, useDispatch
14. Оптимизируем поиск с помощью Debounce
15. Сохраняем параметры фильтрации в URL
16. Создаем Redux-логику для корзины, скрытие
17. Асинхронные экшены в RTK (createAsyncThunk)
18. Что такое ThunkAPI в RTK？ Создаем селекторы
19. Разбираемся подробней с роутером (useParam, Outlet)
〰
Бывают моменты, когда устаёшь от количества изученного, потом попадает сложная тема и на этой теме отвлекаешься от учёбы на более простое. Так и в момент изучения Redux Toolkit мне попался createAsyncThunk, с которым я затянул учёбу по одному видео дней на 5. Мой мозг решил, что сейчас самое время позаниматься другими делами, например попланировать создание сайта на следующий год, которым можно делать после выполнения учебных-проектов 👍😂
Придумал себе идею сайта каталога токенов (промптов) для Stable Diffusion, в котором можно посмотреть не только на коллекцию токенов, но и на результат генерации в виде изображения. В интернете нашёл что-то подобное только в трёх вариантах:
- Готовые промпты содержащие в себе десятки токенов. В качестве банального примера - Civitai.
- Большие списки токенов без примеров изображений.
- Каталог сделанный в Figme с примерами на 100 или максимум там 200 изображений.
Кто увлекается инструментами Stable Diffusion, MidJourney и Flux, если такие люди есть здесь, напишите, был бы вам полезен сайт с большим каталогом токенов и примерами генерации изображений, который бы содержал в себе: внешность людей, различные варианты поз, параметры расположения на кадре, типы фотоаппаратов, стили рисунков, способы освещения, одежду, виды ландшафтов и архитектур?
Прошёл ещё 3 видео из 27 - React Pizza v2 [REMASTERED]
9. Делаем функционал сортировки и фильтрации пицц
10. Разрабатываем пагинацию и поиск пицц
11. Что такое контекст в React (useContext) и Props Drilling?
Прошёл 8 из 27 видео React Pizza v2 [REMASTERED]
- Настройка проекта
- Создаём компонент, SCSS, import/export, props (пропсы)
- Как хранить данные в компоненте (useState), onClick, деструктуризация
- Создаем компонент пицц и категории, рендер списка, spread-оператор
- Создаем popup-окно сортировки, что такое key?
- Получаем пиццы с бэкенда (fetch), изучаем хук useEffect
- Подключаем React Router v6, создаем компонент-скелетон
- Настраиваем адаптивную вёрстку, создаём страницу корзины
Прошёл темы курса:
10. Переход на TypeScript
11. React Router
12. Взаимодействие с сервером
13. Авторизация
〰
Последние из тем "Redux Toolkit" и "Завершение проекта" пропустил по причине того, что автор просто пишет проект, особо не углубляясь в то что пишет. Вчера посмотрел первые три урока из "Redux Toolkit" и ничего не было понятно. Сегодня начала пересматривать и всё также ничего из его урока не понимаю.
Курс от PurpleSchool начал смотреть с целью разобраться как использовать TypeScript в React, но ничего из этого курса толкового не узнал. Всё время приходилось отправлять код в chatGPT, чтобы хоть он мне объяснял, что там написано и для чего. Слишком поверхностные уроки.
〰
Начну проходить видео "React Pizza v2 [REMASTERED]" по созданию интернет-магазина.
Если в нём автор не будет останавливаться на объяснение TypeScript, то пройду дополнительно курс от Михаила Непомнящего, уроки которого есть на YouTube.
Прошёл темы курса:
8. Контекст
9. Работа с React
Прошёл темы курса:
5. Отображение данных
6. Стилизация
7. Другие hooks (useEffect, useReducer, useRef, forwardRef, создание Custom Hook).
Прошёл за сегодня темы курса:
3. Компоненты
4. События и состояние
Не оказалось какого-то смысла проходить видео по созданию списка игр. В нём показывался способ вывода карточек и настройка поиска по карточкам. Всё это уже прошёл в предыдущих двух мастер-классах от Archakov Blog.
Начал проходить курс по React от Purpleschool. Прошёл темы:
- Введение.
- Настройка проект.
- Компоненты (первые два урока "Обзор проекта" и "Настройка eslint").
Прошёл плейлист по созданию интернет-магазина React Sneakers.
Предыдущее просмотренное видео с "6 проектами для джуна" прям хорошо помогло мне в понимание React.
В новом мастер-классе большую часть функционала я делал самостоятельно ещё до объяснений автора, ставил видео на паузу, писал код, а потом сравнивал с его решениями.
Учитывая, что автор перед записью уроков не планировал, как он будет делать весь функционал, у меня получалось писать код даже лучше и надёжнее. Не возникло ошибок связанных с добавлением и удалением товаров из корзины. Я сразу сделал отдельные id для товаров. А он потратил много времени на решение багов в 6 и 7 видео.
Для сохранения данных использовался mockapi, но я заменил его на mokky.dev — там меньше ограничений в бесплатной версии. Рекомендую!
〰
Перехожу к прохождению урока "Список Игр с Фильтрами и Поиском на React", а после перейду к беглому прохождению курса от Purpleschool, так как в следующем учебном проекте "React Pizza v2" будет требоваться опыт использования TypeScript в React.
Месяц был занят бытовыми задачами. На днях освободился и снова приступил к React.
Повторно просмотрел на YouTube видео с 6 проектами, чтобы вспомнить пройденное в React.
Перехожу к следующему плейлисту уроков - созданию интернет-магазина React Sneakers.
Сначала написал, что собираюсь пройти плейлист на YouTube по созданию ToDo листа от IT-Kamasutra, но в первом же видео Димыч сказал, что в проекте будет использоваться TypeScript, что не походит для моей цели, вспомнить изученное в React.
Будет сложно сразу вспоминать React и TypeScript. В React Sneakers будет только React.
