Free React For Beginners

❗️Світло є, продовжуємо навчання ❗️

❓ Яким би круто ми не писали код - від помилок ніхто не застрахований. Сервер може бути під навантаженням і не відповідати, сервер може оновити структури даних або у користувача просто "впаде" інтернет і наш запит закінчиться нічим.

👉 Якщо ви не хочете бачити білий екран - ці помилки треба уміти обробляти про що і буде наша наступна лекція - Обробка помилок в React.

💪 Лекція вийшла, складна і скоріше за все ми зробимо її спрощену версію. Але загальне уявлення ви отримаєте, тож запрошую до перегляду і нагадую що ваші відгуки вітаються!

І про особисте. Я не _арестович, і розповідати про те що все закінчиться через 2-3 тижні не буду. Найближчим часом нас чекають найскладніші випробування. Але всі випробування минають і все що нам потрібно - це берегти себе, своїх близьких та допомагати іншим. Разом ми вистоїмо та переможемо.

Тому - бережіть себе, ми обов'язково скоро побачимося!

❓Як поділити React застосунок на компоненти❓

✍️ Розподілення React застосунку на компоненти це дуже важлива навичка, яка допомагає писати "чистий" код, який легко читати та легко підтримувати.

😎 І хоча опанувати цю навичку досить не просто, ми все ж таки підготували для вас відео, де на прикладі вже готового React застосунку розібрали підхід до "розрізання" апки на компоненти.

👩‍🏫 Ми поговорили про презентаційні компоненти, компоненти з логікою, загальні компоненти та компоненти специфічні для конкретного модуля.

👉 Відео завантажене і я його дуже і дуже рекомендую для вашого перегляду, бо правильно поділений застосунок - це запорука його подальшого розвитку! Код до відео тут

Бережіть себе і до наступної зустрічі!

💪 Електрика електрикою, а навчання ніхто не відміняв.

✍️ Коли ми переможемо і все повернеться до норми, саме ми будемо рухати цифровий світ вперед.

👉 Тому зібралися і продовжуємо лупати сю скалу.

🦣 CSS еволюція та React 🦣

🥸 Колись давно, коли веб сторінки були маленькими та дуже простими, все що нам було необхідно для дизайну це кілька рядків CSS. Але час плинув, веб збільшувався, веб-сторінки ставали дедалі більш складнішими і як гриби полізли проблеми від дублікації коду до конфлікту між селекторами.

🦄 Тому CSS почав еволюціонувати. Так з'явилися препроцесори, CSS Modules, та навіть CSSinJs, які намагалися вирішити проблему "складного" CSS.

👉 Ось саме про цю еволюцію та про те, як вона реалізована в React-і наша наступна лекція Еволюція CSS та React, яка вже готова для перегляду.

Дивіться, коментуйте і бережіть себе, скоро побачимося!

😉Зробили більше практики!😉

👂На початку 2022 року, New York Times, за семизначну суму придбала одну гру. Це не був AAA проект з величезною командою дизайнерів та програмістів. Тут не було ніякого Unreal Engine або Unity. Одна людина, JavaScript та браузер. От і все що було потрібно для того щоб стати відомим та заробити приємну суму грошей.

✍️ Ця гра називається Wordle і саме її ми обрали для нашої сесії лайвкодінгу, щоб ви покроково змогли подивитися як написати її аналог на React самостійно!

👉 Відео вже доступне для перегляду, а код для вивчення

❓А домашнє завдання ми викладемо після відео про обробку помилок!

Бережіть себе і скоро побачимось!

🎉Живий ефір від Сергія вже в цю суботу!🎉

👉 Ми тут трохи запрацювалися з нашим курсом, тому чергова серія "балачок" трохи відкладається, але це не біда, адже @babich_ss підготував цікаву оффлайн/онлайн подію про 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-і будуть у четвер.

Бережіть себе, скоро побачимося.