Free React For Beginners
3.46K subscribers
231 photos
5 videos
1 file
385 links
💻 Про #React та #frontend та #веб розробку
🧑‍🎓 Для початківців і не тільки

👉 https://www.youtube.com/@reactdev
Download Telegram
🎉Оновлення щодо курсу React 2.0🎉

Як дехто знає, ми планували перезапускати курс React для початківців і ось це сталося 🔥

👉Курс має* відкритися 31.10 і, як попередній, буде проходити онлайн. Всі нові лекції, як завжди, будуть викладені на наш Ютуб (підписуйтесь, щоб не пропустити), новини, оновлення, ДЗ будуть викладатися також тут.

👉По поданим на відбір завданням, ми вже почали відписуватися. Якщо до понеділка ви не отримаєте листа - напишіть під цим постом.

*Самі розумієте, що на сьогодні наш горизонт планування дуже маленький і статися може все що завгодно.

Бережіть себе, знаходьте роботу, допомагайте ЗСУ
40👍17🔥10
П'ятничні посиденьки - "Нахіба тобі програмування"

🤩 Запрошую всіх на черговий п'ятничний та супер легенький ефір про програмування. Цього разу будемо говорити про сенс цієї професії взагалі та конкретно для кожного.

😎Гостем виступить Ілля Климов, лідер проекту JavaScript Ninja та просто чудовий спікер, якого ми і будемо розпитувати про все-все-все.

👂Ставимо на фон, слухаємо та відпочиваємо від останніх подій. Якщо у вас є питання - пишіть у коментарях тут або до під час ефіру!

Бережіть себе та скоро зустрінемося!
👍14🔥6
😎Поки ми готуємося до курсу 2.0 😎

👨‍💻 На цьому тижні ми активно готуємося до початку нового курсу, тож активність на каналі буде трохи знижена, а ви нарешті зможете від нас відпочити 😊

🔨 А для тих хто відпочивати не хоче - ось цікава лекція (англійською) TypeScript Crash Course для початківців від дуже і дуже крутого спікера. Як буде час та натхнення - обов'язково подивіться.

🕺 А якщо ви все таки втомилися - ось наш легесенький вечірній п'ятничний ефір з Іллєю Климовим. Поговорили і про програмування і про життя і про все-все-все. Як на мене - вийшло зовсім не погано.

Бережіть себе і скоро побачимося!
23🔥7👍4🥰1
😉Відпочили?😉

👉 Завтра у нас буде опублікована програма на наступний тиждень (аж чотири лекції), а поки що можете подивитися нове десяти хвилинне відео про знайомство та базове налаштовування EsLint

❤️А ще наш YouTube канал тепер можна знайти ще простіше - https://youtube.com/@reactdev. Круто, правда?)

Бережіть себе і завтра побачимося!
👍31
Розклад першого тижня (31.10 - 06.11)

Понеділок

👩‍🏫 Історія вебу - говоримо про те як фронтенд докотився до такого життя
👩‍🏫 Мій перший React застосунок - Live Coding, створюємо React апку з нуля, знайомимося з проектом та базовими конструкціями

Четвер
🧑‍💻 Що це за React такий? - Трохи теорії про те, що таке React взагалі, навіщо він потрібен, з чого складається.
🧑‍💻 Компонентний підхід - LiveCoding, розбираємося з основною складовою React-у, компонентами.

📽Записи лекцій будуть викладені на YouTube після їх обробки (коли виріжемо всі бе та ме), розраховуйте на перше відео десь у вечорі.

Бережіть себе, скоро побачимося!
👍7911🔥9
👨‍💻Перша лекція вже доступна👨‍💻

👉 Перша лекція з нового курсу React для початківців вже готова для вашого перегляду. Ми створили нову апку, пройшлись по структурі проекту і навіть подивились як виглядає React застосунок після build-а

❗️Формат лекції LiveCoding

А лекцію про історію веб розробки викладемо вже завтра

Бережіть себе і скоро побачимось!
41👍23
👨‍💻Друга лекція про історію веб розробки вже чекає👨‍💻

👉Друга лекція де Олександр розповідає як ми докотилися до сучасного фронтенду, що таке WASM та CSS Houdini вже опублікована!

❤️А ще пан Володимир став спонсором нашого каналу на opencollective і я щиро вдячний йому за це. Що важливо - до кінця війни, всі отримані гроші будуть передані на допомогу армії. Тож ви допомагаєте не лише нам а й нашим збройним силам!

