Нагадую - створювати компоненти в середині компонентів погана ідея.

✍️ Хоча це інкапсуляція (добро), але з точки зору реалізації React це зло, і воно суттєво переважує.

Всі ж знають чому?

П.М. На зображенні - оригінальна версія матрьошки - та яка з Японії.

Приклад того як НЕ треба

Як гадаєте, чому?

Повна відповідь буде трохи пізніше

Розповідаю звідки пішли ноги, і чому ці ноги геть зовсім криві.

✍️ Як ви знаєте, в JS інкапсуляцію не завезли by design. Раніше навіть не було можливості робити приватні поля, тому всі писали _xxxx і молились аби ніхто такі поля просто так не чіпав.
До речі, оця конструкція - функції, яка викликає сама себе (function () {})(); теж пішла з бажання сховати всі внутрішні змінні і не смітити ними в глобальному об'єкті window.

😊 З часом ситуація покращилася, з'явилися ES модулі, які автоматично ховають все, що не експортується і не додають свої змінні в window. Але, залишилась інша проблема - глобальність експорту. Якщо ви експортуєте якийсь шматок коду - імпортувати його може хто завгодно. А це погано, тому що ваш компонент можуть почати використовувати інші і от він уже приймає 100500 пропсів аби задовольнити усі примхи.

🧐Тому дехто вирішив вдаритися в крайнощі і почав ховати компоненти, в середині компонентів, тому що export звідти буквально не можливий. Такий собі спосіб сказати - цей компонент лише мій і навіть не думай його чіпати. Власне такі конструкції можна побачити в C#, коли клас створює під клас в середині себе і там це все цілком ОК і ніхто не дивується.

👉 Але з React є мааааанюнький такий нюанс розміром десь з Ейфелеву вежу:

❗️Коли React визначає, які зміни сталися в застосунку, він порівнює, в тому числі класи або функції компонентів. А, в цьому підході з інкапсуляцією, на кожен рендер буде створюватися новий клас або функція-компонент. Коли React таке бачить - він вважає зміни настільки значущими, що повністю видаляє старий компонент і монтує туди новий. Зрозуміло, що це не ефективно з точки зору роботи з браузером, але це ще пів біди. Другі "пів біди" полягають в тому, що стейт внутрішнього компоненту також знищується! Відповідно такі компоненти ще й фактично поламані! 😃

🤷 Ось такі ситуації виникають, коли хочеться як краще, але з бібліотекою до кінця не розібрався.

Всім гарних вихідних і готуйте гроші на наступний тиждень. Буде збір і буде дуже крутий лот на розіграш (таких в Україні може штук 5 є)

@reactbeginners

Поки я деплою учбовий Next.JS застосунок на Azure, хочу вам показати один пост, який хоч і не стосується React, але дуже стосується нашого майбутнього.

Я дуже, дуже хочу щоб ми всі зрозуміли один простий факт:

- Або ми разом, або нас не буде.

Всім добра та сил.

👉 Відкотити останній коміт, який ще не запушив:

git reset HEAD~1

👩‍🏫 Ця команда видалить останній коміт, при цьому всі зміни які ви в ньому зробили залишаться. Буде стан наче ви зробили роботу, але ще не закомітили.

💡Може бути корисно якщо хочете додати щось в коміт або змінити текст, але amend використовувати не хочете.

П.М. І так, я задеплоїв)

Якщо вже мова зайшла про гіт - то ось ще один трюк

👉 Гіт має аліас для попередньої гілки: -

Наприклад git checkout - поверне вас до попередньої гілки, а git merge - змерджить попередню гілку в поточну. Відповідно можна зробити такий трюк (повершелл)

git checkout dev; git pull; git checkout -; git merge -;

💪 І все, за хвилину маємо оновлений дев і оновлену поточну гілку. Просто і без зайвих рухів

@reactbeginnes

Я не так часто роблю збори, тому прошу прочитати до кінця.

У мене є колега - цілком собі звичайний React розробник, який так само як і я любить сноуборд і якого я знаю вже сім років. Але є один нюанс - сьогодні він воює у складі роти ударних безпілотників 82 ОДШБр і зараз вони знаходяться на дуже і дуже зубастому напрямку.

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

