KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

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

react-components

★ 58 Open GitHub ↗

Код учебного курса “React компоненты” на YouTube-канале webDev (https://tinyurl.com/59ej2249)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

#  React Components

### Описание курса:
В данном видео-курсе мы с вами создадим библиотеку компонентов для проектов на **ReactJS**. Целью данного курса лекций является не создать абсалютно универсальные компоненты, а научиться мыслить в компонентном стиле и постараться создавать гибкие и переиспользуемые модули. Мы с вами рассмотрим создание как простых компонентов таких как кнопки, бейджики, иконки и т.д. так и объединение их в более сложные компоненты: табы, чипы, модальные окна.

### Поддержать развитие канала:
[<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)

### Полезные ссылки:
- [React (документация)](https://reactjs.org/docs/getting-started.html)

---

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

### Дополнительные комманды:

- Запустить линт проекта: `yarn lint` или `npm run lint`

---

### Список уроков:
- [#0 Введение в курс (Introduction)](https://youtu.be/YBwUfpDIMgw)
- [#1 Установка окружения (Environment)](https://youtu.be/B0CL6vwuQnk)
- [#2 Кнопка (Button)](https://youtu.be/cZIm24kxDzU)
- [#3 Группа кнопок (Button group)](https://youtu.be/tfTM3WecJx8)
- [#4 Иконка (Icon)](https://youtu.be/oSe7_r-H_Wo)
- [#5 Картинка (Image)](https://youtu.be/RHBfeKNjcmQ)
- [#6 Фишка (Chip)](https://youtu.be/pHPEOmudb4I)
- [#7 Бейдж (Badge)](https://youtu.be/m4BiLKfe_x8)
- [#8 Группированный список (List group)](https://youtu.be/zqTkDPxaLZU)
- [#9 Поле ввода (Input)](https://youtu.be/lffkJxoUEeY)
- [#10 Табы (Tabs)](https://youtu.be/hPfzI1-to6A)
- [#11 Подсказка (Tooltip)](https://youtu.be/WsxjZgw5LBg)
- [#12 Модальное окно (Modal window)](https://youtu.be/olTU0zfN_Wk)

---

### Связаться со мной:
[<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-components

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README