{"id":19486020,"url":"https://github.com/yauhenkavalchuk/react-js","last_synced_at":"2025-04-25T18:31:51.921Z","repository":{"id":42107182,"uuid":"146070369","full_name":"YauhenKavalchuk/react-js","owner":"YauhenKavalchuk","description":"Код учебного курса “React \u0026 Redux” на YouTube-канале webDev (https://tinyurl.com/2x723axp)","archived":false,"fork":false,"pushed_at":"2022-12-08T21:59:21.000Z","size":874,"stargazers_count":98,"open_issues_count":6,"forks_count":66,"subscribers_count":10,"default_branch":"master","last_synced_at":"2023-03-04T15:19:49.130Z","etag":null,"topics":["react","react-router","reactjs","redux"],"latest_commit_sha":null,"homepage":"http://youtube.com/c/YauhenKavalchuk/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YauhenKavalchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-25T06:12:38.000Z","updated_at":"2023-03-02T10:38:16.000Z","dependencies_parsed_at":"2023-01-25T07:45:51.060Z","dependency_job_id":null,"html_url":"https://github.com/YauhenKavalchuk/react-js","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Freact-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Freact-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Freact-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Freact-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YauhenKavalchuk","download_url":"https://codeload.github.com/YauhenKavalchuk/react-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224011729,"owners_count":17240999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","reactjs","redux"],"created_at":"2024-11-10T20:32:58.959Z","updated_at":"2024-11-10T20:32:59.991Z","avatar_url":"https://github.com/YauhenKavalchuk.png","language":"JavaScript","funding_links":["https://www.patreon.com/YauhenKavalchuk"],"categories":[],"sub_categories":[],"readme":"#  React \u0026 Redux\n\n### Описание курса:\nВ данном видео-курсе мы с вами рассмотрим базовые понятия фрэймворка **ReactJS**, актуальной на текущий момент версии **16.4**. Научимся создавать свои компоненты и элементарные приложения. Разберёмся, как подключается и как работает **React Router** и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как **Redux**. И разберём как он взаимодействет с React, создав приложение - список задач.\n\n### Поддержать развитие канала:\n[\u003cimg alt=\"webDev | YouTube Sponsor\" src=\"https://img.shields.io/badge/Become a sponsor-F70000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=fff\" /\u003e][sponsor]\n[\u003cimg alt=\"webDev | Patreon\" src=\"https://img.shields.io/badge/Become a patron-EF6451.svg?\u0026style=for-the-badge\u0026logo=patreon\u0026logoColor=fff\" /\u003e][patron]\n\n---\n\n### Используемые ресурсы и инструменты:\n- [Atom (Редактор кода)](https://atom.io/)\n- [Create React App (рабочее окружение)](https://github.com/facebook/create-react-app)\n- [React Developer Tools (расширение для браузера)](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru)\n- [Redux Devtools (расширение для браузера)](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ru)\n- [Redux Devtools (репозиторий)](https://github.com/zalmoxisus/redux-devtools-extension)\n- [Fake online REST API (моковый API)](https://jsonplaceholder.typicode.com/)\n- [Hacker News (ресурс)](https://hn.algolia.com/?query=\u0026sort=byPopularity\u0026prefix\u0026page=0\u0026dateRange=all\u0026type=story)\n- [Hacker News (описание API)](https://hn.algolia.com/api)\n- [Redux-LocalStorage-Simple (репозиторий)](https://www.npmjs.com/package/redux-localstorage-simple)\n\n### Полезные ссылки:\n- [React (документация)](https://reactjs.org/docs/getting-started.html)\n- [Redux (документация)](https://redux.js.org/)\n- [React Animations (документация)](https://reactcommunity.org/react-transition-group/)\n- [Redux (документация)](https://redux.js.org/)\n- [React lifecycle methods +16.3 (ресурс со ссылками)](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)\n- [React lifecycle methods less 16.3 (картинка)](https://webjustify.com/wp-content/uploads/2018/04/component-lifecycle.png)\n- [React Transition Group (документация)](https://reactcommunity.org/react-transition-group/)\n- [React Router (репозиторий)](https://github.com/ReactTraining/react-router)\n\n---\n\n### Быстрый старт:\n- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/react-js.git`\n- Перейдите в папку с проектом `cd react-js`\n- Перейдите в нужную ветку соответствующую уроку:\n  - `git checkout 02_components2`\n  - `git checkout 03_state` и т.д.\n- Установите зависимости: `yarn install`\n- Запустите проект: `yarn start`\n\n---\n\n### Список уроков:\n- [#0 Введение в курс (Introduction)](https://youtu.be/2vujABNBFAY)\n- [#1 Плагины и окружение (Plugins \u0026 Environment)](https://youtu.be/BERZDjtdHIs)\n- [#2 Компоненты (Components)](https://youtu.be/COmtvBvBuqU)\n- [#3 Локальный стейт (State)](https://youtu.be/sPuhTFtL2XQ)\n- [#4 Пропсы и их валидация (Props \u0026 PropTypes. Part I)](https://youtu.be/ePpKIIqHt6I)\n- [#5 Пропсы и их валидация (Props \u0026 PropTypes. Part II)](https://youtu.be/kupztj-2318)\n- [#6 События (Handling Events)](https://youtu.be/hFgB5E0uL_Y)\n- [#7 Условный рендеринг (Conditional Rendering)](https://youtu.be/RfHw3oQRbgg)\n- [#8 Списки и ключи (Lists \u0026 keys)](https://youtu.be/stOttWwNncQ)\n- [#9 Фрагменты и стили (Fragments \u0026 CSS)](https://youtu.be/Z0S4wcyzLZc)\n- [#10 Формы (Forms)](https://youtu.be/LLum_dcrbFo)\n- [#11 Методы жизненного цикла (Lifecycle methods)](https://youtu.be/O8f6aXqpGHw)\n- [#12 Ссылки (Refs)](https://youtu.be/j5JKhPPVxRM)\n- [#13 Компоненты высшего порядка (High Order Components)](https://youtu.be/POHukHTiEL4)\n- [#14 Порталы (Portals)](https://youtu.be/xcWaYD4gZAs)\n- [#15 Контекст (Context)](https://youtu.be/W_-TO_reSGs)\n- [#16 Работа с реальным API (React: work with API. Part I)](https://youtu.be/np6k4FH6Hg8)\n- [#17 Работа с реальным API (React: work with API. Part II)](https://youtu.be/d2Z1D5Jvajc)\n- [#18 Роутер (React router. Part I)](https://youtu.be/lvIfuti1sug)\n- [#19 Роутер (React router. Part II)](https://youtu.be/j_RIqH9NwW0)\n- [#20 Введение в Редакс (Redux Introduction)](https://youtu.be/OmeRRVwWEmc)\n- [#21 Приложение и Редакс модули (Application \u0026 Redux modules)](https://youtu.be/qQx-phy5yjo)\n- [#22 Список дел на Реакт и Редакс (ToDo Appliction: React \u0026 Redux. Part I)](https://youtu.be/0kVenECLU_8)\n- [#23 Список дел на Реакт и Редакс (ToDo Appliction: React \u0026 Redux. Part II)](https://youtu.be/m5LIqjQSIwg)\n- [#24 Список дел на Реакт и Редакс (ToDo Appliction: React \u0026 Redux. Part III)](https://youtu.be/qwMBO2hVq9E)\n- [#25 Анимации (React animations)](https://youtu.be/GvtbwnaWr_M)\n\n---\n\n### Связаться со мной:\n[\u003cimg alt=\"webDev | YouTube\" src=\"https://img.shields.io/badge/youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][youtube]\n[\u003cimg alt=\"webDev | Instagram\" src=\"https://img.shields.io/badge/instagram-E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][instagram]\n[\u003cimg alt=\"webDev | LinkedIn\" src=\"https://img.shields.io/badge/linkedin-0077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e][linkedin]\n[\u003cimg alt=\"webDev | Twitter\" src=\"https://img.shields.io/badge/twitter-1DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][twitter]\n[\u003cimg alt=\"webDev | VK\" src=\"https://img.shields.io/badge/vk-4680C2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][vk]\n\n[youtube]: https://youtube.com/YauhenKavalchuk\n[instagram]: https://instagram.com/YauhenKavalchuk\n[linkedin]: https://linkedin.com/in/YauhenKavalchuk\n[vk]: https://vk.com/YauhenKavalchuk\n[twitter]: https://twitter.com/YauhenKavalchuk\n[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join\n[patron]: https://www.patreon.com/YauhenKavalchuk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Freact-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyauhenkavalchuk%2Freact-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Freact-js/lists"}