https://github.com/yauhenkavalchuk/react-videocast
Код и ресурсы из выпусков видеокаста “React видеокаст” на YouTube-канале webDev (https://tinyurl.com/238cpxxh)
https://github.com/yauhenkavalchuk/react-videocast
hooks react react-hooks reactjs
Last synced: 6 months ago
JSON representation
Код и ресурсы из выпусков видеокаста “React видеокаст” на YouTube-канале webDev (https://tinyurl.com/238cpxxh)
- Host: GitHub
- URL: https://github.com/yauhenkavalchuk/react-videocast
- Owner: YauhenKavalchuk
- Created: 2018-10-29T16:21:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T22:03:01.000Z (over 2 years ago)
- Last Synced: 2025-04-04T01:05:12.615Z (6 months ago)
- Topics: hooks, react, react-hooks, reactjs
- Language: HTML
- Homepage: http://youtube.com/c/YauhenKavalchuk/
- Size: 1.53 MB
- Stars: 23
- Watchers: 3
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Videocasts
Материал для серии подкастов посвящённых библиотеке **ReactJS**. В данных подкастах рассматриваются новые версии библиотеки, обновлённые и добавленные возможности. А так же функциональности которые устаревают. Держите руку на пульсе последних обновлений и подписывайтесь на [YouTube канал](https://youtube.com/c/YauhenKavalchuk)!
### Поддержать развитие канала:
[
][sponsor]
[
][patron]
---
### Быстрый старт
- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/react-podcasts.git`
- Установите зависимости: `yarn install` или `npm install`
- Перейдите в нужную ветку соответствующую подкасту: `git checkout `
- Запустите проект: `yarn start`
---
### Связаться со мной:
[
][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
## React Videocast #6: React 17 что ждать в новой версии?:
Добро пожаловать в 6-й выпуск видео-каста, посвящённого библиотеке ReactJS.
И в этом выпуске мы с вами обсудим примерный список обновлений будущей, ещё не представленной версии **React 17**:
- Async Rendering;
- Time Slicing;
- React Suspense;
- Lifecycle Methods;
- Deprecations.
Полезные ресурсы:
- [Beyond React 16 | JSConf Iceland 2018](https://www.youtube.com/watch?v=nLF0n9SACd4)
- [Concurrent Rendering in React | React Conf 2018](https://www.youtube.com/watch?v=ByBPyMBTzM0)
- [Suspense! | ReactFest](https://www.youtube.com/watch?v=6g3g0Q_XVb4)
- [React v16.9.0 and the Roadmap Update](https://ru.reactjs.org/blog/2019/08/08/react-v16.9.0.html)
## React Videocast #5: React Tools:
Добро пожаловать в 5-й выпуск видео-каста, посвящённого библиотеки ReactJS. Я немного полазил по просторам интернета и постарался собрать коллекцию разнообразных тулов, которые будут полезны любому React разработчику. Т.к. в большинстве своём они призваны упростить, или ускорить разработку связанную с библиотекой React и её экосистемой.
Полезные ресурсы:
- [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- [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)
- [Storybook](https://storybook.js.org/)
- [CodeSandbox](https://codesandbox.io/)
- [React Bits](https://vasanthk.gitbooks.io/react-bits/)
- [Awesome React](https://github.com/enaqx/awesome-react)
- [Material-UI](https://material-ui.com)
- [Ant-design](https://ant.design)
- [React-Bootstrap](https://react-bootstrap.github.io)
- [Reactstrap](https://reactstrap.github.io)
- [React-Proto](https://react-proto.github.io/react-proto/)
- [Why Did You Render](https://github.com/welldone-software/why-did-you-render)
- [Next.js](https://nextjs.org/)
- [Proton Native](https://proton-native.js.org/#/)
- [Devhints React.js cheatsheet](https://devhints.io/react)
## React Videocast #4: React Patterns (Реакт Паттерны):
В этом 4-м выпуск видео-каста, посвящённого библиотеки ReactJS, мы с вами рассмотрим самые распространённые и используемые паттерны этой библиотеки. Паттерн - это архитектурная конструкция, представляющая собой решение проблемы в рамкам определенного контекста. Паттерн спокойно можно называть Best Practice - поскольку это самое оптимальное, универсальное и довольно узнаваемое решение.
Описанные паттерны:
- **Function component** - Функциональные комопненты.
- **Destructuring prop** - Деструктуризация пропсов.
- **JSX spread attributes** - REST оператор в компонентах.
- **Merge destructured props with other values** - Смерживание пропсов и атрибутов элементов.
- **Conditional rendering** - Условный рендеринг.
- **Component as Props** - Использование компонентов в виде пропсов.
- **Modern Class syntax** - Оптимальный синтаксис класса.
- **Array as children** - Рендеинг массивов.
- **Fragment** - Использование фрагментов.
- **Return Array** - Возврат массива корневых элементов.
- **propTypes & defaultProps** - propTypes и defaultProps - для описания компонента.
- **setState and 2nd argument** - 2-й аргумент в setState.
- **Proxy component** - Прокси компонент.
- **Event switch** - Переключатель событий.
- **Higher-order component** - Компоненты высшего порядка.
### Ветки Подкаста:
- `git checkout podcast_04_patterns`
### Интересные статьи:
- [React Patterns](https://reactpatterns.com)
## React Videocast #3: React 16.8 Hooks RELEASE! (Реакт Хуки. Официальный релиз):
В этом подкасте мы с вами рассмотрим все хуки, которые были добавлены в новый релиз библиотеки React 16.8. Рассмотрим каким образом их использование полностью сравнивает в использовании Классовые и Функциональные React-компонентов. А так же разберём их возможности, особенности и использование на реальных примерах.
Описанные хуки:
- **useContext** - Использование контекста.
- **useState** - Использование стейта.
- **useEffect** - Использование методов жизненного цикла.
- **useRef** - Использование ссылок.
- **useReducer** - Использование редьюсера.
- **useLayoutEffect** - Аналог useEffect, который запускается синхронно, после всех изменений в DOM дереве.
- **useCallback** - Используется для возврата мемоизованного коллбека. Повышение перфоманса (аналог shouldComponentUpdate).
- **useMemo** - Используется для возврата сохраненного значения. Повышение перфоманса (аналог shouldComponentUpdate).
- **useImperativeHandle** - Кастомизирует значение инстанса, которое предоставляется родителем при использовании ref.
- **useDebugValue** - Создаёт лейбл для пользовательских Хуков.
### Ветки Подкаста:
- `git checkout podcast_03_hooks`
### Интересные статьи:
- [React Hooks A Complete Introduction (Полное введение в Хуки)](https://youtu.be/X6j7Y7tp3_c)
- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [React v16.8: The One With Hooks](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)
- [Hooks API](https://reactjs.org/docs/hooks-reference.html)
- [useHooks](https://usehooks.com/)
- [Collection of React Hooks](https://nikgraf.github.io/react-hooks/)
- [Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks)
## React Videocast #2: React Hooks A Complete Introduction (Полное введение в Хуки):
В этом подкасте мы с вами рассмотрим такое понятие как **React Hook (Хук)**. Разберёмся зачем они нужны, синтаксис их создания, использования, а так же их особенности. Рассмотрим каким образом они расширяют функциональность и возможности функциональных Реакт-компонентов. Представленные хуки делятся на базовые и дополнительные, но мы с вами рассмотрим только базовые. Так как именно базовые хуки с большей вероятностью могут появится в ближайших обновлениях библиотеки React.
К базовым хукам можно отнести:
- **useContext** - Хук для использования контекста.
- **useState** - Хук для использования стейта внутри функционального компонента.
- **useEffect** - Хук, аналог методов жизненного цикла.
А так же в небольшое дополнение мы рассмотрим создание пользовательских хуков.
### Ветки Подкаста:
- `git checkout podcast_02_useContext`
- `git checkout podcast_02_useState`
- `git checkout podcast_02_useEffect`
- `git checkout podcast_02_customHooks`
### Интересные статьи:
- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Collection of React Hooks](https://nikgraf.github.io/react-hooks/)
- [useHooks](https://usehooks.com/)
- [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889)
## React Videocast #1: React 16.6 New Features (Новые возможности):
В этом подкасте мы с вами поговорим о том что нового появилось в представленной версии реакта 16.6.0.
В данном обновлении можно отметить 3 очень интересные фичи, которые мы с вами рассмотрим:
- **static contextType** - Статическое свойство для работы с контекстом.
- **React.memo()** - Метод, который помогает увеличить перфоманс функциональных компонентов.
- **React.lazy()** - Метод из нового API - React suspense, который помогает грузить компоненты асинхронно.
Так же, в не большое дополнение, мы рассмотрим ещё один статический метод:
- **getDerivedStateFromError** - Это улучшенная функциональность метода *componentDidCatch* для отлавливания ошибок рендеринга в дочерних компонентах.
### Ветки Подкаста:
- `git checkout podcast_01_context_start`
- `git checkout podcast_01_context_end`
- `git checkout podcast_01_memo_start`
- `git checkout podcast_01_memo_end`
- `git checkout podcast_01_lazy_start`
- `git checkout podcast_01_lazy_end`
- `git checkout podcast_01_getDerivedStateFromError_end`
### Интересные статьи:
- [React v16.6.0: lazy, memo and contextType](https://reactjs.org/blog/2018/10/23/react-v-16-6.html)
- [Understanding React “Suspense”](https://medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6)
- [Sneak Peek: Beyond React 16](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)