Free React For Beginners

SSR vs SSG vs CSR і де тут Next.JS ❓Як з'ясувалося, є деяке нерозуміння що таке і чим відрізняються Client Side Rendering від Server Side Rendering та Static Site Generators. Відмінність проста, але принципова. 👉 CSR - контент який ви бачите створюється на клієнті (прямо у вашому браузері) 👉 SSR - контент створюється на сервері, прямо під час вашого запиту 👉 SSG - контент створюється лише під час білду і не змінюється до наступного білду. Відповідно: 1️⃣ CSR - довго, не дружить з SEO, актуальні дані 2️⃣ SSR - швидше, дружить з SEO, актуальні дані, складніше 3️⃣ SSG - дуже швидко, дружить з SEO, потрібен новий деплой щоб оновити дані. 👉А Next тут до того, що він може працювати в будь-якій модел, хоча за замовчуванням він працює саме в моделі Server Side Rendering і орієнтований на неї. 👾Цікавий факт, що ми починали з SSG, потім перейшли на SSR, потім на CSR і зараз знову повертаємось до SSR, але з можливостями CSR. Історія, як завжди, йде по спіралі. @reactbeginners

Матеріали курсу React для початківців від Віталія Рубана та Ітера Зібрав майже всі відео з обох курсів про React по категоріях. Сподіваюсь буде вам корисно. 1. Вступ 👉Що таке Реакт 👉Перший застосунок на React 2. Компоненти в ReactJs 👉Компонентний підхід в React 👉Що таке Props 👉Як поділити застосунок на компоненти 3. Хуки 👉Хуки - огляд 👉React, useContext та кастомні хуки 4. Навігація 👉SPA та React 👉React router DOM - 1 👉React router DOM - 2 👉React Router - код рев'ю 5. Інструменти керування станом 👉Інструменти керування станом 👉React Redux - 1 👉React Redux - 2 6. Форми 👉React та форми 👉React Hook Form 7. Стилізація 👉React та CSS 👉Від звичайного CSS до CSSinJS 8. Тестування 👉Тестування та Jest Інше 👉Три популярні помилки початківців 👉Ні похідним даним у state 👉React, Аутентифікація, Firebase 👉Деплоїмо React на GitHub pages 👉Пишемо гру на React @reactbeginners

🎉 Київ, Itera Open Day for FE 12.06 🎉 💪 12.06.23 ми відкриваємо Київський офіс для вас. Якщо у вас є пет-проект, на який потрібно поглянути стороннім оком, якщо у вас є питання які ви хочете обговорити (тільки не Redux 😂), або якщо ви просто скучили за живим професійним спілкуванням - приходьте до нас на Поділ. 🕰 Офіс буде відкритий з 10:00 по 16:00, але є одна умова - у випадку тривоги ми всі, в обов'язковому порядку, негайно, спускаємося до сховища. Я буду доступний цілий день, а ще в гості загляне Ігор та DevOps-и яких можна буде помучати на предмет Azure (а може й AWS) 👉 Для тих хто зацікавився - ось реєстрація. Нажаль кількість місць обмежена 15 особами, тому, будь-ласка, підписуйтесь відповідально. Бережіть себе і побачимось вже офлайн! П.М. Ви перші хто побачили цю подію, дякую що ви з нами 😊

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

Всім привіт - коротенький апдейт. 💪Ми живі-здорові (і я сподіваюся ви теж), працюємо над курсом по Next.JS. 😎Що з того вийде, поки сказати не готовий, коли буде щось помацати - напишу детальніше. 👨‍💻Ще є плани записати відео про документацію проекту, але це пізніше. Бережіть себе, залишайтесь з нами, допомагайте ЗСУ.

Навіщо розділяти компоненти❓ 🔶 Стався тут у нас цікавий діалог з приводу того, де краще робити анімацію компонента - в самому компоненті, або в тому компоненті який його імпортує. 🐁 Я порадив піти третім шляхом і створити окремий компонент, який буде займатися лише одним - анімацією компонента. А далі вже по необхідності можна буде використовувати або анімований, або не базовий компонент. Але тут постало питання: - Просто якось дивно заради одного тега створювати цілий компонент І, на перший погляд, це дійсно трохи дивно, можна ж одразу зробити компонент анімований та й усе. Але, тут є цілих два підводних камені: 1️⃣ всі компоненти мають тенденцією рости та ускладнюватися. Власне анімація це чудовий приклад саме такого "розростання" компонентів. Відповідно, чим далі, тим більше буде у вашого компонента задач. А чим більше у нього задач - тим більше підстав для змін, що призводить до крихкості ваших компонентів і, відповідно, багів. 2️⃣ рано чи пізно, станеться ситуація, коли вам буде потрібен компонент без цих додаткових функціональностей, або з суттєво іншими. І тут вам би знову у нагоді став би базовий компонент, але його немає. Замість нього на вас дивиться кнопка на 600 рядків і питає - ну, що ризикнеш ще один if втулити чи як? 👉Тож, принцип однієї відповідальності, чудовий принцип який може суттєво спростити вам життя. Надто ним захоплюватися теж, звісно не треба, підходьте до нього з розумом. @reactbeginners