👨‍💻Наступні відео про компоненти в React-і будуть у четвер.

Бережіть себе, скоро побачимося.
20👍4
😁31👍2
🧐CSS мені в печінку! 🧐

✍️ Перша моя співбесіда в Ітері (де я зараз працюю) не відбулася саме через те, що я дуже не любив верстати. А на проекті, куди я мав іти, верстки було вагон і маленька тачечка. Тому співбесіда відбулася аж через пів року і вже на зовсім інший проект.

🔥 І лише значно потім я зрозумів, як з цим жити і навіть почав отримувати якесь задоволення від цього (нікому не кажіть)

👉Якщо ця ситуація для вас знайома або просто цікава - запрошую на чергові п'ятничні посиденьки "CSS мені в печінку"! які відбудуться (якщо буде світло) в цю п'ятницю 04.11 о 19:00.

А поки що - бережіть себе та продовжуйте навчатися. Все у нас буде добре, незважаючи ні на кого!
👍446👏1
🐝React та Props🐝

💡React чудовий тим, що дуже легко дозволяє створювати універсальні компоненти які ви можете використовувати по всьому застосунку. А досягається це за рахунок того, що в кожний компонент ви можете передати набір параметрів, які в термінології React-у називаються пропсами.

👉 Саме про це і йде мова у нашому новому, навчальному відео, яке вже очікує на вас на нашому каналі.

✍️Це чергова сесія лайвкодінгу, де ми на прикладах розібрали як можна передавати дані, функції та навіть інші компоненти в React застосунку. Бонусом ми також підняли теми обробки подій як в React так і в DOM.

❗️Лекція зачіпає основи основ так що дуже раджу подивитися за можливості.

Бережіть себе, а наступну лекцію викладемо вже завтра!
🔥3010👍5
😎React та керування станом😎

Чи можна на React зверстати лендінг? Звичайно можна, але найкраще React себе показує у веб застосунках де потрібно не лише показати контент, а й дати користувачеві з ним тісно взаємодіяти. Така взаємодія відбувається за рахунок того, що React вміє зберігати отримані від користувача дані та автоматично відображати усі зміни на екрані.

👉 Саме про це і йде мова у нашому новому, навчальному відео, яке вже очікує на вас на нашому каналі - React, State та Class

✍️Під час цієї сесії лайвкодингу ми, на прикладі класових компонентів, почали (тільки почали) розбиратися з тим як правильно зберігати стейт в React щоб те, що ми бачимо на екрані автоматично оновлювалося.

А як же функціональні компоненти? А от про них ми поговоримо вже в понеділок, під час наступної лекції

Бережіть себе, навчайтеся та допомагайте ЗСУ.
24🔥6👍1😁1
😎CSS мені в печінку!😎

👉А через 5 хвилин у нас новий п'ятничний ефір. В цей раз ми будемо говорити про CSS і будемо відповідати на ваші питання!

😅Сценарію немає, тому якщо нас занесе про Маска, чи про БТРи - шо поробиш)

Чекаємо на всіх!
🔥23
😎Продовжуємо тему керування станом. 😎

🧐 Досить довго, єдиною можливістю керувати станом в React було або використання класових компонентів, або спеціальних бібліотек на кшталт Redux або MobX.

☺️ Але з приходом React v.16.8 та появою хуків, тобто функцій які дозволяють «підключатися» до стану та життєвого циклу функціональних компонентів усе змінилося.

✍️ Саме про це ми і поговорили на нашій лекції "Стан у функціональних компонентах". Лекція вже доступна для перегляду і чекає на слухачів.

❤️ А наступна лекція про життєвий цикл компонентів буде вже завтра.

Бережіть себе та до скорої зустрічі.
13🔥7👍3
😺Коти та життєвий цикл React компонентів 😺

Життєвий цикл компонентів в React застосунку це дуже абстрактна тема, яку не так просто пояснити. Але коли вам потрібно завантажити на сторінку кота і зробити так, щоб він не втік під час наступного рендеру - ви одразу розумієте наскільки ця тема потрібна.

😅 Жарти жартами, але життєвий цикл компонентів, який складається з трьох основних подій (поява, оновлення та видалення) є одним з китів на яких стоїть React

👉 Про все це, на живому котячому прикладі і йде мова у нашому наступному відео - "Коти та життєвий цикл React компонентів".

Відео вже завантажене, приємного перегляду. А ви бережіть себе і скоро побачимося.
👍27
👩‍🏫Практика з формами👩‍🏫

👉 Форми - одна з найпопулярніших функціональностей які існують на фронтенді. Ви будете зустрічатися з ними постійно від початку вашої кар'єри і аж до поки не перейдете на бекенд. Навіть вступне завдання на курс було пов'язано з формами.

👨‍💻 Саме тому ми підготували для вас наступне відео, де зробимо вступне завдання, але на React. Ми подивимось як створити форму, отримати з неї дані, та навіть показати діалог. Такий собі простенький мікро застосунок за 30 хвилин.

Бережіть себе, а ми вже готуємо наступне відео - як створити на React дуже відому гру Wordle, яку New York Times придбав для себе в 22 році.
👍26🤩2
🦣Хуки, частина ТРЕТЯ🦣

Чи була у вас колись ситуація, що для передачі даних від батьківського компоненту до дочірнього потрібно пройти крізь сім кіл інших компонентів? От якби їх можна було б отримати якось інакше, та ще й перемалювати компонент коли дані змінилися!

🤩 Саме для цього в React існує контекст. А для того щоб отримати для нього доступ з функціональних компонентів існує хук useContext.

👉Про це, а також про кастомні хуки в нашій новій лекції - "useContext та Кастомні Хуки" яка вже завантажена на YouTube, а завдання для самоконтролю - в коментарях під цим постом.

Бережіть себе, наступне відео про debug загалом та React Developer Tools вже завтра!
👍16🔥71
🪲Debug та React 🪲

🥶 Дебаггінг це не просте, але вкрай важливе уміння яке буде з вами весь час вашої кар'єри. Неважливо на чому ви пишете чи то на JS чи то на Elm, чи навіть на якомусь brainfuck. Без дебагінгу просто нікуди.

👉 Саме тому, наступну лекцію з нашого курсу ми присвятили дебагу де розглянули як загальні інструменти (Chrome Dev Tools) так і React Developer Tools. Нова лекція вже завантажена YouTube та чекає на вас.

😺 До речі, а ви звернули увагу, що дебагінг українською звучить як "де баг?" що цілком відповідає змісту цього слова? Можливо дебаг придумали українці?

Бережіть себе і скоро побачимося!
22👏3🔥2
І знову - бережіть себе, будьте у безпеці.

Все мине, і русня також мине. А ми будемо сидіти на берегу Дніпра і дивитися як тече вода і несе течія.
54👍9🔥3
😎TypeScript - основи😎

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

👉 Ми розповіли про типи, явні та не явні, подивились на помилки та навіть заглянули під капот TypeScript, який, як виявляється, написаний на тому самому TypeScript

Лекція вже доступна для перегляду, а ви бережіть себе і близьких. Все буде добре.
👍34🔥6🤯5🎉1
❗️Всім привіт❗️

🥶 У мене, як і в багатьох з вас, немає світла, тому нові відео можуть виходити з затримками.

👉 Наступне відео у нас про CSS, його розвиток та про React, яке вийде коли я зможу його завантажити на YouTube. А от після цього у нас буде майже двотижнева пауза, тому що ми підемо з курсом на практику, а потім на коротенький відпочинок. А повернемося вже з лекціями про React Router, Redux, Axios та іншими важливими інструментами.

❤️ А поки що хочу сказати - ми тут саме заради вас. Ми не заробляємо на цьому каналі, тут немає ні реклами, ні спонсорів окрім моєї компанії. Єдине що нас мотивує - це ви, розуміння того що це вам потрібно і корисно. І коли ви не дивитеся наші відео, не коментуєте - ми не розуміємо що йде не так. Чи поганий матеріал, чи подача, чи це просто нікому не потрібно. І це демотивує.

🙏 Тому, будь-ласка, дивіться відео та давайте зворотній зв'язок. Якщо вам сподобалося відео - поставте лайк, напишіть комент - це мотивує нас робити нові відео і збільшує вірогідність що відео побачать інші люди. Якщо вам не сподобалося - теж напишіть, щоб ми розуміли що йде не так. Це дійсно важливо і не складно.

І, звичайно, бережіть себе та продовжуйте навчання. Кожна зима закінчиться і ця не буде виключенням. Побачимося!
🔥5515👍10