Free React For Beginners

Хто не любить або не може дивитись довгі відео - є ось така опція: "Про bun За 4хвилини" Дуже коротко та по суті. ❤️Як завжди, вдячний за поширення і корисного перегляду!

Інструкція: як налаштувати Next.JS з нуля - prettier, eslint, jest, автоматизація ❓Хто цікавився як налаштувати Next.JS v13.4 з нуля - прошу ознайомитися з цією інструкцією. В програмі: - Prettier - EsLint - Автоматизація форматування з husky на commit - Jest і його автоматизація на push - Підказки для деплойменту Azure Мінімум води + готовий код. ❤️ Буду вдячний за поширення! @reactbeginners

Відредаговане відео про Bun вже готове для перегляду. 😅Повноцінно* React ми так і не запустили, зате за три хвилини написали примітивний скраппер та розіграли призи з попереднього збору. Таймінги: 0:00 Про Bun 06:10 Практичні експеременти 42:15 Розіграш призів * Але боком-скоком таки змогли) Завтра ще буде коротеньке відео підсумок, тож очікуйте. Всім гарного дня і бережіть себе.

Bun - випробовуємо новий runtime для JavaScript Коли: В понеділок, 11.09.23 о 19:00 Де: YouTube канал Програма: 👉 TypeScript 👉 Тести 👉 React Плюс проведемо розіграш призів за попередній збір 😊

Що ж шановні - це кінець тижня і гарний час сказати всім дякую. 👉 Дякую тим хто донатив по 50 гривень. Не буває маленьких донатів, а часом і 50 гривень буває важко знайти. 👉 Дякую тим хто донатив більше за довіру та щедрість. 👉 Дякую тим хто репостив і лайкав - не буває маленької підтримки. 🍺Особлива подяка BeerJS Житомир, якому, до-речі, виповнюється шість років, тож не забудьте їх поздоровити! ❤️ А ще хочу окремо подякувати за розуміння. За те що ніхто не написав, що "два дрони нічого не змінять". За те що ніхто не сказав - "чому я маю віддавати свої гроші, коли яйця по 17 гривень". За те, що ніхто не сказав що це не потрібно. Дякую всім вам! Тепер про результати: Зібрали: 49280 гривень Долучилося: 48 людей Найбільший донат: 13_000 гривень від пані Марини Д. Будь-ласка, вийди на зв'язок, тебе чекає книга Дугласа Крокфорда з його особистим підписом! Друге місце: - Ігор Ц. - 8_888 Третє місце: - Олексій Вил. - 5000 ❗️ Ігоре, Олексію - якщо є побажання щодо напису на дроні - прошу в ПП. Розіграш другої книжки - "Чистий код" Роберта Мартіна (до-речі видання 22 року, свіженьке), а також мерчу, буде наступного тижня, відео я викладу прямо сюди, тож очікуйте 😀 ✍️ Звіт буде обов'язково, як тільки буде підтверджено отримання дронів. Думаю теж до кінця тижня маємо впоратися. Ще раз дякую, бережіть себе і скоро побачимося.

😅 Скажу відверто - я не дуже вмію в анімацію. Максимум - це transition, keyframes то вже складно, а 3D анімація то взагалі. Отой куб що ви бачили - все на що я спроможний разом з гуглом 😁 😎На щастя, не всі такі слабенькі як я і, також, на щастя є люди які готові цим умінням ділитися. Тому, запрошую вас до того хто на цьому розуміється і може показати як це робиться за допомогою JS: DOU livecoding з Юрієм Артюхом. Створення 3D анімації 👉Подія відбудеться 12 вересня (вівторок) о 19:00 тут (телеграм канал) Приходьте, має бути цікаво!

Проміжні підсумки збору на 2 FPV для 82 ОДШБр ❤️ За першу добу ви зібрали 34_500 гривень, або 76%! Це дуже круті результати - фактично, півтора дрони вже є залишилось зовсім трохи. ❤️ Тепер по претендентах на книжку: 1️⃣ 8888 - Ігор Цв. (знаю) 2️⃣ 5000 Олексій Андрійович Вил. (не знаю 😢) 3️⃣ 2222 Ігор Ол. (знаю) Я думаю буде справедливо, якщо 2 та 3 місця зможуть також замовити напис на дроні, за бажанням звісно. Тому, Олексію, якщо ти це читаєш - напиши мені в ПМ будь-ласка. ❗️ Важливий момент - я ще не складав повний список благодійників, але вже бачу що багато хто переказує гроші без зазначення контактних даних. Якщо це навмисно - ОК, якщо просто забули - обов'язково мені напишіть! Можна просто в ПП. До-речі, дрони вже замовлені, тепер питання лише в оплаті і транспортуванні. А на фото - наша попередня доставка, яку ми робили на мій ДР. Всім добра, продовжуємо збирати далі, залишилось не багато.

Останній трюк з гіт 💡Окрім стандартних аліасів, гіт дозволяє робити свої , наприклад, якщо ви втомилися писати 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

Закінчу

