💻 Про #React та #frontend та #веб розробку
🧑🎓 Для початківців і не тільки
👉 https://www.youtube.com/@reactdev
Post #341
1.92K
Channel Public Channel
FR Free React For Beginners
@reactbeginners
- Subscribers
- 3.04K
- Photos
- 231
- Videos
- 5
- Links
- 387
Showing posts older than #342 · Back to latest
Older Posts 20 shown
Post #340
1.82K
Яке я вам відео готую - аж мені подобається.
👉 Робоча назва: ReactCodeSmells та Redux - поширені помилки під час використання глобального стору.
З прикладами, з мікрозастосунком, з кодом на GitHub. І все це менше ніж за 15 хвилин (ну я сподіваюся).
Як вам таке?
П.М. давно я таку либу не давив)))
👉 Робоча назва: ReactCodeSmells та Redux - поширені помилки під час використання глобального стору.
З прикладами, з мікрозастосунком, з кодом на GitHub. І все це менше ніж за 15 хвилин (ну я сподіваюся).
Як вам таке?
П.М. давно я таку либу не давив)))
- 🔥 66
- 👍 8
- ❤ 7
- ❤🔥 3
- 👏 2
Post #339
1.84K
#ReactCodeSmells - стор не для локальних даних.
👜Глобальний стор штука зручна і наче навмисно запрошує вас все класти туди. Але це підла та підступна пастка, тому що глобальний стор доступний буквально всім (на те він і глобальний). А це призводить до його крихкості та заплутаності. А ще й до поступового росту перетворюючи миле кошеня з документації на монстра з нічних кошмарів.
Боротися з цим можна і треба:
1️⃣ По-перше, використовуйте глобальний стор лише для тих даних які потрібні буквально по всьому проекту, наприклад дані користувача, або корзина користувача.
2️⃣ По-друге, діліть глобальні стори на логічні шматки. Далеко не завжди вам потрібен єдиний стор для всіх 217 сторінок. Для прикладу зверніть увагу на слайси в Redux-Toolkit. Та й взагалі мати декілька логічно розділених сторів цілком розумна ідея, навіть RTK на моїй стороні.
3️⃣ По-третє, не соромтеся використовувати локальний стейт. Якщо дані потрібні лише в одному компоненті це й так очевидно. Але якщо дані потрібні в батьківському компоненті та на глибину в 1-2 компоненти вниз то використовувати локальний стейт теж не гріх.
👉 І наостанок хочу додати - запорука проекту, який росте без особливих проблем - інкапсуляція. Будь-який шматок коду або даних має відкриватися лише за потреби. Будь-який компонент, для своєї роботи, має вимагати лише ті дані з якими працює. Це робить кодову базу простіше для читання та менш вразливою.
Бережіть себе, скоро побачимось.
@reactbeginners
👜Глобальний стор штука зручна і наче навмисно запрошує вас все класти туди. Але це підла та підступна пастка, тому що глобальний стор доступний буквально всім (на те він і глобальний). А це призводить до його крихкості та заплутаності. А ще й до поступового росту перетворюючи миле кошеня з документації на монстра з нічних кошмарів.
Боротися з цим можна і треба:
1️⃣ По-перше, використовуйте глобальний стор лише для тих даних які потрібні буквально по всьому проекту, наприклад дані користувача, або корзина користувача.
2️⃣ По-друге, діліть глобальні стори на логічні шматки. Далеко не завжди вам потрібен єдиний стор для всіх 217 сторінок. Для прикладу зверніть увагу на слайси в Redux-Toolkit. Та й взагалі мати декілька логічно розділених сторів цілком розумна ідея, навіть RTK на моїй стороні.
3️⃣ По-третє, не соромтеся використовувати локальний стейт. Якщо дані потрібні лише в одному компоненті це й так очевидно. Але якщо дані потрібні в батьківському компоненті та на глибину в 1-2 компоненти вниз то використовувати локальний стейт теж не гріх.
👉 І наостанок хочу додати - запорука проекту, який росте без особливих проблем - інкапсуляція. Будь-який шматок коду або даних має відкриватися лише за потреби. Будь-який компонент, для своєї роботи, має вимагати лише ті дані з якими працює. Це робить кодову базу простіше для читання та менш вразливою.
Бережіть себе, скоро побачимось.
@reactbeginners
- ❤ 22
- 👍 12
- 🔥 2
Post #338
1.86K
Free React For Beginners 👥Принцип сильної згуртованості, або High Cohesion👥 Про Low Coupling ми вже поговорили, тепер давайте доб'ємо його пару - принцип згуртованості. Насправді цей принцип дуже простий і найлегше його пояснити на наступному прикладі: 👉 Уявіть що ви придбали собі…
Питання:
-Так що, виходить що за цим принципом потрібно
Відповідь:
- Ні. Загальні компоненти утворюють свій власний модуль, до якого вони належать. Фактично це як коробка з інструментами, які лежать разом.
Ключовий момент тут - приналежність. Елементи, що належать одній системі живуть разом. Все)
:)
-Так що, виходить що за цим принципом потрібно
H1 тримати біля компоненту сторінки - адже вона його використовує, правильно?Відповідь:
- Ні. Загальні компоненти утворюють свій власний модуль, до якого вони належать. Фактично це як коробка з інструментами, які лежать разом.
Ключовий момент тут - приналежність. Елементи, що належать одній системі живуть разом. Все)
:)
- 👍 17
- 😁 3
Post #337
1.8K
👥Принцип сильної згуртованості, або High Cohesion👥
Про Low Coupling ми вже поговорили, тепер давайте доб'ємо його пару - принцип згуртованості.
Насправді цей принцип дуже простий і найлегше його пояснити на наступному прикладі:
👉 Уявіть що ви придбали собі комп'ютер з доставкою додому. Приходити ви ввечері, сповнені надії нарешті повноцінно попрацювати з новим фреймворком diablo iv і бачите наступну картину: Монітор стоїть у великій кімнаті. Звідти тягнеться довжелезний шур до ванної де повішена на стіну материнка. Звідти, до кухні, йде шлейф до накопичувача, і лінія живлення яка напряму підключена до щита поза межами вашої квартири.. А коли ви нарешті сіли попрацювати (ну добре, пограти в старий добрий 1.6), то все згасло тому що ваш сусід (свята людина) побачив незнайомий йому шлейф на щиті і відключив його, про всяк випадок, бо чорт його знає що то за шнур і кому він треба.
😎 Не треба бути експертом, в чому тут проблема - замість того щоб тримати всі елементи системи в купі - хтось розкидав їх де попало ще й відкрив складові зовнішньому впливу, що призвело до втрати працездатності всієї системи.
👨💻В програмуванні все працює так само. Елементи, які працюють разом мають знаходитись разом - це і є принцип гуртування. Ще, бажано, показувати на ззовні лише те без чого не обійтись, але це вже інкапсуляція, про яку ми поговоримо пізніше.
❗️Принцип сильної згуртованості спрощує підтримку коду, зменшує його крихкість, збільшує стійкість до небажаних змін. Тому дуже раджу ним користуватися. До-речі, групування файлів за їх типом (всі лейаути разом, всі хуки разом, всі компоненти разом) чудово порушують цей принцип. Тож не робіть так, якщо є змога, а групуйте їх за призначенням.
Бережіть себе і скоро побачимось
Telegram Free React For Beginners 🌲Відповіді та пояснення. Частина перша.🌲
😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини.
Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для… Про Low Coupling ми вже поговорили, тепер давайте доб'ємо його пару - принцип згуртованості.
Насправді цей принцип дуже простий і найлегше його пояснити на наступному прикладі:
👉 Уявіть що ви придбали собі комп'ютер з доставкою додому. Приходити ви ввечері, сповнені надії нарешті повноцінно попрацювати з новим фреймворком diablo iv і бачите наступну картину: Монітор стоїть у великій кімнаті. Звідти тягнеться довжелезний шур до ванної де повішена на стіну материнка. Звідти, до кухні, йде шлейф до накопичувача, і лінія живлення яка напряму підключена до щита поза межами вашої квартири.. А коли ви нарешті сіли попрацювати (ну добре, пограти в старий добрий 1.6), то все згасло тому що ваш сусід (свята людина) побачив незнайомий йому шлейф на щиті і відключив його, про всяк випадок, бо чорт його знає що то за шнур і кому він треба.
😎 Не треба бути експертом, в чому тут проблема - замість того щоб тримати всі елементи системи в купі - хтось розкидав їх де попало ще й відкрив складові зовнішньому впливу, що призвело до втрати працездатності всієї системи.
👨💻В програмуванні все працює так само. Елементи, які працюють разом мають знаходитись разом - це і є принцип гуртування. Ще, бажано, показувати на ззовні лише те без чого не обійтись, але це вже інкапсуляція, про яку ми поговоримо пізніше.
❗️Принцип сильної згуртованості спрощує підтримку коду, зменшує його крихкість, збільшує стійкість до небажаних змін. Тому дуже раджу ним користуватися. До-речі, групування файлів за їх типом (всі лейаути разом, всі хуки разом, всі компоненти разом) чудово порушують цей принцип. Тож не робіть так, якщо є змога, а групуйте їх за призначенням.
Бережіть себе і скоро побачимось
- 👍 14
- 🔥 7
- ❤ 2
Post #336
1.67K
Free React For Beginners 🌲Відповіді та пояснення. Частина перша.🌲 😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини. Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для всіх:…
🌴Відповіді та пояснення. Частина друга. 🌴
Другу помилку знайти було трохи важче, і полягала вона в наступному:
Помилка: Неправильне перевикористання коду, а саме компоненту SuccessText. Або, якщо по-розумному, порушення принципу DRY.
Проблема: Зазвичай ми намагаємось використовувати існуючий код і не копіпастити його. І все йде добре, аж поки не виявиться, що код, який ми вважали спільним є таким лише випадково. По суті - мій компонент
Вирішення: Скопіювати компонент
👉 Для щоб не повторювати цю помилку в майбутньому ви можете використовувати ще одне просте контрольне запитання - чи збігаються підстави для змін цього коду у всіх модулях що їх використовують.
Очевидно, що підстави для змін компоненту ціни і компоненту нотифікації різні, а, отже, це різні компоненти які просто схоже виглядають.
🧐 Такі справи. Як бачите, тема не дуже проста і викладати її доступно завдання не тривіальне (не впевнений що в мене це вийшло навіть зараз, буду вдячний за відгук). Тому відео просувається повільно.
А ви бережіть себе і скоро побачимось.
@reactbeginners
Другу помилку знайти було трохи важче, і полягала вона в наступному:
Помилка: Неправильне перевикористання коду, а саме компоненту SuccessText. Або, якщо по-розумному, порушення принципу DRY.
Проблема: Зазвичай ми намагаємось використовувати існуючий код і не копіпастити його. І все йде добре, аж поки не виявиться, що код, який ми вважали спільним є таким лише випадково. По суті - мій компонент
SuccessText - це банер повідомлення що операція пройшла успішно. Чисто випадково він виглядає так само як, на разі, виглядає ціна. Але по суті вони різні і коли ми захочемо змінити ціну, SuccessText має залишитись без змін.Вирішення: Скопіювати компонент
SuccessText в теку buy-product і назвати його ProductPrice. Таким чином ми отримаємо незалежний компонент ще й з логічною назвою. Ось так усе просто. 🙂👉 Для щоб не повторювати цю помилку в майбутньому ви можете використовувати ще одне просте контрольне запитання - чи збігаються підстави для змін цього коду у всіх модулях що їх використовують.
Очевидно, що підстави для змін компоненту ціни і компоненту нотифікації різні, а, отже, це різні компоненти які просто схоже виглядають.
🧐 Такі справи. Як бачите, тема не дуже проста і викладати її доступно завдання не тривіальне (не впевнений що в мене це вийшло навіть зараз, буду вдячний за відгук). Тому відео просувається повільно.
А ви бережіть себе і скоро побачимось.
@reactbeginners
- ❤ 13
- 👍 12
Post #335
1.62K
Free React For Beginners 🌳Про структуру проекту - питання для роздумів🌳 🔨 Продовжуємо працювати над відео про структуру React проекту і в зв'язку з цим - пропоную подумати над наступним питанням: ❓Маємо проект, який складається з двох сторінок - main.page.tsx та buy-product.page.tsx.…
🌲Відповіді та пояснення. Частина перша.🌲
😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини.
Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для всіх:
Помилка: Прямий імпорт в
Проблема: Суть проблеми полягає в тому, що сторінка
Вирішення: Вирішити цю проблему просто - достатньо винести
👉 А для щоб не повторювати цю помилку в майбутньому ви можете використовувати просте контрольне запитання - чи має мій компонент змінюватися, коли змінюється модуль з якого я роблю імпорт?
Очевидно що зміні на
Друга помилка в наступному пості...
П.М. Так мою пасхалку і не знайшли) Наступного разу зроблю приз за її знаходження)
@reactbeginners
😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини.
Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для всіх:
Помилка: Прямий імпорт в
buy-product.page.tsx. з main.page.tsx., або, якби б я відповідав на співбесіді, порушення принципу low coupling (низької зв'язності)Проблема: Суть проблеми полягає в тому, що сторінка
buy-product починає щось знати про код, до якого він не має жодного стосунку - сторінку main. На практиці, це призводить до того, що коли сторінка main буде перейменована, переміщена, відрефакторена - вам доведеться вносити зміни і у сторінку buy-product. Якщо ви випустите це з уваги - отримаєте баг. Ще одна проблема в тому, що, оскільки H1 належить до main, то розробники будуть думати що вони можуть вільно змінювати H1 відповідно до потреб main. Це означає, що рано чи пізно, заголовок на сторінці buy-product не очікувано зміниться і ми отримаємо ще один баг. Вирішення: Вирішити цю проблему просто - достатньо винести
H1 в окрему теку, яка призначена виключно для коду, який можна використовувати всім, наприклад shared. Цей підхід вирішить одразу дві проблеми. По-перше, ми відв'яжемо buy-product від main, а, по-друге, факт знаходження компоненту в shared буде сигналізувати всім що змінювати цей компонент потрібно з обережністю - він загальнодоступний. 👉 А для щоб не повторювати цю помилку в майбутньому ви можете використовувати просте контрольне запитання - чи має мій компонент змінюватися, коли змінюється модуль з якого я роблю імпорт?
Очевидно що зміні на
main не мають впливати на інші сторінки, а от зміни в shared - мають.Друга помилка в наступному пості...
П.М. Так мою пасхалку і не знайшли) Наступного разу зроблю приз за її знаходження)
@reactbeginners
- ❤ 14
- 👍 4
- 🔥 3
Post #334
1.79K
🌳Про структуру проекту - питання для роздумів🌳
🔨 Продовжуємо працювати над відео про структуру React проекту і в зв'язку з цим - пропоную подумати над наступним питанням:
❓Маємо проект, який складається з двох сторінок -
a) компонент
б) компонент SuccessText - текст зелено-ядучого кольору який показується у випадку успішного сабміту форми зворотнього звя'зку.
Сторінка
а) відмалювати заголовок першого рівня
б) відмалювати спеціальну ціну за товар. (приклад на скріншоті)
❓В задачі питається: які помилки я допустив з точки зору структури проекту і як їх виправити?
Відповідь опублікую вже завтра
П.М. Хтось помітив пасхалку? 😀?
@reactbeginners
🔨 Продовжуємо працювати над відео про структуру React проекту і в зв'язку з цим - пропоную подумати над наступним питанням:
❓Маємо проект, який складається з двох сторінок -
main.page.tsx та buy-product.page.tsx. В Main сторінці є: a) компонент
H1 - який відмальовується як заголовокб) компонент SuccessText - текст зелено-ядучого кольору який показується у випадку успішного сабміту форми зворотнього звя'зку.
Сторінка
buy-product імпортує обидва ці компоненти і використовує їх для того щоб:а) відмалювати заголовок першого рівня
б) відмалювати спеціальну ціну за товар. (приклад на скріншоті)
❓В задачі питається: які помилки я допустив з точки зору структури проекту і як їх виправити?
Відповідь опублікую вже завтра
П.М. Хтось помітив пасхалку? 😀?
@reactbeginners
- 👍 10
- ❤ 1
Post #333
2.16K
Колись я цей пост вже писав, але з того часу нас стало втричі більше, тож давайте познайомимось
😎 Мене звати Віталій, працюю я самі знаєте де 😁. В IT вже більше 8оми років. Можу спроектувати поганеньку базу даних, зробити посередній бекенд і нормальний фронтенд. Писав на knockout, angular.js, angular, react.
🧐 Три роки був спів викладачем для НАУ (хто був у нас в Itera, можливо бачив мене в живу). Був членом програмного комітету JsFest (там і познайомився з Бабічем) та виступав на FwDays, VinnitsyaJs, American Digital Weeks.
❤️ Люблю програмування, комп'ютерні ігри, читати, сноуборд та віндсерф. Під час війни здобув ще декілька корисних, але менш friendly навичок, чого і вам раджу. Про всяк випадок ;)
🧑💻 Щодо цього каналу - він не комерційний, з'явився на початку повномасштабного нападу росії на Україну щоб допомогти людям доотримати знання та знайти собі роботу. Каналу вже рік і він ще й досі живе, з чого я трохи дивуюсь та радію. Також ми тут іноді проводимо не великі збори на потреби ЗСУ, долучайтеся за можливості.
🔗 Ще в мене є лінкедин, де я іноді пишу щось корисне, а іноді свої думки стосовно того що відбувається навкруги, але без політики. Наприклад ось.
❓А хто ви? Звідки, як сюди потрапили, що вас цікавить? Пишіть, в п'ятницю складне постити гріх :)
😎 Мене звати Віталій, працюю я самі знаєте де 😁. В IT вже більше 8оми років. Можу спроектувати поганеньку базу даних, зробити посередній бекенд і нормальний фронтенд. Писав на knockout, angular.js, angular, react.
🧐 Три роки був спів викладачем для НАУ (хто був у нас в Itera, можливо бачив мене в живу). Був членом програмного комітету JsFest (там і познайомився з Бабічем) та виступав на FwDays, VinnitsyaJs, American Digital Weeks.
❤️ Люблю програмування, комп'ютерні ігри, читати, сноуборд та віндсерф. Під час війни здобув ще декілька корисних, але менш friendly навичок, чого і вам раджу. Про всяк випадок ;)
🧑💻 Щодо цього каналу - він не комерційний, з'явився на початку повномасштабного нападу росії на Україну щоб допомогти людям доотримати знання та знайти собі роботу. Каналу вже рік і він ще й досі живе, з чого я трохи дивуюсь та радію. Також ми тут іноді проводимо не великі збори на потреби ЗСУ, долучайтеся за можливості.
🔗 Ще в мене є лінкедин, де я іноді пишу щось корисне, а іноді свої думки стосовно того що відбувається навкруги, але без політики. Наприклад ось.
❓А хто ви? Звідки, як сюди потрапили, що вас цікавить? Пишіть, в п'ятницю складне постити гріх :)
- ❤ 42
- 👍 8
- ❤🔥 1
Post #332
2.24K
🏎 Вчора побіжно зачепили тему вимірювань, але без подробиць, тому виправляюся 🏎
🧑💻Всі оптимізації швидкодії потребують вимірювань - вам потрібно контролювати що ви робите і бачити свої результати.
Як це зробити:
1️⃣ Перший варіант - поставити розширення React Developer Tools і використати вкладу Profile. В результаті ви отримаєте такий графік, як на зображенні, який покаже вам скільки часу займає рендер кожного елементу.
👉 Це зручно для пошуку "дорогих" рендерів і причин перерендеру.
2️⃣ Другий варіант - використати компонент React.Profiler який приймає id та колбек в який будуть передані всі вимірювання:
Також можна використати Performance API, але про нього буде в наступному дописі.
@reactbeginners
🧑💻Всі оптимізації швидкодії потребують вимірювань - вам потрібно контролювати що ви робите і бачити свої результати.
Як це зробити:
1️⃣ Перший варіант - поставити розширення React Developer Tools і використати вкладу Profile. В результаті ви отримаєте такий графік, як на зображенні, який покаже вам скільки часу займає рендер кожного елементу.
👉 Це зручно для пошуку "дорогих" рендерів і причин перерендеру.
2️⃣ Другий варіант - використати компонент React.Profiler який приймає id та колбек в який будуть передані всі вимірювання:
<Profiler👉 Цей варіант стане в нагоді коли ви почнете оптимізувати конкретний компонент, щоб бачити як ваші зміни впливають на швидкодію.
id={pId}
onRender={(_, phase, actualDuration) =>
console.log(phase, ' ', actualDuration)
}
>
Також можна використати Performance API, але про нього буде в наступному дописі.
@reactbeginners
- 👍 32
- 🔥 8
- ❤ 1
- ✍ 1
Post #331
2.06K
🏋️♀️Не ускладнюйте життя з useEffect🏋️♀️
😢 Ще раз переконався, що багато хто любить ускладнювати собі життя і код за допомогою useEffect, тому давайте знову повернемось до цієї теми
👀 Наприклад, маємо якийсь кастомний хук, в якому є ім'я та прізвище користувача, а нам потрібне ще й його повне ім'я.
Типове і не правильне рішення - використати
Насправді, все що нам треба - це вирахувати повне ім'я прямо в самому хуці (або компоненті)
const fullName =
👉 Для того, щоб не повторювати цю помилку достатньо запам'ятати, що похідні дані (ті які ми вираховуємо) потрібно не тримати в стейті, а вираховувати прямо в самій функції. А якщо ви побачите, що це займає забагато часу (і поміряєте!) - тоді вам може стати в нагоді хук
@reactbeginners
😢 Ще раз переконався, що багато хто любить ускладнювати собі життя і код за допомогою useEffect, тому давайте знову повернемось до цієї теми
👀 Наприклад, маємо якийсь кастомний хук, в якому є ім'я та прізвище користувача, а нам потрібне ще й його повне ім'я.
Типове і не правильне рішення - використати
useEffect та проміжний стейт:useEffect(() => {
setFullUserName(`${fName} ${sName}`);
}, [fName, sName]);
🤨 Такий код складніше читається, має більшу вірогідність помилки та на додачу ще й не ефективний оскільки викликає додатковий рендер.Насправді, все що нам треба - це вирахувати повне ім'я прямо в самому хуці (або компоненті)
const fullName =
${fName} ${sName}
👩🏫 Якщо дані користувача лежать в стейті, то як тільки вони зміняться - наш код буде викликаний знову і ми отримаємо нове повне ім'я. Все дуже просто і очевидно, але багато хто все одно додає зайвий effect 😊👉 Для того, щоб не повторювати цю помилку достатньо запам'ятати, що похідні дані (ті які ми вираховуємо) потрібно не тримати в стейті, а вираховувати прямо в самій функції. А якщо ви побачите, що це займає забагато часу (і поміряєте!) - тоді вам може стати в нагоді хук
useMemo
Чистого вам коду, бережіть себе і скоро побачимось!@reactbeginners
- ❤ 38
- 👍 19
- 🔥 3
Post #330
2.07K
💪Потихеньку повертаюся назад до роботи 💪
👓 Перше відео над яким будемо працювати - структура проекту в React, бо це дійсно важливо, хоча і дискусійно, м'яко кажучи.
👩🏫 Спробую описати як я бачу зручну структуру проекту, яка більш-менш безболісно скейлиться.
Скоро побачимось і бережіть себе.
👓 Перше відео над яким будемо працювати - структура проекту в React, бо це дійсно важливо, хоча і дискусійно, м'яко кажучи.
👩🏫 Спробую описати як я бачу зручну структуру проекту, яка більш-менш безболісно скейлиться.
Скоро побачимось і бережіть себе.
- ❤ 54
- 👍 16
- ❤🔥 3
- 🔥 3
Post #329
2.34K
Не знаю чи є хтось тут з Одеси, але тримайтеся і бережіть себе!
- ❤ 77
- 💔 15
- ❤🔥 2
- 🔥 1
Post #328
3.35K
Free React For Beginners Нове відео Next.JS та нові серверні компоненти вже опубліковано ❗️ Що таке серверні компоненти, навіщо вони потрібні, як їх використовувати - про все це ви дізнаєтесь з нового відео: Next.JS та серверні компоненти! 🧐 Відео вийшло: 1. Коротеньким - усього…
Next.JS та серверні компоненти тепер текстом на DOU
🔥 Для кого зручніше читати текст - виклав статтю про серверні компоненти на DOU.
👉 Запрошую до перегляду і коментарів.
🔥 Для кого зручніше читати текст - виклав статтю про серверні компоненти на DOU.
👉 Запрошую до перегляду і коментарів.
- ❤ 37
- 👍 10
- 🔥 3
Post #327
3.52K
Бачу вже 4ий проект який структурує проект за типом компонентів.
😢 Я думав що ця практика нарешті похована, але бачу вже четвертий проект, який намагається робити структуру наступного виду:
✍️ Замість цього - групуйте за функціональістю. Найпростіший варіант - по сторінкам. Рахуйте що одна сторінка - один незалежний модуль. І ховайте все що можливо в середині цього модуля (окрім очевидно загальних компонентів типу button/link)
👉 Це дасть вам незалежні модулі, які легко змінювати не боючись все зламати, і очевидний пул загальних компонентів.
😈 А як ні - прийду до кожного у вісні і буду нити поки не переробите!
П.С. Буде про це відео десь через місяць.
@reactbeginners
😢 Я думав що ця практика нарешті похована, але бачу вже четвертий проект, який намагається робити структуру наступного виду:
src/
/components
/layouts
/hooks
/context
/...
❗️Будь-ласка, не робіть так. Цей підхід не працює, якщо у вас більше ніж одна сторінка (або функціональний модуль). Ці теки розростаються, компоненти всередині починають хаотично залежати один від одного, ламається ліниве завантаження, складно розуміти що і як перевикористовувати. Я точно знаю про що говорю, бо я це проходив 6 років тому і прохожу зараз повторно, (бо якась веб студія вирішила що так воно краще)✍️ Замість цього - групуйте за функціональістю. Найпростіший варіант - по сторінкам. Рахуйте що одна сторінка - один незалежний модуль. І ховайте все що можливо в середині цього модуля (окрім очевидно загальних компонентів типу button/link)
👉 Це дасть вам незалежні модулі, які легко змінювати не боючись все зламати, і очевидний пул загальних компонентів.
😈 А як ні - прийду до кожного у вісні і буду нити поки не переробите!
П.С. Буде про це відео десь через місяць.
@reactbeginners
- 👍 92
- 😁 14
- ✍ 6
- ❤ 3
- 🤔 1
Post #326
2.79K
😢 Львів, мої співчуття
- 💔 95
- 🤯 5
Post #325
2.93K
Нове відео Next.JS та нові серверні компоненти вже опубліковано
❗️ Що таке серверні компоненти, навіщо вони потрібні, як їх використовувати - про все це ви дізнаєтесь з нового відео: Next.JS та серверні компоненти!
🧐 Відео вийшло:
1. Коротеньким - усього 11 хвилин,
2. Насиченим - теорія, враження і коротеньке демо
3. Не однозначним - детальніше у відео
❓А що ви думаєте з приводу серверних компонентів?
@reactbeginners
YouTube Next.JS та нові серверні компонети 13.4 - навіщо потрібні та як їх використовувати ❗ Що таке серверні компоненти, навіщо вони потрібні, як їх використовувати - про все це ви дізнаєтесь з нового відео про Next.JS та серверні компоненти!
Вступ
00:20 Навіщо потрібні серверні компоненти
03:10 Правила та обмеження серверних компонентів
08:47… ❗️ Що таке серверні компоненти, навіщо вони потрібні, як їх використовувати - про все це ви дізнаєтесь з нового відео: Next.JS та серверні компоненти!
🧐 Відео вийшло:
1. Коротеньким - усього 11 хвилин,
2. Насиченим - теорія, враження і коротеньке демо
3. Не однозначним - детальніше у відео
❓А що ви думаєте з приводу серверних компонентів?
@reactbeginners
- 👍 28
- 🔥 15
- ❤ 5
- ❤🔥 1
Post #323
2.93K
Поки я сиджу і намагаюся відпочивати* до нас на канал прийшли 🇦🇺австралійці!
😎 І кажуть такі - ми тут для розробників робимо розширення щоб допомагати їм писати усілякі гарні тести, швидко і зручно. Ну і можемо вам подарувати кілька ліцензій для ваших підписників (при чому без обмежень щодо комерційного використання). Хочете?
😅 І я такий - та звісно хочу, але ж це ще відео про тести ще робити треба...
❓І от питається в задачі - Хочете відео про тестування?
* Якщо не Щекавиця, то у ВТ буде відео перше відео про Next.
😎 І кажуть такі - ми тут для розробників робимо розширення щоб допомагати їм писати усілякі гарні тести, швидко і зручно. Ну і можемо вам подарувати кілька ліцензій для ваших підписників (при чому без обмежень щодо комерційного використання). Хочете?
😅 І я такий - та звісно хочу, але ж це ще відео про тести ще робити треба...
❓І от питається в задачі - Хочете відео про тестування?
* Якщо не Щекавиця, то у ВТ буде відео перше відео про Next.
- 👍 89
- ❤🔥 8
- 🔥 4
- ❤ 1
- 🍾 1
Post #322
2.9K
Наступні відео протягом літа
👉Next.JS - нові серверні компоненти.
Навіщо потрібні та особливості використання.
👉 З’єднуємо Front-End та Back-End правильно.
Транспорт, валідація, трансформація
👉Структура React проекту яка скейлиться
П.С. Ми живі, здорові, трохи відпочиваємо, трохи плануємо. Все дуже потихеньку, але рухається.
👉Next.JS - нові серверні компоненти.
Навіщо потрібні та особливості використання.
👉 З’єднуємо Front-End та Back-End правильно.
Транспорт, валідація, трансформація
👉Структура React проекту яка скейлиться
П.С. Ми живі, здорові, трохи відпочиваємо, трохи плануємо. Все дуже потихеньку, але рухається.
- 👍 56
- 🔥 30
Post #321
3.36K
Як бачите, тема з ППО дуже актуальна.
6600 пішло Сергію Бабічу на придбання мобільних будиночків для ППО
Бережіть себе!
Telegram Той самий Бабіч Йобана русня вкотре нагадала шо вона йобана русня, а я хочу нагадати вам, що у нас досі триває коштозбір на мобільні будиночки для одного з підрозділів ППО 138-ї бригади.
Від учора ви зібрали +11650 гривень! І просто мушу окремо подякувати за 6600 гривень… 6600 пішло Сергію Бабічу на придбання мобільних будиночків для ППО
Бережіть себе!
- 👍 19
- 🔥 10
- ❤ 3