👩‍🏫Про ІТ курси без прикрас - спроба № 2👩‍🏫 🙃 Минулого ефіру про IT курси ми трохи налажали - не дуже конструктивно, не дуже по суті, коротше вийшло може й цікаво, але не про те. 😎Тому ми вирішили виправити ситуацію і провести максимально корисний, максимально (як для нас чотирьох) сфокусований ефір про те, що таке гарні IT курси. 🕺 В ефірі буде @job_it_junior, @babich_ss, Роман Савицький та я. 👉Приходьте, ставте запитання, сподіваюся буде корисніше ніж минулого разу.

💰Звіт💰 Зібрано: 54004 грн. Витрачено: ✈️ Дрони 2x22850=45700 🍯Смаколики: кава 1кг, кава в стіках (20шт), цигарки 1 блок=1687 Залишок: 6617 Дрони вийшли дешевші бо знайшли дешевші запчастини і хлопці запропонували роботу по збірці у подарунок. Але їм теж треба купляти наступні запчастини плюс вони відправляють за свій рахунок томі зійшлись на половині вартості, всі у виграші. ❤️Велетенське дякую за збір! Ви зробили найкращий подарунок! ⭐️Окрема подяка Ігорю Ц. та Роману Савицькому!

Після сьогоднішньої ночі підбивати підсумки на дрони проти русні вдвічі приємніше ❤️Дякую всім хто долучився до нашого збору. Разом ми зібрали 53 251 гривню з 48 000 необхідних! Було дуже приємно бачити і нові імена, і імена тих, хто і раніше підтримував мої збори. Дякую усім! ❗️Тепер щодо напису. Ми зібрали на 2 дрони, то ж написів буде два і, відповідно буде два автори за найбільший донат. А найбільший, не анонімний донат склав 2000 гривень. Таки людей у нас двоє: 👉Максим Ха. 👉Андрій Ко. ❗️Будь-ласка, напишіть мені в особисті до кінця дня! ❓Якщо люди не знайдуться, буде план Б - голосування на каналі, тому кидайте ваші пропозиції під цей пост. Бо текст має бути готовий вже до завтра. 😍І ще раз хочу подякувати усім не байдужим, в тому числі тим хто кидав 10, 20 гривень. Дякую вам велике, бо маленької допомоги не буває! Ви круті! Чекаю на ваші пропозиції під постом!

🎉Збір на дрони закрито!🎉 ❗️Якщо ви пожертвували більше ніж 2000 гривень - будь-ласка напишіть мені в особисті! А всі результати вже завтра 😉

А ось і нове відео про нову версію Next.JS Зачепили: 👉 Нову структуру проекту (тепер у нас є лише тека app без pages та api) 👉 Новий App роутер, який підтримує індивідуальні лоадери, layout-и та error-и 👉 Серверні компоненти, які не можуть бути інтерактивними, зате код, який вони використовують для рендеру не включається в бандл для фронтенду. Детальніше у новому огляді Next.Js 13.4.2 Дякую за перегляд, поширення та лайк.

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

Поки тривога, пропоную докинути на дрон В повітрі літаки він збивати не вміє, але по не броньованим цілям працює просто супер! А за найбільший донат на нього можна нанести будь-який напис. Доречі, найбільший донат від не анонімної особи наразі 1000 гривень)

❤️Воркшопчик про пет проекти❤️ 🐕 Як і обіцяв - в середу,17/05, о 19:00, відбудеться мікроворкшоп про пет проекти. Орієнтуйтеся десь до години часу. 👉 Поговоримо про те, що таке пет проекти, як обирати тему проекту, і про типові помилки. 🗒 Для участі - напишіть мені в особисті. Вартість - будь-яка сума на ваш вибір від 50 гривень, яка автоматично піде на збір на дрони. Група обмежена десятьма учасниками, щоб всі могли поспілкуватися. Бережіть себе!

