TGViewer
Channel Public Channel
Free React For Beginners

Free React For Beginners

@reactbeginners

💻 Про #React та #frontend та #веб розробку
🧑‍🎓 Для початківців і не тільки

👉 https://www.youtube.com/@reactdev
Open in Telegram
Subscribers
3.04K
Photos
231
Videos
5
Links
387

Showing posts older than #607 · Back to latest

Older Posts 19 shown
Post #606 2.23K

Forwarded from Той самий Бабіч (Сергій Бабіч)

Дякую усім, хто в мене вірить і усім хто не вірить. Роблю це для вас завдяки і всупереч усім та усьому )

І також мої найщиріші вітання Сергію Немчинському, Віктору Турському та Наталі Попелишко!

Пропоную відсвяткувати цю нагороду донатом на наш збір на дрон ;)
  • ❤‍🔥 55
  • 🔥 22
  • 👍 6
  • 👏 1
  • 🕊 1
Post #605 2.19K
Не можу не привітати з перемогою, цілком заслуженою!
  • ❤‍🔥 13
  • ❤ 2
  • 👍 2
Post #604 7.12K
Всім привіт, завтра, в середу, о 19:00 та 19:10 виходять одразу два відео про Next.JS:

3.1 Next.JS та стилізація, в якому ми коротенько розберемо як ми можемо стилізувати наш Next.JS застосунок та які проблеми існують з CSSinJS
3.2 Практика зі стилізацією де ми спробуємо щось намалювати на сторінці.

Загалом список виглядає ось так:

0.0 - Вступ до курсу Next.JS
1.1 - Що таке Next.JS
1.2 - [Практика] Мій перший застосунок
2.1 - NextJs, компоненти та їх види
2.2 - Справжні клієнтські компоненти в Next.JS
2.3 - [Практика] NextJs, компоненти та їх види
3.1 - Next.JS та стилізація
3.2 - [Практика] Next.JS та стилізація

Наступне відео - 4-1 Next.JS та Клієнтський роутинг буде на наступному тижні.

Бережіть себе та допомагайте ЗСУ, @reactbeginners
  • 🔥 48
  • ❤ 8
  • 👍 8
Post #603 1.81K

Forwarded from Don't Panic Junior IT Jobs

Що ж, друзі, незабаром ми розпочинаємо наступний стрім нашого проєкту "Резюме гриль"🔥

Для тих, хто ще не в темі - це наш спеціальний проєкт, що має допомогти новачкам зробити круте резюме та отримати роботу мрії. Протягом кількох тижнів наші підписники подавали заявки на розгляд резюме. Ми їх відібрали разом з професійними рекрутерами команди talentС — рекрутингової агенції повного циклу, яка співпрацює з понад 20 роботодавцями, і тепер розберемо резюме у прямому ефірі та дамо крутий фідбек.

Для більшої об’єктивності ми виставлятимемо бали. Ті резюме, що наберуть максимум балів, потраплять прямо в руки до Сергія Бабіча, а кандидати отримають нагоду пройти онлайн співбесіду в прямому ефірі.

👉Попередні випуски проєкту.

Цього разу інтерв'ю проводитимуть:
Уляна Спітковська, Talent Acquisition Specialist та Олена Дацюк, Talent Acquisition Specialist в talentC. Ведучий — Женя Гайдученко.

У цьому випуску розберемо резюме спеціалістів рівня Middle.

📆Коли: сьогодні
⏰19.00
📍Де: Ютуб канал Juniverse

До зустрічі в етері!🙌

#стрім #подкаст
YouTube Резюме гриль: розбір резюме спеціалістів рівня Middle #3 3-й випуск проєкту “Резюме гриль”. Це наш спеціальний проєкт, що має допомогти новачкам зробити круте резюме та отримати роботу мрії. У цьому випуску розберемо резюме спеціалістів рівня Middle. Цього разу інтерв'ю проводитимуть: Уляна Спітковська,…
  • ❤‍🔥 7
  • ❤ 1
  • 👍 1
  • 🎉 1
Post #602 2.49K
Мої розширення до VSCode

1. Prettier Дуже звик до автоформату, стоїть на всіх енвайрментах. Якщо будуть конфлікти з EsLint - спробуйте Prettier EsLint

2. Сode Spell Checker з українським словником. Одруківки у мене часто, бісять вони мене і моїх колег, а ця штука проблему вирішує. Незабудьте додати українську: "cSpell.language": "en,uk",

3. EsLint - чудовий і дуже гнучкий інструмент для встановлення єдиних правил кодування на проекті. До прикладу, у нас заборонений прямий експорт з MUI, лише через наші врапери для нього. Без EsLint це було б досить складно зробити.

