Free React For Beginners

😎TypeScript - основи😎 ✍️ TypeScript однозначно зайняв своє місце серед інструментів веб розробки. З мого досвіду - більшість проектів стартують саме на ньому. Тому, хоча ця тема напряму не стосується React, ми вирішили додати її до нашого курсу. 👉 Ми розповіли про типи, явні та не явні, подивились на помилки та навіть заглянули під капот TypeScript, який, як виявляється, написаний на тому самому TypeScript Лекція вже доступна для перегляду, а ви бережіть себе і близьких. Все буде добре.

І знову - бережіть себе, будьте у безпеці. Все мине, і русня також мине. А ми будемо сидіти на берегу Дніпра і дивитися як тече вода і несе течія.

🪲Debug та React 🪲 🥶 Дебаггінг це не просте, але вкрай важливе уміння яке буде з вами весь час вашої кар'єри. Неважливо на чому ви пишете чи то на JS чи то на Elm, чи навіть на якомусь brainfuck. Без дебагінгу просто нікуди. 👉 Саме тому, наступну лекцію з нашого курсу ми присвятили дебагу де розглянули як загальні інструменти (Chrome Dev Tools) так і React Developer Tools. Нова лекція вже завантажена YouTube та чекає на вас. 😺 До речі, а ви звернули увагу, що дебагінг українською звучить як "де баг?" що цілком відповідає змісту цього слова? Можливо дебаг придумали українці? Бережіть себе і скоро побачимося!

🦣Хуки, частина друга🦣 ❓ Чи була у вас колись ситуація, що для передачі даних від батьківського компоненту до дочірнього потрібно пройти крізь сім кіл інших компонентів? От якби їх можна було б отримати якось інакше, та ще й перемалювати компонент коли дані змінилися! 🤩 Саме для цього в React існує контекст. А для того щоб отримати для нього доступ з функціональних компонентів існує хук useContext. 👉Про це, а також про кастомні хуки в нашій новій лекції - "useContext та Кастомні Хуки" яка вже завантажена на YouTube. Бережіть себе, наступне відео про debug загалом та React Developer Tools вже завтра!

👩‍🏫Практика з формами👩‍🏫 👉 Форми - одна з найпопулярніших функціональностей які існують на фронтенді. Ви будете зустрічатися з ними постійно від початку вашої кар'єри і аж до поки не перейдете на бекенд. Навіть вступне завдання на курс було пов'язано з формами. 👨‍💻 Саме тому ми підготували для вас наступне відео, де зробимо вступне завдання, але на React. Ми подивимось як створити форму, отримати з неї дані, та навіть показати діалог. Такий собі простенький мікро застосунок за 30 хвилин. Бережіть себе, а ми вже готуємо наступне відео - як створити на React дуже відому гру Wordle, яку New York Times придбав для себе в 22 році.

😺Коти та життєвий цикл React компонентів 😺 ❓Життєвий цикл компонентів в React застосунку це дуже абстрактна тема, яку не так просто пояснити. Але коли вам потрібно завантажити на сторінку кота і зробити так, щоб він не втік під час наступного рендеру - ви одразу розумієте наскільки ця тема потрібна. 😅 Жарти жартами, але життєвий цикл компонентів, який складається з трьох основних подій (поява, оновлення та видалення) є одним з китів на яких стоїть React 👉 Про все це, на живому котячому прикладі і йде мова у нашому наступному відео - "Коти та життєвий цикл React компонентів". Відео вже завантажене, приємного перегляду. А ви бережіть себе і скоро побачимося.

😎Продовжуємо тему керування станом. 😎 🧐 Досить довго, єдиною можливістю керувати станом в React було або використання класових компонентів, або спеціальних бібліотек на кшталт Redux або MobX. ☺️ Але з приходом React v.16.8 та появою хуків, тобто функцій які дозволяють «підключатися» до стану та життєвого циклу функціональних компонентів усе змінилося. ✍️ Саме про це ми і поговорили на нашій лекції "Стан у функціональних компонентах". Лекція вже доступна для перегляду і чекає на слухачів. ❤️ А наступна лекція про життєвий цикл компонентів буде вже завтра. Бережіть себе та до скорої зустрічі.

😎CSS мені в печінку!😎 👉А через 5 хвилин у нас новий п'ятничний ефір. В цей раз ми будемо говорити про CSS і будемо відповідати на ваші питання! 😅Сценарію немає, тому якщо нас занесе про Маска, чи про БТРи - шо поробиш) Чекаємо на всіх!

😎React та керування станом😎 Чи можна на React зверстати лендінг? Звичайно можна, але найкраще React себе показує у веб застосунках де потрібно не лише показати контент, а й дати користувачеві з ним тісно взаємодіяти. Така взаємодія відбувається за рахунок того, що React вміє зберігати отримані від користувача дані та автоматично відображати усі зміни на екрані. 👉 Саме про це і йде мова у нашому новому, навчальному відео, яке вже очікує на вас на нашому каналі - React, State та Class ✍️Під час цієї сесії лайвкодингу ми, на прикладі класових компонентів, почали (тільки почали) розбиратися з тим як правильно зберігати стейт в React щоб те, що ми бачимо на екрані автоматично оновлювалося. ❓А як же функціональні компоненти? А от про них ми поговоримо вже в понеділок, під час наступної лекції Бережіть себе, навчайтеся та допомагайте ЗСУ.

🐝React та Props🐝 💡React чудовий тим, що дуже легко дозволяє створювати універсальні компоненти які ви можете використовувати по всьому застосунку. А досягається це за рахунок того, що в кожний компонент ви можете передати набір параметрів, які в термінології React-у називаються пропсами. 👉 Саме про це і йде мова у нашому новому, навчальному відео, яке вже очікує на вас на нашому каналі. ✍️Це чергова сесія лайвкодінгу, де ми на прикладах розібрали як можна передавати дані, функції та навіть інші компоненти в React застосунку. Бонусом ми також підняли теми обробки подій як в React так і в DOM. ❗️Лекція зачіпає основи основ так що дуже раджу подивитися за можливості. Бережіть себе, а наступну лекцію викладемо вже завтра!

🧐CSS мені в печінку! 🧐 ✍️ Перша моя співбесіда в Ітері (де я зараз працюю) не відбулася саме через те, що я дуже не любив верстати. А на проекті, куди я мав іти, верстки було вагон і маленька тачечка. Тому співбесіда відбулася аж через пів року і вже на зовсім інший проект. 🔥 І лише значно потім я зрозумів, як з цим жити і навіть почав отримувати якесь задоволення від цього (нікому не кажіть) 👉Якщо ця ситуація для вас знайома або просто цікава - запрошую на чергові п'ятничні посиденьки "CSS мені в печінку"! які відбудуться (якщо буде світло) в цю п'ятницю 04.11 о 19:00. А поки що - бережіть себе та продовжуйте навчатися. Все у нас буде добре, незважаючи ні на кого!

👨‍💻Друга лекція про історію веб розробки вже чекає👨‍💻 👉Друга лекція де Олександр розповідає як ми докотилися до сучасного фронтенду, що таке WASM та CSS Houdini вже опублікована! ❤️А ще пан Володимир став спонсором нашого каналу на opencollective і я щиро вдячний йому за це. Що важливо - до кінця війни, всі отримані гроші будуть передані на допомогу армії. Тож ви допомагаєте не лише нам а й нашим збройним силам! 👨‍💻Наступні відео про компоненти в React-і будуть у четвер. Бережіть себе, скоро побачимося.

👨‍💻Перша лекція вже доступна👨‍💻 👉 Перша лекція з нового курсу React для початківців вже готова для вашого перегляду. Ми створили нову апку, пройшлись по структурі проекту і навіть подивились як виглядає React застосунок після build-а ❗️Формат лекції LiveCoding ❓А лекцію про історію веб розробки викладемо вже завтра Бережіть себе і скоро побачимось!

