Материал для серии подкастов посвящённых библиотеке ReactJS. В данных подкастах рассматриваются новые версии библиотеки, обновлённые и добавленные возможности. А так же функциональности которые устаревают. Держите руку на пульсе последних обновлений и подписывайтесь на YouTube канал!
- Клонируйте репозиторий:
git clone https://github.com/YauhenKavalchuk/react-podcasts.git
- Установите зависимости:
yarn install
илиnpm install
- Перейдите в нужную ветку соответствующую подкасту:
git checkout <branch name>
- Запустите проект:
yarn start
Добро пожаловать в 6-й выпуск видео-каста, посвящённого библиотеке ReactJS. И в этом выпуске мы с вами обсудим примерный список обновлений будущей, ещё не представленной версии React 17:
- Async Rendering;
- Time Slicing;
- React Suspense;
- Lifecycle Methods;
- Deprecations.
Полезные ресурсы:
- Beyond React 16 | JSConf Iceland 2018
- Concurrent Rendering in React | React Conf 2018
- Suspense! | ReactFest
- React v16.9.0 and the Roadmap Update
Добро пожаловать в 5-й выпуск видео-каста, посвящённого библиотеки ReactJS. Я немного полазил по просторам интернета и постарался собрать коллекцию разнообразных тулов, которые будут полезны любому React разработчику. Т.к. в большинстве своём они призваны упростить, или ускорить разработку связанную с библиотекой React и её экосистемой.
Полезные ресурсы:
- Webpack Bundle Analyzer
- Create React App
- React Developer Tools
- Storybook
- CodeSandbox
- React Bits
- Awesome React
- Material-UI
- Ant-design
- React-Bootstrap
- Reactstrap
- React-Proto
- Why Did You Render
- Next.js
- Proton Native
- Devhints React.js cheatsheet
В этом 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 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 (Полное введение в Хуки)
- Introducing Hooks
- React v16.8: The One With Hooks
- Hooks API
- useHooks
- Collection of React Hooks
- Awesome React Hooks
В этом подкасте мы с вами рассмотрим такое понятие как 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
В этом подкасте мы с вами поговорим о том что нового появилось в представленной версии реакта 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