Збираємо на два FPV дрони - 45_000 гривень до кінця наступного тижня

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

👉 Перший лот - книга "JavaScript - сильні сторони", особисто підписана для мене її автором - Дугласом Крокфордом, легендою JavaScript, який колись відвідував Київ. Про нього достатньо сказати, що JSON форматом ми завдячуємо саме йому. Не думаю що таких книг, на сьогодні дуже багато.

👉 Другий лот - також книга - Чистий Код Роберта Мартіна, в цей раз без підпису. Але вона буде корисною для будь-якого розробника, в цьому у мене немає жодного сумніву. За бажанням можу підписати, хоч це навряд чи буде нести якусь цінність 😁

👉 Третій лот - більше утилітарний, але теж корисний: чохол для ноуту 15'' + термочашка від Itera.

❗️Перший лот отримає той хто пожертвує найбільшу суму.
❗️Другий і третій лоти будуть розіграні серед усіх учасників хто внесе від 50 гривень. Кожні 50 гривень - додатковий шанс отримати подарунок.

ЗБІР ЗАКРИТО

Будь-ласка, не забудьте вказати в коментарі до внеску контакт як з вами зв'язатися.

Всім дякую за участь та поширення. Поширення також дуже важливе!
@reactbeginners

Останній трюк з гіт

💡Окрім стандартних аліасів, гіт дозволяє робити свої , наприклад, якщо ви втомилися писати checkout можна створити свій аліас:

git config alias.co checkout

💪Тепер вам достатнього написати git co feature/drones і ви перейдете на гілку feature/drones. Також ви можете додати параметер --global і тоді цей аліас буде доступний в усіх локальних репозиторіях. Є правда один нюанс - аліасом не можна поділитися через git, тому, можете викладати на gist. І людям користь і ви не втратите.

👉 Але, саме чудове в них те, що ми можемо поєднати декілька команд в один аліас. Наприклад, мою серію команд з попереднього посту:

git config --global alias.sync "!git checkout dev && git pull && git checkout - &&  git merge -"

😎І все! Тепер просто git sync і далі воно само, а ви можете пити каву)

Хіба це ж не краса? Якщо зацікавились - посилання на документацію, та посилання на більш детальний пост на ItJuniors про це

П.М. подивитись всі ваші аліаси можна в ./.git/config
П.М.М Сьогодні будуть проміжні результати збору - якщо коротко - ви неймовірні!

@reactbeginners

UPD: ЗБІР ЗАКРИТО!
Проміжні підсумки збору на 2 FPV для 82 ОДШБр

❤️ За першу добу ви зібрали 34_500 гривень, або 76%! Це дуже круті результати - фактично, півтора дрони вже є залишилось зовсім трохи. ❤️

Тепер по претендентах на книжку:

1️⃣ 8888 - Ігор Цв. (знаю)
2️⃣ 5000 Олексій Андрійович Вил. (не знаю 😢)
3️⃣ 2222 Ігор Ол. (знаю)

Я думаю буде справедливо, якщо 2 та 3 місця зможуть також замовити напис на дроні, за бажанням звісно.
Тому, Олексію, якщо ти це читаєш - напиши мені в ПМ будь-ласка.

❗️ Важливий момент - я ще не складав повний список благодійників, але вже бачу що багато хто переказує гроші без зазначення контактних даних. Якщо це навмисно - ОК, якщо просто забули - обов'язково мені напишіть! Можна просто в ПП.

До-речі, дрони вже замовлені, тепер питання лише в оплаті і транспортуванні. А на фото - наша попередня доставка, яку ми робили на мій ДР.

Всім добра, продовжуємо збирати далі, залишилось не багато.

😅 Скажу відверто - я не дуже вмію в анімацію. Максимум - це transition, keyframes то вже складно, а 3D анімація то взагалі. Отой куб що ви бачили - все на що я спроможний разом з гуглом 😁

😎На щастя, не всі такі слабенькі як я і, також, на щастя є люди які готові цим умінням ділитися. Тому, запрошую вас до того хто на цьому розуміється і може показати як це робиться за допомогою JS: DOU livecoding з Юрієм Артюхом. Створення 3D анімації

👉Подія відбудеться 12 вересня (вівторок) о 19:00 тут (телеграм канал)

