KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

react-js

★ 103 Open GitHub ↗

Код учебного курса “React & Redux” на YouTube-канале webDev (https://tinyurl.com/2x723axp)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

#  React & Redux

### Описание курса:
В данном видео-курсе мы с вами рассмотрим базовые понятия фрэймворка **ReactJS**, актуальной на текущий момент версии **16.4**. Научимся создавать свои компоненты и элементарные приложения. Разберёмся, как подключается и как работает **React Router** и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как **Redux**. И разберём как он взаимодействет с React, создав приложение - список задач.

### Поддержать развитие канала:
[<img alt="webDev | YouTube Sponsor" src="https://img.shields.io/badge/Стать спонсором-F70000.svg?&style=for-the-badge&logo=youtube&logoColor=fff" />][sponsor]

---

### Используемые ресурсы и инструменты:
- [Atom (Редактор кода)](https://atom.io/)
- [Create React App (рабочее окружение)](https://github.com/facebook/create-react-app)
- [React Developer Tools (расширение для браузера)](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru)
- [Redux Devtools (расширение для браузера)](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ru)
- [Redux Devtools (репозиторий)](https://github.com/zalmoxisus/redux-devtools-extension)
- [Fake online REST API (моковый API)](https://jsonplaceholder.typicode.com/)
- [Hacker News (ресурс)](https://hn.algolia.com/?query=&sort=byPopularity&prefix&page=0&dateRange=all&type=story)
- [Hacker News (описание API)](https://hn.algolia.com/api)
- [Redux-LocalStorage-Simple (репозиторий)](https://www.npmjs.com/package/redux-localstorage-simple)

### Полезные ссылки:
- [React (документация)](https://reactjs.org/docs/getting-started.html)
- [Redux (документация)](https://redux.js.org/)
- [React Animations (документация)](https://reactcommunity.org/react-transition-group/)
- [Redux (документация)](https://redux.js.org/)
- [React lifecycle methods +16.3 (ресурс со ссылками)](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
- [React lifecycle methods less 16.3 (картинка)](https://webjustify.com/wp-content/uploads/2018/04/component-lifecycle.png)
- [React Transition Group (документация)](https://reactcommunity.org/react-transition-group/)
- [React Router (репозиторий)](https://github.com/ReactTraining/react-router)

---

### Быстрый старт:
- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/react-js.git`
- Перейдите в папку с проектом `cd react-js`
- Перейдите в нужную ветку соответствующую уроку:
  - `git checkout 02_components2`
  - `git checkout 03_state` и т.д.
- Установите зависимости: `yarn install`
- Запустите проект: `yarn start`

---

### Список уроков:
- [#0 Введение в курс (Introduction)](https://youtu.be/2vujABNBFAY)
- [#1 Плагины и окружение (Plugins & Environment)](https://youtu.be/BERZDjtdHIs)
- [#2 Компоненты (Components)](https://youtu.be/COmtvBvBuqU)
- [#3 Локальный стейт (State)](https://youtu.be/sPuhTFtL2XQ)
- [#4 Пропсы и их валидация (Props & PropTypes. Part I)](https://youtu.be/ePpKIIqHt6I)
- [#5 Пропсы и их валидация (Props & PropTypes. Part II)](https://youtu.be/kupztj-2318)
- [#6 События (Handling Events)](https://youtu.be/hFgB5E0uL_Y)
- [#7 Условный рендеринг (Conditional Rendering)](https://youtu.be/RfHw3oQRbgg)
- [#8 Списки и ключи (Lists & keys)](https://youtu.be/stOttWwNncQ)
- [#9 Фрагменты и стили (Fragments & CSS)](https://youtu.be/Z0S4wcyzLZc)
- [#10 Формы (Forms)](https://youtu.be/LLum_dcrbFo)
- [#11 Методы жизненного цикла (Lifecycle methods)](https://youtu.be/O8f6aXqpGHw)
- [#12 Ссылки (Refs)](https://youtu.be/j5JKhPPVxRM)
- [#13 Компоненты высшего порядка (High Order Components)](https://youtu.be/POHukHTiEL4)
- [#14 Порталы (Portals)](https://youtu.be/xcWaYD4gZAs)
- [#15 Контекст (Context)](https://youtu.be/W_-TO_reSGs)
- [#16 Работа с реальным API (React: work with API. Part I)](https://youtu.be/np6k4FH6Hg8)
- [#17 Работа с реальным API (React: work with API. Part II)](https://youtu.be/d2Z1D5Jvajc)
- [#18 Роутер (React router. Part I)](https://youtu.be/lvIfuti1sug)
- [#19 Роутер (React router. Part II)](https://youtu.be/j_RIqH9NwW0)
- [#20 Введение в Редакс (Redux Introduction)](https://youtu.be/OmeRRVwWEmc)
- [#21 Приложение и Редакс модули (Application & Redux modules)](https://youtu.be/qQx-phy5yjo)
- [#22 Список дел на Реакт и Редакс (ToDo Appliction: React & Redux. Part I)](https://youtu.be/0kVenECLU_8)
- [#23 Список дел на Реакт и Редакс (ToDo Appliction: React & Redux. Part II)](https://youtu.be/m5LIqjQSIwg)
- [#24 Список дел на Реакт и Редакс (ToDo Appliction: React & Redux. Part III)](https://youtu.be/qwMBO2hVq9E)
- [#25 Анимации (React animations)](https://youtu.be/GvtbwnaWr_M)

---

### Связаться со мной:
[<img alt="webDev | YouTube" src="https://img.shields.io/badge/youtube-FF0000.svg?&style=for-the-badge&logo=youtube&logoColor=white" />][youtube]
[<img alt="webDev | Instagram" src="https://img.shields.io/badge/instagram-E4405F.svg?&style=for-the-badge&logo=instagram&logoColor=white" />][instagram]
[<img alt="webDev | LinkedIn" src="https://img.shields.io/badge/linkedin-0077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" />][linkedin]
[<img alt="webDev | X" src="https://img.shields.io/badge/x-000000.svg?&style=for-the-badge&logo=x&logoColor=white" />][x]
[<img alt="webDev | Threads" src="https://img.shields.io/badge/threads-ffffff.svg?&style=for-the-badge&logo=threads&logoColor=black" />][threads]
[<img alt="webDev | Telegram" src="https://img.shields.io/badge/telegram-229ED9.svg?&style=for-the-badge&logo=Telegram&logoColor=white" />][telegram]

[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[x]: https://x.com/YauhenKavalchuk
[threads]: https://www.threads.com/YauhenKavalchuk
[telegram]: http://t.me/yauhenkavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join

react-js

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README