├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── index.css ├── index.js ├── App.js └── App.test.js ├── .gitignore ├── package.json └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/react-videocast/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 |
!!!
7 | ); 8 | } 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "React-podcasts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.6.0", 7 | "react-dom": "16.6.0", 8 | "react-router-dom": "4.3.1", 9 | "react-scripts": "2.0.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Videocasts 2 | Материал для серии подкастов посвящённых библиотеке **ReactJS**. В данных подкастах рассматриваются новые версии библиотеки, обновлённые и добавленные возможности. А так же функциональности которые устаревают. Держите руку на пульсе последних обновлений и подписывайтесь на [YouTube канал](https://youtube.com/c/YauhenKavalchuk)! 3 | 4 | ### Поддержать развитие канала: 5 | [webDev | YouTube Sponsor][sponsor] 6 | [webDev | Patreon][patron] 7 | 8 | --- 9 | 10 | ### Быстрый старт 11 | - Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/react-podcasts.git` 12 | - Установите зависимости: `yarn install` или `npm install` 13 | - Перейдите в нужную ветку соответствующую подкасту: `git checkout ` 14 | - Запустите проект: `yarn start` 15 | 16 | --- 17 | 18 | ### Связаться со мной: 19 | [webDev | YouTube][youtube] 20 | [webDev | Instagram][instagram] 21 | [webDev | LinkedIn][linkedin] 22 | [webDev | Twitter][twitter] 23 | [webDev | VK][vk] 24 | 25 | [youtube]: https://youtube.com/YauhenKavalchuk 26 | [instagram]: https://instagram.com/YauhenKavalchuk 27 | [linkedin]: https://linkedin.com/in/YauhenKavalchuk 28 | [vk]: https://vk.com/YauhenKavalchuk 29 | [twitter]: https://twitter.com/YauhenKavalchuk 30 | [sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join 31 | [patron]: https://www.patreon.com/YauhenKavalchuk 32 | 33 | ### React Videocast #7: React мемоизация: memo, useMemo, useCallback: 34 | в данном выпуске мы подробно разберём, что представляют собой **React.memo**, **useCallback** и **useMemo**. Рассмотрим, в чём между ними сходство, чем они отличаются, где применяются, как связаны друг с другом. А так же варианты того, когда данные функции нужно применять, а когда от этого можно отказаться. 35 | 36 | #### Ветки Подкаста: 37 | - `git checkout podcast_07_react_memoization` 38 | 39 | Полезные ресурсы: 40 | - [React Developer Tools](https://react.dev/learn/react-developer-tools) 41 | 42 | --- 43 | 44 | ### React Videocast #6: React 17 что ждать в новой версии?: 45 | Добро пожаловать в 6-й выпуск видео-каста, посвящённого библиотеке ReactJS. 46 | И в этом выпуске мы с вами обсудим примерный список обновлений будущей, ещё не представленной версии **React 17**: 47 | - Async Rendering; 48 | - Time Slicing; 49 | - React Suspense; 50 | - Lifecycle Methods; 51 | - Deprecations. 52 | 53 | Полезные ресурсы: 54 | - [Beyond React 16 | JSConf Iceland 2018](https://www.youtube.com/watch?v=nLF0n9SACd4) 55 | - [Concurrent Rendering in React | React Conf 2018](https://www.youtube.com/watch?v=ByBPyMBTzM0) 56 | - [Suspense! | ReactFest](https://www.youtube.com/watch?v=6g3g0Q_XVb4) 57 | - [React v16.9.0 and the Roadmap Update](https://ru.reactjs.org/blog/2019/08/08/react-v16.9.0.html) 58 | 59 | --- 60 | 61 | ### React Videocast #5: React Tools: 62 | Добро пожаловать в 5-й выпуск видео-каста, посвящённого библиотеки ReactJS. Я немного полазил по просторам интернета и постарался собрать коллекцию разнообразных тулов, которые будут полезны любому React разработчику. Т.к. в большинстве своём они призваны упростить, или ускорить разработку связанную с библиотекой React и её экосистемой. 63 | 64 | Полезные ресурсы: 65 | - [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 66 | - [Create React App](https://github.com/facebook/create-react-app) 67 | - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru) 68 | - [Storybook](https://storybook.js.org/) 69 | - [CodeSandbox](https://codesandbox.io/) 70 | - [React Bits](https://vasanthk.gitbooks.io/react-bits/) 71 | - [Awesome React](https://github.com/enaqx/awesome-react) 72 | - [Material-UI](https://material-ui.com) 73 | - [Ant-design](https://ant.design) 74 | - [React-Bootstrap](https://react-bootstrap.github.io) 75 | - [Reactstrap](https://reactstrap.github.io) 76 | - [React-Proto](https://react-proto.github.io/react-proto/) 77 | - [Why Did You Render](https://github.com/welldone-software/why-did-you-render) 78 | - [Next.js](https://nextjs.org/) 79 | - [Proton Native](https://proton-native.js.org/#/) 80 | - [Devhints React.js cheatsheet](https://devhints.io/react) 81 | 82 | --- 83 | 84 | ### React Videocast #4: React Patterns (Реакт Паттерны): 85 | В этом 4-м выпуск видео-каста, посвящённого библиотеки ReactJS, мы с вами рассмотрим самые распространённые и используемые паттерны этой библиотеки. Паттерн - это архитектурная конструкция, представляющая собой решение проблемы в рамкам определенного контекста. Паттерн спокойно можно называть Best Practice - поскольку это самое оптимальное, универсальное и довольно узнаваемое решение. 86 | 87 | Описанные паттерны: 88 | - **Function component** - Функциональные комопненты. 89 | - **Destructuring prop** - Деструктуризация пропсов. 90 | - **JSX spread attributes** - REST оператор в компонентах. 91 | - **Merge destructured props with other values** - Смерживание пропсов и атрибутов элементов. 92 | - **Conditional rendering** - Условный рендеринг. 93 | - **Component as Props** - Использование компонентов в виде пропсов. 94 | - **Modern Class syntax** - Оптимальный синтаксис класса. 95 | - **Array as children** - Рендеинг массивов. 96 | - **Fragment** - Использование фрагментов. 97 | - **Return Array** - Возврат массива корневых элементов. 98 | - **propTypes & defaultProps** - propTypes и defaultProps - для описания компонента. 99 | - **setState and 2nd argument** - 2-й аргумент в setState. 100 | - **Proxy component** - Прокси компонент. 101 | - **Event switch** - Переключатель событий. 102 | - **Higher-order component** - Компоненты высшего порядка. 103 | 104 | #### Ветки Подкаста: 105 | - `git checkout podcast_04_patterns` 106 | 107 | #### Интересные статьи: 108 | - [React Patterns](https://reactpatterns.com) 109 | 110 | --- 111 | 112 | ### React Videocast #3: React 16.8 Hooks RELEASE! (Реакт Хуки. Официальный релиз): 113 | В этом подкасте мы с вами рассмотрим все хуки, которые были добавлены в новый релиз библиотеки React 16.8. Рассмотрим каким образом их использование полностью сравнивает в использовании Классовые и Функциональные React-компонентов. А так же разберём их возможности, особенности и использование на реальных примерах. 114 | 115 | Описанные хуки: 116 | - **useContext** - Использование контекста. 117 | - **useState** - Использование стейта. 118 | - **useEffect** - Использование методов жизненного цикла. 119 | - **useRef** - Использование ссылок. 120 | - **useReducer** - Использование редьюсера. 121 | - **useLayoutEffect** - Аналог useEffect, который запускается синхронно, после всех изменений в DOM дереве. 122 | - **useCallback** - Используется для возврата мемоизованного коллбека. Повышение перфоманса (аналог shouldComponentUpdate). 123 | - **useMemo** - Используется для возврата сохраненного значения. Повышение перфоманса (аналог shouldComponentUpdate). 124 | - **useImperativeHandle** - Кастомизирует значение инстанса, которое предоставляется родителем при использовании ref. 125 | - **useDebugValue** - Создаёт лейбл для пользовательских Хуков. 126 | 127 | #### Ветки Подкаста: 128 | - `git checkout podcast_03_hooks` 129 | 130 | #### Интересные статьи: 131 | - [React Hooks A Complete Introduction (Полное введение в Хуки)](https://youtu.be/X6j7Y7tp3_c) 132 | - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html) 133 | - [React v16.8: The One With Hooks](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 134 | - [Hooks API](https://reactjs.org/docs/hooks-reference.html) 135 | - [useHooks](https://usehooks.com/) 136 | - [Collection of React Hooks](https://nikgraf.github.io/react-hooks/) 137 | - [Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks) 138 | 139 | --- 140 | 141 | ### React Videocast #2: React Hooks A Complete Introduction (Полное введение в Хуки): 142 | В этом подкасте мы с вами рассмотрим такое понятие как **React Hook (Хук)**. Разберёмся зачем они нужны, синтаксис их создания, использования, а так же их особенности. Рассмотрим каким образом они расширяют функциональность и возможности функциональных Реакт-компонентов. Представленные хуки делятся на базовые и дополнительные, но мы с вами рассмотрим только базовые. Так как именно базовые хуки с большей вероятностью могут появится в ближайших обновлениях библиотеки React. 143 | К базовым хукам можно отнести: 144 | - **useContext** - Хук для использования контекста. 145 | - **useState** - Хук для использования стейта внутри функционального компонента. 146 | - **useEffect** - Хук, аналог методов жизненного цикла. 147 | 148 | А так же в небольшое дополнение мы рассмотрим создание пользовательских хуков. 149 | 150 | #### Ветки Подкаста: 151 | - `git checkout podcast_02_useContext` 152 | - `git checkout podcast_02_useState` 153 | - `git checkout podcast_02_useEffect` 154 | - `git checkout podcast_02_customHooks` 155 | 156 | #### Интересные статьи: 157 | - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html) 158 | - [Collection of React Hooks](https://nikgraf.github.io/react-hooks/) 159 | - [useHooks](https://usehooks.com/) 160 | - [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) 161 | 162 | --- 163 | 164 | ### React Videocast #1: React 16.6 New Features (Новые возможности): 165 | В этом подкасте мы с вами поговорим о том что нового появилось в представленной версии реакта 16.6.0. 166 | В данном обновлении можно отметить 3 очень интересные фичи, которые мы с вами рассмотрим: 167 | - **static contextType** - Статическое свойство для работы с контекстом. 168 | - **React.memo()** - Метод, который помогает увеличить перфоманс функциональных компонентов. 169 | - **React.lazy()** - Метод из нового API - React suspense, который помогает грузить компоненты асинхронно. 170 | 171 | Так же, в не большое дополнение, мы рассмотрим ещё один статический метод: 172 | - **getDerivedStateFromError** - Это улучшенная функциональность метода *componentDidCatch* для отлавливания ошибок рендеринга в дочерних компонентах. 173 | 174 | #### Ветки Подкаста: 175 | - `git checkout podcast_01_context_start` 176 | - `git checkout podcast_01_context_end` 177 | - `git checkout podcast_01_memo_start` 178 | - `git checkout podcast_01_memo_end` 179 | - `git checkout podcast_01_lazy_start` 180 | - `git checkout podcast_01_lazy_end` 181 | - `git checkout podcast_01_getDerivedStateFromError_end` 182 | 183 | #### Интересные статьи: 184 | - [React v16.6.0: lazy, memo and contextType](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) 185 | - [Understanding React “Suspense”](https://medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6) 186 | - [Sneak Peek: Beyond React 16](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) 187 | --------------------------------------------------------------------------------