Я не так часто роблю збори, тому прошу прочитати до кінця. У мене є колега - цілком собі звичайний React розробник, який так само як і я любить сноуборд і якого я знаю вже сім років. Але є один нюанс - сьогодні він воює у складі роти ударних безпілотників 82 ДШБ і зараз вони знаходяться на дуже і дуже зубастому напрямку. Як ви вже здогадалися з назви - їм потрібні дрони і бажано побільше. Якщо у них дрони є - вони можуть працювати. Якщо дронів немає - 🙅. Особливо актуально це під час наступу. Власне, якщо ви колись думали, як би прискорити наступ - цей збір саме про це. Я розумію що зараз у всіх з грішми не дуже, тому, на знак вдячності я пропоную три лоти, один з яких дуже особливий для мене. Перший лот - книга "JavaScript - сильні сторони", особисто підписана для мене її автором - Дугласом Крокфордом, легендою JavaScript, який колись відвідував Київ. Про нього достатньо сказати, що JSON форматом ми завдячуємо саме йому. Не думаю що таких книг, на сьогодні дуже багато. Другий лот - також книга - Чистий Код Роберта Мартіна, в цей раз без підпису. Але вона буде корисною для будь-якого розробника, в цьому у мене немає жодного сумніву. За бажанням можу підписати, хоч це навряд чи буде нести якусь цінність 😁 Третій лот - більше утилітарний, але теж корисний: чохол для ноуту 15'' + термочашка від Itera. ❗️Перший лот отримає той хто пожертвує найбільшу суму. ❗️Другий і третій лоти будуть розіграні серед усіх учасників хто внесе від 50 гривень. Кожні 50 гривень - додатковий шанс отримати подарунок. Банка ПБ: 4731185629296887 Будь-ласка, не забудьте вказати в коментарі до внеску контакт як з вами зв'язатися. Всім дякую за участь та поширення. Поширення також дуже важливе! @reactbeginners

Якщо вже мова зайшла про гіт - то ось ще один трюк 👉 Гіт має аліас для попередньої гілки: - Наприклад git checkout - поверне вас до попередньої гілки, а git merge - змерджить попередню гілку в поточну. Відповідно можна зробити такий трюк (повершелл) git checkout dev; git pull; git checkout -; git merge -; 💪 І все, за хвилину маємо оновлений дев і оновлену поточну гілку. Просто і без зайвих рухів @reactbeginnes

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

git reset HEAD~1

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

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

Розповідаю звідки пішли ноги, і чому ці ноги геть зовсім криві. ✍️ Як ви знаєте, в JS інкапсуляцію не завезли by design. Раніше навіть не було можливості робити приватні поля, тому всі писали _xxxx і молились аби ніхто такі поля просто так не чіпав. До речі, оця конструкція - функції, яка викликає сама себе (function () {})(); теж пішла з бажання сховати всі внутрішні змінні і не смітити ними в глобальному об'єкті window. 😊 З часом ситуація покращилася, з'явилися ES модулі, які автоматично ховають все, що не експортується і не додають свої змінні в window. Але, залишилась інша проблема - глобальність експорту. Якщо ви експортуєте якийсь шматок коду - імпортувати його може хто завгодно. А це погано, тому що ваш компонент можуть почати використовувати інші і от він уже приймає 100500 пропсів аби задовольнити усі примхи. 🧐Тому дехто вирішив вдаритися в крайнощі і почав ховати компоненти, в середині компонентів, тому що export звідти буквально не можливий. Такий собі спосіб сказати - цей компонент лише мій і навіть не думай його чіпати. Власне такі конструкції можна побачити в C#, коли клас створює під клас в середині себе і там це все цілком ОК і ніхто не дивується. 👉 Але з React є мааааанюнький такий нюанс розміром десь з Ейфелеву вежу: ❗️Коли React визначає, які зміни сталися в застосунку, він порівнює, в тому числі класи або функції компонентів. А, в цьому підході з інкапсуляцією, на кожен рендер буде створюватися новий клас або функція-компонент. Коли React таке бачить - він вважає зміни настільки значущими, що повністю видаляє старий компонент і монтує туди новий. Зрозуміло, що це не ефективно з точки зору роботи з браузером, але це ще пів біди. Другі "пів біди" полягають в тому, що стейт внутрішнього компоненту також знищується! Відповідно такі компоненти ще й фактично поламані! 😃 🤷 Ось такі ситуації виникають, коли хочеться як краще, але з бібліотекою до кінця не розібрався. Всім гарних вихідних і готуйте гроші на наступний тиждень. Буде збір і буде дуже крутий лот на розіграш (таких в Україні може штук 5 є) @reactbeginners

Приклад того як НЕ треба Як гадаєте, чому?

Нагадую - створювати компоненти в середині компонентів погана ідея. ✍️ Хоча це інкапсуляція (добро), але з точки зору реалізації React це зло, і воно суттєво переважує. Всі ж знають чому? П.М. На зображенні - оригінальна версія матрьошки - та яка з Японії.

Ну так і є)