🛬На довгі руки (10 км) та на день народження🛫 👉Відкриваю збір на дрони для наших хлопців на сході. Дрони це не прості - вони можуть нести до 2кг не дуже корисного для здоров'я навантаження на відстань до 10км. Фактично це мікроарта керована оператором. Дуже ефективне рішення яке чудово працює по живій силі і по не броньованій техніці. А усілякі антенки це просто щастя. 🔧Збирають їх у нас, в Києві і я вже домовився за їх виготовлення. Ціна однієї такої пташки - 24_000 гривень. Це не мало, але користі з них реально дуже і дуже багато. Особливо якщо пощастить натрапити на якусь техніку. Ціна може окупитись багатократно. 💰Той, хто задонатить найбільшу суму - отримає можливість вказати напис на дроні фарбою або гравіюванням. Збір буде відкритий до кінця цього тижня. 💪Я знаю, що грошей багато не буває, особливо на другий рік війни, та давайте все ж підтримаємо тих, хто зараз дає можливість нам спокійно вчитись і працювати. Я, звичайно, теж в ділі! Монобанк

🗞У мене є для вас кілька новин і одне прохання 🗞 📰Новини: 1️⃣ Відео про новий Next.JS в процесі. Є шанс що буде ввечері вівторка або середи. 2️⃣ 22 травня у нас буде внутрішнє обговорення цікавої теми - Summer School 23. Детальніше про це вже після 22 травня, але є надія на новий курс, але не зовсім з React-у 😉 3️⃣ На наступному тижні буде також воркшоп про пет проекти для невеличкої групи. Орієнтовно в середу ввечері. Реєстрація і подробиці буде в понеділок. ⭐️І прохання: В понеділок будемо відкривати один дуже цікавий збір на східний напрямок - вам сподобається. Всі домовленості є, залишається питання оплати. Тож, у кого є можливість, збережіть трохи грошей до понеділка. Навіть 10 гривень будуть дуже в нагоді. Подробиці також в понеділок. Всім тихих вихідних, бережіть себе!

😈Ей, хформошльопи! 😈 Звучить образливо, правда? Але часом, нас, фронтендщиків дійсно так називають. Подумаєш, що там такого складного - кинути форму, кілька полів, вбудовану валідацію, action на бекенд та й усе. Форма готова, го смузі, я створив. 🧐Але, якщо подивитись на список не функціональних вимог до проекту, все стає трошечки складніше. Навіть не трошечки, а суттєво складніше. І ось тут то і криється диявол. Ті, хто називає фронтів формошльопами, просто не розуміють сучасну складність фронт-енд проекту. 📄Простий приклад. Якщо ви задеплоєте сервіс воркер, який не передбачає оновлення - ви будете ходити за кожним клієнтом, щоб той видалив його вручну. Одна помилка і привіт. І це лише маківочка айсбергу під назвою "Простенький веб застосунок" 😎Так що коли хтось буде казати що ми прості формошльопи, згадайте перелік не функціональних вимог, лагідно йому усміхніться і додайте х1.5 до ціни ваших послуг наступного разу. А сперечатися не треба, навчання інших не ваші проблеми. @reactbeginners

✍️Не функціональні вимоги до нового проекту та наслідки✍️ У кожному проекті є функціональні вимоги - що має робити ваш застосунок, і не функціональні вимоги - як він має їх робити. Наприклад - як швидко має працювати ваш веб застосунок? На яких екранах? На яких браузерах? Скількома мовами? Що з доступністю? Чи важливе SEO? І на кожне з цих питань має бути дана відповідь ще до початку проекту, тому що: 1️⃣ Не функціональні вимоги складають значний обсяг роботи, який "втиснути" під кінець буде просто не реально. 2️⃣ Клієнти, розраховують, що всі ці вимоги включені в проект автоматично, що, насправді, не та, бо виконання всіх вимог збільшує обсяг робіт вдвічі а то й у тричі. Тому всі ці моменти ви обов'язково маєте проговорити з клієнтом і ❗️зафіксувати його рішення. Інакше потім будуть проблеми на етапі прийняття робіт і оплати. А мій список з коментарями можна подивитись ось тут І так, це не питання рівня початківців, але ви зростаєте, тож скоро це стане вам у нагоді. @reactbeginners

Цікава можливість спробувати знайти собі першу роботу: 📆 16-17.05 🌐 Онлайн 🧑‍💻 Вакансії для початківців від SoftServe, UKRSIBBANK, appflame, Renesas Electronics, ОККО, Sigma Software, MobiDev, Infopulse (привіт вам!) https://t.me/Job_IT_Junior/3590