Free React For Beginners
Магія залежностей package.json ❓ Що відбувається коли ви встановлюєте нову залежність 1️⃣ В руті проекту, npm шукає спеціальний файл налаштування .npmrc. Якщо його немає або в ньому не змінена адреса реєстру, npm буде використовувати https://registry.npmjs.org…
Складно правда? А тепер відкрийте список залежностей проекту на якомусь CRA. І ми з цим живемо кожен день.
👍6❤3😁1
🥶 Отже про semver🥶
Насправді нічого складного в ньому немає, а життя він спрощує людям дуже і дуже сильно.
✍️ Зазвичай версія програмного продукту складається з 3 (четверта то не по канону) частин:
👉 Секція
🧨 Breaking changes - це такі зміни, які змушують користувачів змінювати код для того, щоб він продовжував працювати. Тобто, в буквальному перекладі, ламаючі зміни.
🗒 Наприклад у нас є функція
❗️Є з цього правила одне виключення - мажорна версія 0. Вона вважається не стабільною за замовчуванням і minor оновлення має право на breaking change. Майте це на увазі.
❤️ Такий підхід, теоретично, дуже спрощує життя розробникам. Уявіть собі, що ви встановили собі React версії 18.1.3 а, через декілька тижнів ви побачили, що вже вийшов React 18.2.1. Якщо (if? if is good!(C)) розробники React притримуються політики semver, то ви одразу розумієте, що можете безпечно оновити залежність, все буде працювати як і до того плюс ви отримаєте нову функціональність та багфікси. Дуже зручно.
Але є одне але - не всі притримаються такої політики. Тому найкращий спосіб працювати з semver наступним чином:
1️⃣ Коли ми пишемо власний код - ми завжди притримуємось семверу. Це не важко і робить користування нашим кодом зручнішим і безпечнішим для інших. Такий от вклад в ком'юніті.
2️⃣ Коли ми використовуємо чужий код - ми перевіряємо чи дотримуються розробник semver (React -так)
Сподіваюся було корисно і будете підтримувати semver, так само як і я.
@reactbeginners
П.М. Підготовка до відео з Next нарешті завершена, так що відео вже не за горами!
Насправді нічого складного в ньому немає, а життя він спрощує людям дуже і дуже сильно.
✍️ Зазвичай версія програмного продукту складається з 3 (четверта то не по канону) частин:
<Major>.<Minor>.<Patch>-<postfix>
, наприклад: 0.23.11 або 3.9.2-alpha. Версії, зазвичай числові, постфікси буквенно-числові. Теоретично можна emoji втулити, але я такого ще не бачив.👉 Секція
patch
призначена для виправлень багів. Секція minor
для нової функціональності, яка не ламає стару, а секція major
призначена або для значних змін або для змін які ламають попередній функціонал, так звані breaking changes.🧨 Breaking changes - це такі зміни, які змушують користувачів змінювати код для того, щоб він продовжував працювати. Тобто, в буквальному перекладі, ламаючі зміни.
🗒 Наприклад у нас є функція
trim(line, maxSize)
яка першим аргументом приймає рядок, а другим максимально допустимий розмір рядка. Якщо змінити порядок аргументів, це breaking change і ви зобов'язані змінити major версію. А якщо до другого аргументу додати значення за замовчуванням - це minor оновлення, оскільки це додаткова функціональність яка нічого не ламає.❗️Є з цього правила одне виключення - мажорна версія 0. Вона вважається не стабільною за замовчуванням і minor оновлення має право на breaking change. Майте це на увазі.
❤️ Такий підхід, теоретично, дуже спрощує життя розробникам. Уявіть собі, що ви встановили собі React версії 18.1.3 а, через декілька тижнів ви побачили, що вже вийшов React 18.2.1. Якщо (if? if is good!(C)) розробники React притримуються політики semver, то ви одразу розумієте, що можете безпечно оновити залежність, все буде працювати як і до того плюс ви отримаєте нову функціональність та багфікси. Дуже зручно.
Але є одне але - не всі притримаються такої політики. Тому найкращий спосіб працювати з semver наступним чином:
1️⃣ Коли ми пишемо власний код - ми завжди притримуємось семверу. Це не важко і робить користування нашим кодом зручнішим і безпечнішим для інших. Такий от вклад в ком'юніті.
2️⃣ Коли ми використовуємо чужий код - ми перевіряємо чи дотримуються розробник semver (React -так)
Сподіваюся було корисно і будете підтримувати semver, так само як і я.
@reactbeginners
П.М. Підготовка до відео з Next нарешті завершена, так що відео вже не за горами!
✍14❤7👍5
А ось і Next.js
🎉 Нарешті виклав довгообіцяне відео про Next.JS. Хотів вкластися в 15 хвилин, але не вийшло.
У відео буде:
👉 Відмінності Next.JS і React.
👉 Можливості (не всі) Next.JS
👉 Чого в Next.JS немає.
🧑💻 І 10 хвилин практики під час якої я покажу як створювати сторінки, як створювати API ендпоінти, як це зв'язати до купи і як працює серверний рендерінг.
Вдячний за поширення та коментарі!
@reactbeginners
🎉 Нарешті виклав довгообіцяне відео про Next.JS. Хотів вкластися в 15 хвилин, але не вийшло.
У відео буде:
👉 Відмінності Next.JS і React.
👉 Можливості (не всі) Next.JS
👉 Чого в Next.JS немає.
🧑💻 І 10 хвилин практики під час якої я покажу як створювати сторінки, як створювати API ендпоінти, як це зв'язати до купи і як працює серверний рендерінг.
Вдячний за поширення та коментарі!
@reactbeginners
YouTube
Огляд Next.JS за 16 хвилин - українською
❗ Що таке Next.JS? Чим він відрізняється від React.JS? Як створити нову сторінку або написати API ендпоінт - про все це ви дізнаєтесь з цього короткого огляду.
0:00 Вступ
0:40 Що таке Next.JS
5:17 Пробуємо Next.JS на практиці
✉️ Telegram: https://t.me/reactbeginners…
0:00 Вступ
0:40 Що таке Next.JS
5:17 Пробуємо Next.JS на практиці
✉️ Telegram: https://t.me/reactbeginners…
👍43🔥22❤🔥5✍1
🎉Next.JS оновився до версії 13.4!
Вчора, 04.05, Next випустив довгоочікуване оновлення в якому, зокрема:
1️⃣ Новий роутер з більш зручною підтримкою layout
2️⃣ Серверні компоненти
3️⃣ Спрощене отримання даних
4️⃣ Тека App замість src
Сідаю готувати нове відео, бо зміни там і цікаві і значні.
Дякую AmelianceSkyMusic за наводку!
Вчора, 04.05, Next випустив довгоочікуване оновлення в якому, зокрема:
1️⃣ Новий роутер з більш зручною підтримкою layout
2️⃣ Серверні компоненти
3️⃣ Спрощене отримання даних
4️⃣ Тека App замість src
Сідаю готувати нове відео, бо зміни там і цікаві і значні.
Дякую AmelianceSkyMusic за наводку!
nextjs.org
Next.js 13.4
Next.js 13.4 moves App Router to stable, Turbopack to beta, and introduces experimental support for Server Actions.
🔥32👍9
Цікава можливість спробувати знайти собі першу роботу:
📆 16-17.05
🌐 Онлайн
🧑💻 Вакансії для початківців від SoftServe, UKRSIBBANK, appflame, Renesas Electronics, ОККО, Sigma Software, MobiDev, Infopulse (привіт вам!)
https://t.me/Job_IT_Junior/3590
📆 16-17.05
🌐 Онлайн
🧑💻 Вакансії для початківців від SoftServe, UKRSIBBANK, appflame, Renesas Electronics, ОККО, Sigma Software, MobiDev, Infopulse (привіт вам!)
https://t.me/Job_IT_Junior/3590
Telegram
Don't Panic Junior IT Jobs
Розкрий свій талант і перетвори бажання працювати в ІТ ⠖⡨ ⡈⢆⡉⢡⢄⢠ ⡔⡑⡉⢃ ⠱⠱⣈⡘ ⡒⢑ ⠱⡒⠃ ⢐⡅⢘⢉⡨⡒ 🤝
🦖 Підключайся на REX IT FEST, де ми зібрали 10 компаній, які продовжують розвивати бізнес в Україні й пропонують вакансії для початківців.
Будемо прокачувати твої…
🦖 Підключайся на REX IT FEST, де ми зібрали 10 компаній, які продовжують розвивати бізнес в Україні й пропонують вакансії для початківців.
Будемо прокачувати твої…
🔥5❤2
✍️Не функціональні вимоги до нового проекту та наслідки✍️
У кожному проекті є функціональні вимоги - що має робити ваш застосунок, і не функціональні вимоги - як він має їх робити.
Наприклад: як швидко має працювати ваш веб застосунок? На яких екранах? На яких браузерах? Скількома мовами? Що з доступністю? Чи важливе SEO?
І на кожне з цих питань має бути дана відповідь ще до початку проекту, тому що:
1️⃣ Не функціональні вимоги складають значний обсяг роботи, який "втиснути" під кінець буде просто не реально.
2️⃣ Клієнти, розраховують, що всі ці вимоги включені в проект автоматично, що, насправді, не так, бо виконання всіх вимог збільшує обсяг робіт вдвічі а то й у тричі.
❗️Тому всі ці моменти ви обов'язково маєте проговорити з клієнтом і зафіксувати! його рішення. Інакше потім будуть проблеми на етапі прийняття робіт і оплати.
А мій список з коментарями можна подивитись ось тут
І так, це не питання рівня початківців, але ви зростаєте, тож скоро це стане вам у нагоді.
@reactbeginners
У кожному проекті є функціональні вимоги - що має робити ваш застосунок, і не функціональні вимоги - як він має їх робити.
Наприклад: як швидко має працювати ваш веб застосунок? На яких екранах? На яких браузерах? Скількома мовами? Що з доступністю? Чи важливе SEO?
І на кожне з цих питань має бути дана відповідь ще до початку проекту, тому що:
1️⃣ Не функціональні вимоги складають значний обсяг роботи, який "втиснути" під кінець буде просто не реально.
2️⃣ Клієнти, розраховують, що всі ці вимоги включені в проект автоматично, що, насправді, не так, бо виконання всіх вимог збільшує обсяг робіт вдвічі а то й у тричі.
❗️Тому всі ці моменти ви обов'язково маєте проговорити з клієнтом і зафіксувати! його рішення. Інакше потім будуть проблеми на етапі прийняття робіт і оплати.
А мій список з коментарями можна подивитись ось тут
І так, це не питання рівня початківців, але ви зростаєте, тож скоро це стане вам у нагоді.
@reactbeginners
👍22❤8💯2❤🔥1
😈Ей, хформошльопи! 😈
Звучить образливо, правда? Але часом, нас, фронтендщиків дійсно так називають. Подумаєш, що там такого складного - кинути форму, кілька полів, вбудовану валідацію, action на бекенд та й усе. Форма готова, го смузі, я створив.
🧐Але, якщо подивитись на список не функціональних вимог до проекту, все стає трошечки складніше. Навіть не трошечки, а суттєво складніше. І ось тут то і криється диявол. Ті, хто називає фронтів формошльопами, просто не розуміють сучасну складність фронт-енд проекту.
📄Простий приклад. Якщо ви задеплоєте сервіс воркер, який не передбачає оновлення - ви будете ходити за кожним клієнтом, щоб той видалив його вручну. Одна помилка і привіт. І це лише маківочка айсбергу під назвою "Простенький веб застосунок"
😎Так що коли хтось буде казати що ми прості формошльопи, згадайте перелік не функціональних вимог, лагідно йому усміхніться і додайте х1.5 до ціни ваших послуг наступного разу. А сперечатися не треба, навчання інших не ваші проблеми.
@reactbeginners
Звучить образливо, правда? Але часом, нас, фронтендщиків дійсно так називають. Подумаєш, що там такого складного - кинути форму, кілька полів, вбудовану валідацію, action на бекенд та й усе. Форма готова, го смузі, я створив.
🧐Але, якщо подивитись на список не функціональних вимог до проекту, все стає трошечки складніше. Навіть не трошечки, а суттєво складніше. І ось тут то і криється диявол. Ті, хто називає фронтів формошльопами, просто не розуміють сучасну складність фронт-енд проекту.
📄Простий приклад. Якщо ви задеплоєте сервіс воркер, який не передбачає оновлення - ви будете ходити за кожним клієнтом, щоб той видалив його вручну. Одна помилка і привіт. І це лише маківочка айсбергу під назвою "Простенький веб застосунок"
😎Так що коли хтось буде казати що ми прості формошльопи, згадайте перелік не функціональних вимог, лагідно йому усміхніться і додайте х1.5 до ціни ваших послуг наступного разу. А сперечатися не треба, навчання інших не ваші проблеми.
@reactbeginners
👍32🔥8
🗞У мене є для вас кілька новин і одне прохання 🗞
📰Новини:
1️⃣ Відео про новий Next.JS в процесі. Є шанс що буде ввечері вівторка або середи.
2️⃣ 22 травня у нас буде внутрішнє обговорення цікавої теми - Summer School 23. Детальніше про це вже після 22 травня, є надія на новий курс, але не зовсім з React-у 😉
3️⃣ На наступному тижні буде також воркшоп про пет проекти для невеличкої групи. Орієнтовно в середу ввечері. Реєстрація і подробиці буде в понеділок.
⭐️І прохання:
В понеділок будемо відкривати один дуже цікавий збір на східний напрямок - вам сподобається. Всі домовленості є, залишається питання оплати. Тож, у кого є можливість, збережіть трохи грошей до понеділка. Навіть 10 гривень будуть дуже в нагоді. Подробиці також в понеділок.
Всім тихих вихідних, бережіть себе!
📰Новини:
1️⃣ Відео про новий Next.JS в процесі. Є шанс що буде ввечері вівторка або середи.
2️⃣ 22 травня у нас буде внутрішнє обговорення цікавої теми - Summer School 23. Детальніше про це вже після 22 травня, є надія на новий курс, але не зовсім з React-у 😉
3️⃣ На наступному тижні буде також воркшоп про пет проекти для невеличкої групи. Орієнтовно в середу ввечері. Реєстрація і подробиці буде в понеділок.
⭐️І прохання:
В понеділок будемо відкривати один дуже цікавий збір на східний напрямок - вам сподобається. Всі домовленості є, залишається питання оплати. Тож, у кого є можливість, збережіть трохи грошей до понеділка. Навіть 10 гривень будуть дуже в нагоді. Подробиці також в понеділок.
Всім тихих вихідних, бережіть себе!
👍44❤10❤🔥6🔥3
🛬На довгі руки (10 км) та на день народження
👉Відкриваю збір на дрони для наших хлопців на сході. Дрони це не прості - вони можуть нести до 2кг не дуже корисного для здоров'я навантаження на відстань до 10км. Фактично це мікроарта керована оператором. Дуже ефективне рішення яке чудово працює по живій силі і по не броньованій техніці. А усілякі антенки це просто щастя
🔧Збирають їх у нас, в Києві і я вже домовився за їх виготовлення. Ціна однієї такої пташки - 24_000 гривень. Це не мало, але користі з них реально дуже і дуже багато. Особливо якщо пощастить натрапити на якусь техніку. Ціна може окупитись багатократно
💰Той, хто задонатить найбільшу суму - отримає можливість вказати напис на дроні фарбою або гравіюванням. Збір буде відкритий до кінця цього тижня
💪Я знаю, що грошей багато не буває, особливо на другий рік війни, та давайте все ж підтримаємо тих, хто зараз дає можливість нам спокійно вчитись і працювати
Я, звичайно, теж в ділі!
Монобанк
4731185629296887
38 058 /48_000/1000 гривень - 6 людей
👉Відкриваю збір на дрони для наших хлопців на сході. Дрони це не прості - вони можуть нести до 2кг не дуже корисного для здоров'я навантаження на відстань до 10км. Фактично це мікроарта керована оператором. Дуже ефективне рішення яке чудово працює по живій силі і по не броньованій техніці. А усілякі антенки це просто щастя
🔧Збирають їх у нас, в Києві і я вже домовився за їх виготовлення. Ціна однієї такої пташки - 24_000 гривень. Це не мало, але користі з них реально дуже і дуже багато. Особливо якщо пощастить натрапити на якусь техніку. Ціна може окупитись багатократно
💰Той, хто задонатить найбільшу суму - отримає можливість вказати напис на дроні фарбою або гравіюванням. Збір буде відкритий до кінця цього тижня
💪Я знаю, що грошей багато не буває, особливо на другий рік війни, та давайте все ж підтримаємо тих, хто зараз дає можливість нам спокійно вчитись і працювати
Я, звичайно, теж в ділі!
Монобанк
4731185629296887
38 058 /48_000/1000 гривень - 6 людей
👍20🔥9
❤️Воркшопчик про пет проекти❤️
🐕 Як і обіцяв - в середу,17/05, о 19:00, відбудеться мікроворкшоп про пет проекти. Орієнтуйтеся десь до години часу.
👉 Поговоримо про те, що таке пет проекти, як обирати тему проекту, і про типові помилки.
🗒 Для участі - напишіть мені в особисті. Вартість - будь-яка сума на ваш вибір від 50 гривень, яка автоматично піде на збір на дрони.
Група обмежена десятьма учасниками, щоб всі могли поспілкуватися.
Бережіть себе!
🐕 Як і обіцяв - в середу,17/05, о 19:00, відбудеться мікроворкшоп про пет проекти. Орієнтуйтеся десь до години часу.
👉 Поговоримо про те, що таке пет проекти, як обирати тему проекту, і про типові помилки.
🗒 Для участі - напишіть мені в особисті. Вартість - будь-яка сума на ваш вибір від 50 гривень, яка автоматично піде на збір на дрони.
Група обмежена десятьма учасниками, щоб всі могли поспілкуватися.
Бережіть себе!
👍17
Media is too big
VIEW IN TELEGRAM
🛩Поки я записую відео про Next.JS - подивіться на роботу дронів на які ми оце зараз збираємо 🛩
Дрон на відео як раз тієї майстерні що буде робити наше замовлення. Тож, як бачите, хлопці знають що роблять!
Допомогти на збір: 42_499 + 5502 = 48_001
Збір закрито!
П.М. Дуже не виспався через нічну атаку, то ж голос на відео може бути не супер веселий. Вибачте.
@reactbeginners
Дрон на відео як раз тієї майстерні що буде робити наше замовлення. Тож, як бачите, хлопці знають що роблять!
Допомогти на збір: 42_499 + 5502 = 48_001
Збір закрито!
П.М. Дуже не виспався через нічну атаку, то ж голос на відео може бути не супер веселий. Вибачте.
@reactbeginners
👍18
А ось і нове відео про нову версію Next.JS
Зачепили:
👉 Нову структуру проекту (тепер у нас є лише тека app без pages та api)
👉 Новий App роутер, який підтримує індивідуальні лоадери, layout-и та error-и
👉 Серверні компоненти, які не можуть бути інтерактивними, зате код, який вони використовують для рендеру не включається в бандл для фронтенду.
Детальніше у новому огляді Next.Js 13.4.2
Дякую за перегляд, поширення та лайк.
Зачепили:
👉 Нову структуру проекту (тепер у нас є лише тека app без pages та api)
👉 Новий App роутер, який підтримує індивідуальні лоадери, layout-и та error-и
👉 Серверні компоненти, які не можуть бути інтерактивними, зате код, який вони використовують для рендеру не включається в бандл для фронтенду.
Детальніше у новому огляді Next.Js 13.4.2
Дякую за перегляд, поширення та лайк.
YouTube
Велике оновлення NextJS 13.4 - короткий огляд українською
❗ Нещодавно Next.JS випустив велике оновлення в якому з'явився новий App Router, вкладені сторінки та серверні компоненти. Про все це, а також чому useState тепер може викликати помилку ви дізнаєтесь з цього короткого огляду
0:00 Вступ
0:48 Нова структура…
0:00 Вступ
0:48 Нова структура…
👍14🔥11
🎉Збір на дрони закрито (навіть трохи перебрали)🎉
❗️Якщо ви пожертвували більше ніж 2000 гривень і хочете прийняти участь в написі на дроні - будь-ласка напишіть мені в особисті!
А всі результати вже завтра 😉
❗️Якщо ви пожертвували більше ніж 2000 гривень і хочете прийняти участь в написі на дроні - будь-ласка напишіть мені в особисті!
А всі результати вже завтра 😉
👍8🍾8
Після сьогоднішньої ночі підбивати підсумки на дрони проти русні вдвічі приємніше
❤️Дякую всім хто долучився до нашого збору. Разом ми зібрали 53 251 гривню з 48 000 необхідних! Було дуже приємно бачити і нові імена, і імена тих, хто і раніше підтримував мої збори. Дякую усім!
❗️Тепер щодо напису. Ми зібрали на 2 дрони, то ж написів буде два і, відповідно буде два автори за найбільший донат. А найбільший, не анонімний донат склав 2000 гривень. Таки людей у нас двоє:
👉Максим Ха. = ЗА СУМИ
👉Андрій Ко. = ???
❗️Будь-ласка, напишіть мені в особисті до кінця дня!
❓Якщо люди не знайдуться, буде план Б - голосування на каналі, тому кидайте ваші пропозиції під цей пост. Бо текст має бути готовий вже до завтра.
😍І ще раз хочу подякувати усім не байдужим, в тому числі тим хто кидав 10, 20 гривень. Дякую вам велике, бо маленької допомоги не буває! Ви круті!
Чекаю на ваші пропозиції під постом!
❤️Дякую всім хто долучився до нашого збору. Разом ми зібрали 53 251 гривню з 48 000 необхідних! Було дуже приємно бачити і нові імена, і імена тих, хто і раніше підтримував мої збори. Дякую усім!
❗️Тепер щодо напису. Ми зібрали на 2 дрони, то ж написів буде два і, відповідно буде два автори за найбільший донат. А найбільший, не анонімний донат склав 2000 гривень. Таки людей у нас двоє:
👉Максим Ха. = ЗА СУМИ
👉Андрій Ко. = ???
❗️Будь-ласка, напишіть мені в особисті до кінця дня!
❓Якщо люди не знайдуться, буде план Б - голосування на каналі, тому кидайте ваші пропозиції під цей пост. Бо текст має бути готовий вже до завтра.
😍І ще раз хочу подякувати усім не байдужим, в тому числі тим хто кидав 10, 20 гривень. Дякую вам велике, бо маленької допомоги не буває! Ви круті!
Чекаю на ваші пропозиції під постом!
🎉13❤🔥6❤1
Напис на дроні № 2
Anonymous Poll
11%
На Контранаступ
11%
ПТН ПНХ
32%
Геть з України
33%
Москаляку на гілляку
28%
Все буде Україна
✍5
💰Звіт💰
Зібрано: 54004 грн.
Витрачено:
✈️ Дрони 2x22850=45700
🍯Смаколики: кава 1кг, кава в стіках (20шт), цигарки 1 блок=1687
Залишок: 6617
Дрони вийшли дешевші бо знайшли дешевші запчастини і хлопці запропонували роботу по збірці у подарунок. Але їм теж треба купляти наступні запчастини, плюс вони відправляють за свій рахунок тож зійшлись на половині вартості, всі у виграші.
❤️Велетенське дякую за збір! Ви зробили найкращий подарунок!
⭐️Окрема подяка Ігорю Ц. та Роману Савицькому!
Зібрано: 54004 грн.
Витрачено:
✈️ Дрони 2x22850=45700
🍯Смаколики: кава 1кг, кава в стіках (20шт), цигарки 1 блок=1687
Залишок: 6617
Дрони вийшли дешевші бо знайшли дешевші запчастини і хлопці запропонували роботу по збірці у подарунок. Але їм теж треба купляти наступні запчастини, плюс вони відправляють за свій рахунок тож зійшлись на половині вартості, всі у виграші.
❤️Велетенське дякую за збір! Ви зробили найкращий подарунок!
⭐️Окрема подяка Ігорю Ц. та Роману Савицькому!
❤19👍11🍾3❤🔥1