4. ImportCost - дуже допомагає якщо ви хочете контролювати розмір коду, що імпортуєте зі сторонніх бібліотек

Це майже всі мої розширення для повсякденного життя. Усілякі колорайзери я не використовую, просто вибрав максимально знайому тему з часів Visual Studio. Також маю декілька розширень для Azure та кілька спеціалізованих, коли треба щось конкретне (наприклад Tailwind або WSL), але загалом цього скромного набору мені вистачає + я хочу щоб VsCode залишалася швидкою та легенькою (я навіть вимикаю деякі періодично)

Якщо ж вам хочеться пошукати ще щось цікавеньке - ось непогана підбірка

А що ви використовуєте?)
@reactbeginners
  • ❤ 28
  • 👍 16
  • 🔥 1
Post #600 2.42K
Хочу подякувати усім військовим, волонтерам та тим не байдужим хто підтримує наші ЗСУ. Ви зробили цей день можливим.

І окремо подякувати вам, дорога спільното. За вашу підтримку, за ваші пожертви, за відсутність суперечок та срачів на тему "чому я". Дякую вам.

І хвилину мовчання у пам'ять тим, хто більше не з нами. Можливо вам не буде легше, але ця війна, війна в якій другій армії світі видали найбільшого ляща в новітній історії, уже ввійшла в історію.

.
  • ❤ 83
  • 👍 12
Post #598 2.56K
Складно вийти з Vim? А ви спробуйте вийти з акаунту на Ali.

🤩Оцініть верстку від Ali на моєму 14 дюймовому екрані. Як бачите, кнопка sign out просто невидима у випадаючому меню cправа. А для того щоб вийти з акаунту - мені потрібно відкрити розмітку та видалити з неї один або два інших пункти меню. Тоді конпка signout з'являється 😅

😊Що цікаво, деякий час тому у них така сама історія була з кнопкою login - без маніпуляцій з розміткою залогінитись було не можливо, але це вони помітили і вліпили костиль у вигляді блоку login прямо на сторінку. А от менюха залишилася без змін, бо login приносить гроші, а logout ні)

💪Так що тестуйте ваші застосунки на різних екранах, або хоча б за допомогою Responsive інструменту з Google Developer Tools. А якщо ви з багатої сім'ї можна використати наприклад BrowserStack який дасть можливість протестувати ще й різні браузери та девайси.

UPD: Windows, scale, 150%, by Default 😀 Thanks mr. BG
@reactbeginners
  • 😁 19
  • 👍 15
  • ✍ 1
  • 🔥 1
Post #597 2.19K
Free React For Beginners Друзі, запускаю в пілотному режимі (два тижні) календлі Якщо вам потрібна порада з #React, або #FrontEnd, або розробкою в цілому - букайте таймслот (понеділок, четвер з 9 по 10 годину) Також приймаю побажання щодо часу, але не обіцяю що виконаю)). Ну і оскільки…
🥰Всі слоти на пілот закрили. Але ж і питання ви ставите, мушу вам сказати. Доведеться на вихідних трохи готуватися 😅
  • 👍 16
  • ❤‍🔥 2
Post #596 2.53K
Друзі, запускаю в пілотному режимі (два тижні) календлі

Якщо вам потрібна порада з #React, або #FrontEnd, або розробкою в цілому - букайте таймслот (понеділок, четвер з 9 по 10 годину)

Також приймаю побажання щодо часу, але не обіцяю що виконаю)). Ну і оскільки це пілот - то буду дуже вдячний за відгуки.

Як проведемо, буду бачити що далі.
  • ❤‍🔥 20
  • 👍 13
  • ❤ 3
Post #595 2.24K
Free React For Beginners Робили давненько і щось захотілося мені повторити, в світлі останніх подій. Тому запрошую усіх бажаючих, в цей четвер, 22.02, на 19:00 поговорити про вогнепальну зброю для початківців. Вхід - будь-який донат від 20 грн на збір мого колеги Ігоря Б на машину…
З реєстрацій я бачу що зброя зараз не на часі)

Я теж більше люблю сноуборд або віндсерф та з задоволенням би займався цим (хоча коли ти на 300 метрів зносиш алюмінієву баночку це теж цікаво). Але маємо що маємо, сучасна Україна зараз тяжіє до 5.45 замість Burton.

Тому раджу все ж таки прийти, місць ще вистачає. Повірте буде і цікаво і практично.

Реєстрація
Банка
  • ❤ 8
  • 👍 1
Post #594 2.25K
Тут пан Едуард, під відео про Next задав гарне запитання:

