Понеділок, 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

Любі друзі, перестаньте мучитися і мучити інших (І я зараз не про ввійти в айті).

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

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

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

Пішов страждати далі, ваш @reactbeginners

А ну давайте маленький тестик

Як ви знаєте, в #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 рази - 🔥

З вас смайлики, з мене пояснення)

Почнемо з короткого демо того, скільки разів буде перерендерений наш текстовий компонент😉

А от чому вийшла саме така кількість - питання набагато цікавіше)

То ж чому один раз? На справді, все досить просто

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

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

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

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

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

@reactbeginners

😍 Отак от - TypeScript мова року за темпами зростання популярності

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

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

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

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

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

@reactbeginners

Робили давненько і щось захотілося мені повторити, в світлі останніх подій.

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

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

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

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

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

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

Побачимося завтра

Тут пан Едуард, під відео про Next задав гарне запитання:

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

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

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

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

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

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

Що думаєте з цього приводу?

З реєстрацій я бачу що зброя зараз не на часі)

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

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

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

Друзі, запускаю в пілотному режимі (два тижні) календлі

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

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

Як проведемо, буду бачити що далі.

🥰Всі слоти на пілот закрили. Але ж і питання ви ставите, мушу вам сказати. Доведеться на вихідних трохи готуватися 😅

Хочу подякувати усім військовим, волонтерам та тим не байдужим хто підтримує наші ЗСУ. Ви зробили цей день можливим.

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

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

.

Мої розширення до 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

Всім привіт, завтра, в середу, о 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

Не можу не привітати з перемогою, цілком заслуженою!

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

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

Пропоную відсвяткувати цю нагороду донатом на наш збір на дрон ;)

Вчора вийшли два відео про #NextJs

Хто ще не дивився - подивіться і поставте лайк, бо схоже навіть ютуб Next не любить 😀

CSS - теорія
СSS - практика

Наступне відео буде про роутинг, має бути цікавішим. А практику я думаю зробити по всьому пройденому матеріалу в прямому ефірі.