Free React For Beginners

🦣 CSS еволюція та React 🦣 🥸 Колись давно, коли веб сторінки були маленькими та дуже простими, все що нам було необхідно для дизайну це кілька рядків CSS. Але час плинув, веб збільшувався, веб-сторінки ставали дедалі більш складнішими і як гриби полізли проблеми від дублікації коду до конфлікту між селекторами. 🦄 Тому CSS почав еволюціонувати. Так з'явилися препроцесори, CSS Modules, та навіть CSSinJs, які намагалися вирішити проблему "складного" CSS. 👉 Ось саме про цю еволюцію та про те, як вона реалізована в React-і наша наступна лекція Еволюція CSS та React, яка вже готова для перегляду. Дивіться, коментуйте і бережіть себе, скоро побачимося!

😉Зробили більше практики!😉 👂На початку 2022 року, New York Times, за семизначну суму придбала одну гру. Це не був AAA проект з величезною командою дизайнерів та програмістів. Тут не було ніякого Unreal Engine або Unity. Одна людина, JavaScript та браузер. От і все що було потрібно для того щоб стати відомим та заробити приємну суму грошей. ✍️ Ця гра називається Wordle і саме її ми обрали для нашої сесії лайвкодінгу, щоб ви покроково змогли подивитися як написати її аналог на React самостійно! 👉 Відео вже доступне для перегляду, а код для вивчення ❓А домашнє завдання ми викладемо після відео про обробку помилок! Бережіть себе і скоро побачимось!

🎉Живий ефір від Сергія вже в цю суботу!🎉 👉 Ми тут трохи запрацювалися з нашим курсом, тому чергова серія "балачок" трохи відкладається, але це не біда, адже @... підготував цікаву оффлайн/онлайн подію про IT, яка відбудеться вже в цю суботу. 😎 А якщо ви Львові - то її навіть можна відвідати в живу і позадавати каверзні питання її учасникам! https://t.me/frontiarnia_news/73

❗️Всім привіт❗️ 🥶 У мене, як і в багатьох з вас, немає світла, тому нові відео можуть виходити з затримками. 👉 Наступне відео у нас про CSS, його розвиток та про React, яке вийде коли я зможу його завантажити на YouTube. А от після цього у нас буде майже двотижнева пауза, тому що ми підемо з курсом на практику, а потім на коротенький відпочинок. А повернемося вже з лекціями про React Router, Redux, Axios та іншими важливими інструментами. ❤️ А поки що хочу сказати - ми тут саме заради вас. Ми не заробляємо на цьому каналі, тут немає ні реклами ні спонсорів окрім моєї компанії. Єдине що нас мотивує - це ви, розуміння того що це вам потрібно і корисно. І коли ви не дивитеся наші відео, не коментуєте - ми не розуміємо що йде не так. Чи поганий матеріал, чи подача, чи це просто нікому не потрібно. І це демотивує. 🙏 Тому, будь-ласка, дивіться відео та давайте зворотній зв'язок. Якщо вам сподобалося відео - поставте лайк, напишіть комент - це мотивує нас робити нові відео і збільшує вірогідність що відео побачать інші люди. Якщо вам не сподобалося - теж напишіть, щоб ми розуміли що йде не так. Це дійсно важливо і не складно. І, звичайно, бережіть себе та продовжуйте навчання. Пам'ятайте, що кожна зима закінчиться і ця не буде виключенням. Побачимося!

😎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. Круто, правда?) Бережіть себе і завтра побачимося!