Приходьте, має бути цікаво!

Що ж шановні - це кінець тижня і гарний час сказати всім дякую.

👉 Дякую тим хто донатив по 50 гривень. Не буває маленьких донатів, а часом і 50 гривень буває важко знайти.
👉 Дякую тим хто донатив більше за довіру та щедрість.
👉 Дякую тим хто репостив і лайкав - не буває маленької підтримки.

🍺Особлива подяка BeerJS Житомир, якому, до-речі, виповнюється шість років, тож не забудьте їх поздоровити!

❤️ А ще хочу окремо подякувати за розуміння. За те що ніхто не написав, що "два дрони нічого не змінять". За те що ніхто не сказав - "чому я маю віддавати свої гроші, коли яйця по 17 гривень". За те, що ніхто не сказав що це не потрібно. Дякую всім вам!

Тепер про результати:

Зібрали: 49280 гривень
Долучилося: 58 людей
Найбільший донат: 13_000 гривень від пані Марини Д. Будь-ласка, вийди на зв'язок, тебе чекає книга Дугласа Крокфорда з його особистим підписом!
Друге місце: - Ігор Ц. - 8_888
Третє місце: - Олексій Вил. - 5000

❗️ Ігоре, Олексію - якщо є побажання щодо напису на дроні - прошу в ПП.

Розіграш другої книжки - "Чистий код" Роберта Мартіна (до-речі видання 22 року, свіженьке), а також мерчу, буде наступного тижня, відео я викладу прямо сюди, тож очікуйте 😀

✍️ Звіт буде обов'язково, як тільки буде підтверджено отримання дронів. Думаю теж до кінця тижня маємо впоратися.

Ще раз дякую, бережіть себе і скоро побачимося.

Bun - випробовуємо новий runtime для JavaScript

Коли: В понеділок, 11.09.23 о 19:00
Де: YouTube канал
Програма:

👉 TypeScript
👉 Тести
👉 React

Плюс проведемо розіграш призів за попередній збір 😊

П.М. Дякую всім причетним за нову обкладинку)

Відредаговане відео про Bun вже готове для перегляду.

😅Повноцінно* React ми так і не запустили, зате за три хвилини написали примітивний скраппер та розіграли призи з попереднього збору.

Таймінги:

0:00 Про Bun
06:10 Практичні експерименти
42:15 Розіграш призів

* Але боком-скоком таки змогли)

Завтра ще буде коротеньке відео підсумок, тож очікуйте.

Всім гарного дня і бережіть себе.

Інструкція: Як налаштувати #NextJS з нуля - prettier, eslint, jest, автоматизація

❓Хто цікавився як налаштувати Next.JS v13.4 з нуля - прошу ознайомитися з цією інструкцією.

В програмі:

- Prettier
- EsLint
- Автоматизація форматування з husky на commit
- Jest і його автоматизація на push
- Підказки для деплойменту Azure

Мінімум води + готовий код (писав як для себе)

❤️ Буду вдячний за поширення!

@reactbeginners

Хто не любить або не може дивитись довгі відео - є ось така опція: "Про #Bun за 4 хвилини"

Дуже коротко та по суті.

❤️Як завжди, вдячний за поширення і корисного перегляду!

😊П'ятниця - час для гарних новин 😊

⭐️Зірки зійшлися (до-речі, не в останню чергу завдяки вам) і я буду виступати оффлайн на React+TS fwdays’23 з дуже цікавою темою:

👉 Складнощі формошльопства в 2023 році, або про не функціональні вимоги до сучасного фронт-енд застосунку.

Я спробую показати, що сучасний веб, зовсім трішки складніший ніж <form><input name="email"/></form> і має дуже і дуже багато чого важливого і цікавого.

Хто хоче побачити що в мене вийде - приєднуйтесь!

🔥Оопс, а в мене ще й є знижка на 15% на усі квитки))) Пишіть, не соромтеся!

❗️Зміна форматування файлу next.config.js може призвести до зміни в самому білді #NextJS

❓В задачі питається - ДЕ Я ТАК НАГРІШИВ?

Поки без подробиць, бо ще розбираємось, але схоже на trailing coma.

П.М. Все всім відправлено, чекаємо на звіт.