TGViewer
Жабаскрипт (веде Віктор Турський) Жабаскрипт (веде Віктор Турський) @jabascript · 4.73K subscribers
Post #357 5.86K
Gemini CLI та Claude Code написані на React 🤯
Gemini CLI та Claude Code - це інструменти, які працюють у командному рядку, але водночас вони написані на React. Як це можливо?

✅ Власні рендерери
React надає зручну абстракцію для побудови інтерфейсів. Netflix була однією з компаній, яка почала використовувати React для рендерингу своїх інтерфейсів не для браузера, а для телевізорів. У той час їм ще доводилося патчити React (пам'ятаю, як мене вразила їхня доповідь). Сьогодні ж рендерери React абстраговані, що надає значну гнучкість. Наприклад, ми маємо окремий рендерер для браузера - ReactDOM, а також рендерер для мобільних платформ - React Native. Але їх значно більше https://github.com/chentsulin/awesome-react-renderer

✅ Ink
Оскільки рендерери тепер абстраговані, можна створити рендерер і під CLI. Існує чудовий проєкт від українського інженера - Ink (https://github.com/vadimdemedes/ink) , який дозволяє писати CLI-інтерфейси на React. Саме його використовують Google, Anthropic, OpenAI та багато інших великих компаній. Але це ще не все: Ink створює адаптивні CLI-інтерфейси й підтримує Flexbox. Але як це працює?

✅ Yoga
Коли Facebook створював React Native, вони хотіли, щоб розробка мобільних застосунків була схожою на створення вебдодатків. Проблема полягала в тому, що візуальні компоненти в iOS та Android за замовчуванням позиціюються абсолютно (position: absolute). Хоча для вирішення цієї проблеми існують різні підходи, у браузері є така зручна річ, як CSS Flexbox, що дозволяє описувати адаптивну верстку в CSS, а браузер уже сам усе робить. Інженери Facebook, а точніше Крістофер Шедо (vjeux), вирішили створити рушій для верстки на C++, який би отримував на вхід Flexbox-макет, а на виході видавав для кожного елемента абсолютну позицію та розміри. Так і з'явилася Yoga (https://yogalayout.dev/). Пам'ятаю доповідь vjeux про те, як вони писали автоматизовані тести для Yoga, порівнюючи результат роботи бібліотеки з тим, що рендерить браузер. Таким чином, Yoga працює під капотом як у React Native, так і в Ink.

Я ніби за цим всім стежу дуже давно, але мене все одно вражає, як воно все збирається зі шматочків завдяки гарно спроектованим абстракціям. А як вам?
GitHub GitHub - chentsulin/awesome-react-renderer: Awesome list of React Renderer Awesome list of React Renderer. Contribute to chentsulin/awesome-react-renderer development by creating an account on GitHub.
  • 🔥 146
  • 👍 13
  • ❤ 10
  • 👌 5
  • 🤮 1
  • 🙉 1
More from @jabascript
  1. Sep 30, 2026Ну шо... https://youtu.be/I5_D15gCDDQ
  2. Sep 29, 2026🏎️🏁Забирайте трофеї й знову нові тижневі челенджі 🏎️🏁
  3. Sep 26, 2026"Найкраща мова програмування - англійська" DHH Зараз багатьом підгорає від останньої допов…
  4. Sep 22, 2026Забирайте трофеї й знову нові тижневі челенджі 🏎️🏁
  5. Sep 14, 2026Втомилися чекати на дашборди? Не знаєте, як тестувати AI-агентів? Або цікавитесь, як працю…
  6. Sep 14, 2026Понеділок й нові челенджі вже доступні 🏁🏎️ 👉 Поміняв систему розподілу призів, щоб не б…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →