Создаем CLI-приложение с помощью React.js

[hamMElion]

Нет, это не сон и не первоапрельская шутка. Я действительно вижу приложение для командной строки на реакте... Я озадачен до глубины души

[faiwer]

React по сути состоит из двух частей:

• сам движок react, который ничего не знает ни о DOM, ни и об окружении в целом
• пакеты вроде react-dom, которые используя API движка работают с нужным окружением

Так что в принципе нет ничего сильно сложного с тем, чтобы сделать CLI-UI на React под nodeJS. Можно даже попробовать скрестить ужа с ежом взять какой-нибудь замороченный UI-CLI Toolkit и написать для него renderer-прослойку.

Я лет 5 назад взял какую-то популярную библиотеку под NodeJS и в ней чего только не было. И всякие диалоги, и окна, кнопки, и кажется даже какие-то layout схемы.

Но подключение React прослойки, конечно же, не избавит от необходимости вникать в этот UI Toolkit.

[dev_uska]

При разработке CLI возникают те же проблемы, что и при разработке GUI. React создан для решения этих проблем. И в статье неплохо показано, что подход рабочий + приведены примеры живых и достаточно сложных CLI-приложений, которые используют этот же подход. Так в чем проблема? Под UI на React "бекенд" можно хоть на Haskell писать, если проблема в этом.

[MentalBlood]

Фронтенд еще никогда не был настолько суров

[Ritan]

Теперь ждём бум консольных приложений, использующих больше гигабайта памяти и требующих 30 секунд на запуск

[namikiri]

Вот знаете, меня порой напрягает, что Powershell показывает приглашение для ввода команд с задержкой 200мс, а тут это… Нет, спасибо, такой прогресс нам не нужен.

[Ritan]

По той же причине отказался от zsh с плагинами - очень ощутимая задержка приглашения

[iliazeus]

Для примера вот несколько популярных приложений, сделанных с помощью React и Ink:

- Jest

Не вижу у него в dependencies ни React, ни Ink: https://github.com/facebook/jest/blob/main/package.json

- Gatsby

Не вижу у него в dependencies ни React, ни Ink: https://github.com/gatsbyjs/gatsby/blob/master/package.json

- Typescript

Не вижу у него в dependencies ни React, ни Ink: https://github.com/microsoft/TypeScript/blob/main/package.json

Возможно, я не туда смотрю?

[prognosis]

В гэтсби вроде бы есть. Не туда, но смысл тот же https://github.com/facebook/jest/blob/main/packages/jest-cli/package.json . С джестом количество установок было бы совсем другим.

[matheu042]

Я могу быть не прав, но работа useEffect здесь как-то странно реализована или неверно использована. Вторым параметром useEffect передается сущность, изменение которой влечет работу useEffect'а, то есть триггерит. Если указать пустой массив в качестве этого параметра, то useEffect отработает при первой отрисовке компонента, но тут не передали ничего, поэтому я немного не понимаю в какой момент срабатывает useEffect. Если предположить, что при изменении состояния компонента App, тогда образовывается infinite loop, т.к. useEffect меняет состояние. Просьба, кто знает принцип работы useEffect в ink пояснить его использование. А так спасибо автору, отличная статья) Как раз искал недавно что-то подобное.

[faiwer]

Если deps не указаны, то useEffect срабатывает на каждый рендер. И да возможен вечный loop. Но setState ничего не сделает если newValue === oldValue. Код, конечно же, кривой. Должно быть примерно так:

const [countryInfo] = wcc.getCountryDetailsByName(country);

React.useEffect(() => {
  setCapital(countryInfo.capital);
  setCurrency(countryInfo.currency);
  setPhone(countryInfo.phone_code);
}, [countryInfo]);

[faiwer]

Добавлю, что если countryInfo собирается всегда с нуля (т.е. всегда новый объект возвращается), то тогда даже так:

}, [i.capital, i.currency, i.phone_code]);

[matheu042]

Спасибо за развернутый ответ, примерно так это и представлял.

[casnerano]

Простите, но зачем ?

У каждого инструмента должны быть область применения, в которой она лучше подходит для решения своих задач.

Если для личных экспериментов - забавы ради,
то наверное, стоит в таких статьях оставлять соответствующее примечание.

Начинающие frontend разработчики сейчас подумают о страшных вещах.. уже не начали это делать))