Розклад першого тижня (31.10 - 06.11) Понеділок 👩‍🏫 Історія вебу - говоримо про те як фронтенд докотився до такого життя 👩‍🏫 Мій перший React застосунок - Live Coding, створюємо React апку з нуля, знайомимося з проектом та базовими конструкціями Четвер 🧑‍💻 Що це за React такий? - Трохи теорії про те, що таке React взагалі, навіщо він потрібен, з чого складається. 🧑‍💻 Компонентний підхід - LiveCoding, розбираємося з основною складовою React-у, компонентами. 📽Записи лекцій будуть викладені на YouTube після їх обробки (коли виріжемо всі бе та ме), розраховуйте на перше відео десь у вечорі. Бережіть себе, скоро побачимося!

😉Відпочили?😉 👉 Завтра у нас буде опублікована програма на наступний тиждень (аж чотири лекції), а поки що можете подивитися нове десяти хвилинне відео про знайомство та базове налаштовування EsLint ❤️А ще наш YouTube канал тепер можна знайти ще простіше - https://youtube.com/@reactdev. Круто, правда?) Бережіть себе і завтра побачимося!

😎Поки ми готуємося до курсу 2.0 😎 👨‍💻 На цьому тижні ми активно готуємося до початку нового курсу, тож активність на каналі буде трохи знижена, а ви нарешті зможете від нас відпочити 😊 🔨 А для тих хто відпочивати не хоче - ось цікава лекція (англійською) TypeScript Crash Course для початківців від дуже і дуже крутого спікера. Як буде час та натхнення - обов'язково подивіться. 🕺 А якщо ви все таки втомилися - ось наш легесенький вечірній п'ятничний ефір з Іллєю Клімовим. Поговорили і про програмування і про життя і про все-все-все. Як на мене - вийшло зовсім не погано. Бережіть себе і скоро побачимося!

П'ятничні посиденьки - "Нахіба тобі програмування" 🤩 Запрошую всіх на черговий п'ятничний та супер легенький ефір про програмування. Цього разу будемо говорити про сенс цієї професії взагалі та конкретно для кожного. 😎Гостем виступить Ілля Климов, лідер проекту JavaScript Ninja та просто чудовий спікер, якого ми і будемо розпитувати про все-все-все. 👂Ставимо на фон, слухаємо та відпочиваємо від останніх подій. Якщо у вас є питання - пишіть у коментарях тут або до під час ефіру! Бережіть себе та скоро зустрінемося!

🎉Оновлення щодо курсу React 2.0🎉 Як дехто знає, ми планували перезапускати курс React для початківців і ось це сталося 🔥 👉Курс має* відкритися 31.10 і, як попередній, буде проходити онлайн. Всі нові лекції, як завжди, будуть викладені на наш Ютуб (підписуйтесь, щоб не пропустити), новини, оновлення, ДЗ будуть викладатися також тут. 👉По поданим на відбір завданням, ми вже почали відписуватися. Якщо до понеділка ви не отримаєте листа - напишіть під цим постом. *Самі розумієте, що на сьогодні наш горизонт планування дуже маленький і статися може все що завгодно. Бережіть себе, знаходьте роботу, допомагайте ЗСУ

💪Accessibility for Web and SPA💪 👉 Запис лекції про доступність вже готовий для вашого перегляду за цим посиланням. ❓А для тих, хто приєднався до нас лише нещодавно може бути цікавий ось цей список матеріалів, які також доступні для вашого перегляду. 👩‍🍳 TypeScript для початківців 👩‍🎓 Що таке React і навіщо він потрібен 🧑‍💻 Починаємо новий проект з нуля 👩‍🔬 React та його будівельні блоки - компоненти 💂‍♀️ React та хуки 👩‍🔧 Пишемо свою гру на React 🧑‍🎨 Робимо React гарним - стилізація 🕵️‍♂️ Інструменти керування даними - Context, MobX 🤶 Recoil - альтернативний інструмент керування станом 👨‍🏭 React та форми - працюємо з користувачем 👮Навігація в React - додаємо нові сторінки 🧛‍♂️ Викликаємо бекенд - fetch або axios 🧞‍♀️ Автоматичні тести для React 🧑‍🎤 UI бібліотеки для React Бережіть себе та чекаю всіх у цю п'ятницю, о 19:00 на балачках "Нахіба тобі програмування?!"