Чому next одразу не зробив нормальні компонети, які б рендерилися тільки на клієнті? Навіщо ці танці з бубнами? )) не зрозуміло.

Я саме про це деякий час думав і прийшов до дуже простого висновку, щодо якого хотів би почути і вашу думку.

Моя ідея полягає в тому, що сучасний Next.JS не націлений на інтерактивність як таку. Дивіться самі - з новим оновленням Next.JS всі компоненти, за замовчуванням, перетворюються на серверні. А серверні компоненти взагалі не можуть мати жодної доданої поведінки. Тобто самі розробники нам буквально кажуть - за замовчуванням, всі твої компоненти мають бути статичними!

І, я не вірю що це випадковість або якийсь недолік в проектуванні - скоріше за все цей підхід багато разів обговорювався і здався розробникам цілком прийнятним.

Якщо ж цей підхід прийняти, то все стає набагато простіше:

Не потрібно мучитися зі стейтам, з CSSinJS (інтерактивність же не потрібна), все працює з коробки. А залишки інтерактивності (якісь форми, менюшки, каруселі) можна робити або нативними компонентами, які працюють (use server як раз на це натякає), або окремими мікроелементами які можна просто поставити з NPM, бо екосистема дозволяє.

Що думаєте з цього приводу?
YouTube 2-2. NextJS та справжні клієнтські компоненти Чи існують в Next.JS справжні клієнтьскі компоненти - тобто такі, які рендеряться виключно на клієнті і ніколи не рендеряться на сервері? Про це ви дізнаєтесь з цього маленького відео про Клієнтські компоненти та Next.JS 💻 Програма та матеріали - https:…
  • 🔥 7
  • ✍ 6
  • ❤ 2
  • 👍 1
Post #593 2.95K
Робили давненько і щось захотілося мені повторити, в світлі останніх подій.

Тому запрошую усіх бажаючих, в цей четвер, 22.02, на 19:00 поговорити про вогнепальну зброю для початківців.
Вхід - будь-який донат від 20 грн на збір мого колеги Ігоря Б на машину для ЗСУ.

Поговоримо про:

1. Види зброї в цілому
2. Першу зброю для початківця
3. Отримання дозволу на вогнепальну зброю

Запису не буде, місця обмежені - максимум 15 людей. Запрошення в зум кину в ТГ завтра після обіду.

Якщо у когось є питання накшталт "Чому це фронтендщик щось планує задвигати за зброю" - зможете задати це питання завтра.

💰Банка
✍️Реєстрація

Побачимося завтра
  • 👍 16
  • ❤‍🔥 3
  • 🔥 2
Post #592 2.11K
😍 Отак от - TypeScript мова року за темпами зростання популярності

За рік TypeScript набрав 1.8%, досяг 15.1% відсотка користувачів і підійшов у притул до лідера. А лідер вгадайте хто? Правильно JavaScript яким користується, наразі, 15.4% розробників.

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

А от якої п'яної миші 1С зріс на 0.1% я зрозуміти не можу 😢

До чого це я? Вчіть TypeScript, він корисний! ❤️‍🔥

Детальну аналітику можна подивитися на DOU

@reactbeginners
  • 👍 30
  • ❤ 5
  • ❤‍🔥 1
Post #591 2.13K
Free React For Beginners Почнемо з короткого демо того, скільки разів буде перерендерений наш текстовий компонент😉 А от чому вийшла саме така кількість - питання набагато цікавіше)
То ж чому один раз? На справді, все досить просто

Перше що потрібно зрозуміти це те, що React.children це звичайний пропс, який приймає все що завгодно. Ви можете покласти туди і текст, і масив і ReactNode, як ми робимо в цьому прикладі. ReactNode - в свою чергу, це не наш компонент, це результат обчислення нашого компоненту у формі об'єкту. Ви можете зробити console.log(children) і подивитися що в цього об'єкту в середині.

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

Саме тому ми і бачимо ClickMeText rendered один єдиний раз. Спочатку рендериться <App/>, потім рендериться <ClickMeText/>, потім рендериться <Counter/> в який через пропс потрапляє результат обчислення <ClickMeText/>. Коли ми натискаємо на кнопку, змінюється стейт <Counter/> і він, Counter, обчислюється заново. Але в пропси передаються ті самі значення що й минулого разу.

Ось і уся магія, сподіваюся пояснення вийшло відносно простим.

Доречі, англійською, є дуже гарна стаття на цю тему для тих кому цікаво подивитися трохи глибше. Дякую пану Євгену за посилання.

@reactbeginners
  • 👍 45
