N причин, чтобы использовать Create React App

[comerc]

Недостаток конфигурации легко обойти, react-app-rewired прекрасен.

[tuchk4]

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

Есть еще — custom-react-scripts — это кастомная версия react-scripts.

create-react-app my-app --scripts-version custom-react-scripts

Здесь подробнее про custom-react-scirpts — Configure create-react-app without ejecting
Здесь можно почитать офф. инфу Document maintaining a fork of react-scripts as an alternative to ejecting #682

[comerc]

Не-не-не: custom-react-scripts — это форк, а react-app-rewired — врапер. Почувствуйте разницу.

[tuchk4]

да, форк react-scripts (не create-react-app), и этот подход официально поддерживается, я кидал ссылку на тред.
И это как только будут новые фичи в react-scripts — они так же будут и тут.

[raveclassic]

А чем вам css-модули не угодили?

[tuchk4]

ничем. CSS modules отличный инструмент, но в паре с CRA не работает

[comerc]

Посмотрите тут: как прикрутить Styled-JSX и настроить абсолютные пути для импорта.

[tuchk4]

посмотреть что?

[comerc]

как прикрутить Styled-JSX и настроить абсолютные пути для импорта

[tuchk4]

так там нету ничего про CRA кроме ссылки на RAW

[comerc]

Абсолютные пути в импорте

Работают относительно папки src, пример:

import MyComponent from 'components/MyComponent'

Конфигурация babel-plugin-module-resolver

['module-resolver', { 'root': ['src'] }]

Настройка WebStorm

Для папки src в контекстом меню выполнить: Mark Directory as > Resource Root.

Настройка Atom

• Установить плагин js-hyperclick.
• Для доменных компонентов прописывать в package.json путь до src:
  

  "moduleRoots": ["../.."]

[comerc]

Собственно, я больше хотел обратить внимание на Styled-JSX.

[comerc]

Интересно почитать про велосипедостроение на тему SSR для CRA. :)

[VasilioRuzanni]

Поддерживаю :) Ну, на самом деле велосипедов там нет, поскольку поддержка нулевая.

[comerc]

Не видишь суслика? А он там есть.

[tuchk4]

пока не поддерживается, но уже давно есть PR Export render function #1292 и теоретически он попадет в релиз 0.10.0

[DmitryOlkhovoi]

cra побоку как ты делаешь ssr в случае с redux. Все банально при любом раскладе — определить экшены, выполнить, отрендерить, влить стор в html и распарсить на фронте

[comerc]

Покажите код :)

[VasilioRuzanni]

Да вообще как здрасьте. Как вывести космический корабль на орбиту? Да все банально при любом раскладе — определить траекторию, спроектировать корабль (незначительная мелочь), построить его, запустить двигатели и произвести взлет.

Конечно, Redux — не «rocket science», но за этим вот «выполнить экшены» — куча тех еще компромиссов и ухищрений.

[comerc]

Ну разве что немного подумать, как посадить первую ступень на плавучую платформу :)

[TheShock]

"start": "cross-env NODE_PATH=src/scripts react-scripts start"

И как такие костылищи прикажете поддерживать IDE?
Красивым кодом они это еще называют.

[comerc]

Развешивание ярлыков. У меня есть ответы для Atom и WebStorm, например.

[TheShock]

И вы их тут не напишите? Тайное знание?

[comerc]

Написал ранее, см. выше.

[bano-notit]

В конце концов всё свелось к такому:

Это так классно! Из коробки можно делать почти всё! Но если вы хотите чего-то большего, то делайте eject, но если сделаете, то перестаёте обновляться, так что лучше не eject'ить. Но если всё же хотите что-то новенькое, то можете костыльнуть так и вот так и у вас будет почти то же самое, что и с CRA, но это будет работать немного не так.

Лично для меня не является аргументом

Лишние конфиги и лишний код

отсутствуют webpack.config, нет кучи *rc-файлов и зависимостей в package.json.

Не знаю как Вы, а я вот для себя сделал свой собственный шаблончик, расковыряв, помоему, ёменовский. Там у меня и все красивости и все нужные мне фичи есть. А если нужна ещё какая-то, то я просто в конфигах эту фичу поправляю. Не люблю я, когда моими конфигами заведует кто-то другой. Мне нравится когда я сам знаю как всё работает и сам настроил так, чтобы в этом моменте не было лишней информации, а в этом была нужная.

[visortelle]

React-create-app безусловно крутая штука что бы быстро стартануть новый проект.

Вот еще одна, но с одним приятным отличием — сразу получаете sandbox и возможность документирования компонентов в маркдауне https://github.com/OpusCapitaBES/js-react-showroom-client

[Anarions]

А как этим пользоваться — держать отдельным приложением куда выносятся все компоненты из других проектов, или прикручивать к каждому проекту?

[visortelle]

Сейчас удобнее к каждому. Отдельным приложением тоже можно, но это требует особого оформления пакетов — что бы файлы доки попадали в npm пакет + компоненты по своим именам торчали из main файла (бандла) пакета. Ведутся работы над оптимизацией этого варианта.

[edtoken]

Не понимаю, почему многие кто делают какие-то boilerplate с webpack делают webpack.dev.config и webpack.prod.config, хотя реально 80% файла одинаковые, более того, нужно думать о том, что ты поддерживаешь 2 файла, вместо 1, а если это еще деплоить в Docker и на разные environment (local, test-*, stage, prod) это получается 2 файла костылей.

п.с. в своих проектах это всегда 1 файл.

[raveclassic]

Чтобы не городить ветки ифов, очевидно. У нас 5 конфигов — общий, вайтлейблинг и расширяющие их: дев, прод и сторибук. Различия везде есть, и вместо ветвей условий мы используем композицию маленьких кусочков.

[wa_Nadoo]

А можно подробней, что выносится в отдельные dev/prod конфиги? Я использую общий конфиг на все энвайрменты, возможно ваши примеры позволят мне переосмыслить подход.

[raveclassic]

В основном для prod это всякие DefinePlugin'ы, минифаеры, оптимизаторы, экстракторы. Для dev — HMR, другие дефайны, настройки проксей и т.п.

[Alternator]

Использую модуль webpack-config
Позволяет вынести общую часть в базовый конфиг, а в конкретных конфигах его расширять
У меня это расширение большей частью сводится к редактированию DefinePlugin

Кроме того можно настройки редко используемых(либо опциональных) плагинов вынести в отдельные файлы, и подключать/отключать одной строчкой
Например unused-files-webpack-plugin, webpack-bundle-analyzer для локальной работы/анализа
Настроенный UglifyJsPlugin только для серверных сборок

Как итог, в файле под каждое окружение находится его более конкретное описание, отличающее его от других конфигов, и при этом без if-ов в неожиданных местах