https://github.com/yauhenkavalchuk/react-js
Код учебного курса “React & Redux” на YouTube-канале webDev (https://tinyurl.com/2x723axp)
https://github.com/yauhenkavalchuk/react-js
react react-router reactjs redux
Last synced: about 1 month ago
JSON representation
Код учебного курса “React & Redux” на YouTube-канале webDev (https://tinyurl.com/2x723axp)
- Host: GitHub
- URL: https://github.com/yauhenkavalchuk/react-js
- Owner: YauhenKavalchuk
- Created: 2018-08-25T06:12:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T21:59:21.000Z (over 2 years ago)
- Last Synced: 2023-03-04T15:19:49.130Z (about 2 years ago)
- Topics: react, react-router, reactjs, redux
- Language: JavaScript
- Homepage: http://youtube.com/c/YauhenKavalchuk/
- Size: 854 KB
- Stars: 98
- Watchers: 10
- Forks: 66
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React & Redux
### Описание курса:
В данном видео-курсе мы с вами рассмотрим базовые понятия фрэймворка **ReactJS**, актуальной на текущий момент версии **16.4**. Научимся создавать свои компоненты и элементарные приложения. Разберёмся, как подключается и как работает **React Router** и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как **Redux**. И разберём как он взаимодействет с React, создав приложение - список задач.
### Поддержать развитие канала:
[
][sponsor]
[
][patron]
---
### Используемые ресурсы и инструменты:
- [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)
---
### Связаться со мной:
[
][youtube]
[
][instagram]
[
][linkedin]
[
][twitter]
[
][vk]
[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[vk]: https://vk.com/YauhenKavalchuk
[twitter]: https://twitter.com/YauhenKavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join
[patron]: https://www.patreon.com/YauhenKavalchuk