Post #590 1.98K
Free React For Beginners А ну давайте маленький тестик Як ви знаєте, в #React функціональні компоненти рендеряться заново, в тому числі, коли рендериться їх батьківський компонент (якщо не використовувати React.memo) Тепер власне тест: Маємо звичайний, майже класичний React counter:…
Почнемо з короткого демо того, скільки разів буде перерендерений наш текстовий компонент😉

А от чому вийшла саме така кількість - питання набагато цікавіше)
  • 🔥 14
  • 👍 2
Post #589 2.1K
А ну давайте маленький тестик

Як ви знаєте, в #React функціональні компоненти рендеряться заново, в тому числі, коли рендериться їх батьківський компонент (якщо не використовувати React.memo)

Тепер власне тест:

Маємо звичайний, майже класичний React counter: 

function Counter({ children }) {
  const [c, setCounter] = useState(0);
  const increment = () => setCounter(c + 1);
  return (
    <button onClick={increment}>
      {children} {c}
    </button>
  );
}


Єдиний нюанс з ним - він приймає в пропс children, який відмальовує всередині. В середину ми передаємо отакий примітивний компонент:

function ClickMeText() {
  console.log('ClickMeText rendered');
  return <>Clicked: </>;
}


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

const App = () => <Counter>
  <ClickMeText />
</Counter>


Тепер питання: Я запустив сторінку та ТРИЧІ клікнув на каунтер. Скільки ClickMeText rendered я побачу в консолі, за умови що strict mode вимкнено?

1 раз - ставимо ❤️
3 рази - 👍
4 рази - 🔥

З вас смайлики, з мене пояснення)
  • 🔥 87
  • ❤ 50
  • 👍 13
  • 🤔 1
  • 🍾 1
Post #587 2.2K
Любі друзі, перестаньте мучитися і мучити інших (І я зараз не про ввійти в айті).

Коли ви (або хтось) затягнули лібу, яка прямо дуже потрібна, але капець як не зручна - врятуйте світ, себе та команду: напишіть на неї обгортку. Просто напишіть компонент, або клас, що сховає від вас складність та спростить взаємодію з лібою/компонентом до прийнятного рівня. Так, потрібно буде трохи більше часу, так, треба буде подумати і можливо поговорити з командою як зробити краще. Але воно того варто на всі 100% і окупиться вже наступного разу коли вам або комусь доведеться працювати з цим компонентом.

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

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

Пішов страждати далі, ваш @reactbeginners
  • 👍 39
  • ❤ 4
  • 🕊 3
  • 💯 2
Post #586 2.07K
Понеділок, 19.02, 19:00 - нове відео про Next.JS: Практика з компонентами

Сьогодні виходить чергове відео з серії Next.JS. Цей раз подивимося на серверні та універсальні компоненти на практиці, напишемо кілька простеньких, подивимось де вони рендеряться.

Повний список виглядає зараз так:

Відео № 0.0 - Вступ до курсу Next.JS
Відео № 1.1 - Що таке Next.JS
Відео № 1.2 - [Практика] Мій перший застосунок
Відео № 2.1 - NextJs, компоненти та їх види
Відео № 2.2 - Справжні клієнтські компоненти в Next.JS
Відео № 2.3 - [Практика] NextJs, компоненти та їх види
Відео № 3.1 - заплановане на цей тиждень

Всім тихого тижня, бережіть себе та допомагайте ЗСУ!

@reactbeginners
YouTube 2-3. [Практика] NextJs, компоненти та їх види У цьому відео ми створимо власні серверні та клієнтські (універсальні) компоненти в Next.JS, та наочно побачимо різницю між ними 💻 Програма та матеріали - https://github.com/Drag13/NextJS-express-course-app 🧑‍💻Код https://github.com/Drag13/NextJS-express…
  • ❤ 27
  • 🔥 9
  • 👍 5
  • ❤‍🔥 1
Post #585 2.64K
Apple вимикає нормальну підтримку PWA (progressive web app) застосунків, мотивуючи це неможливістю забезпечити безпеку користувачів у випадку використання не сафарі браузера)

От так от легким помахом ноги велитенська купа роботи інших людей іде в смітник.

Тепер pwa-шки будуть відображатися як звичайні вкладки.

Обожнюю підхід еппл - це точно буде інтернет експлорер 2.0

І це стосується нас усіх, один дуже непоганий варіант зробити кросплатофрмений застосунок на react скоріше за все прикриють(
Wikipedia Поступовий вебзастосунок тип вебзастосунку, котрий можна кешувати через мережу та працює як стандартний встановлений застосунок
  • 🤔 15
  • ✍ 4
  • 👍 4
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →