Создание npm пакета React компонентов на базе create-react-app

[@ChALkeRx]

"es2015", "react", "stage-0"

Очень странный набор, ну или информация устаревшая.

1. Что конкретно из stage-0 вы используете?
2. На текущий день есть es2016 и es2017.

[@lokhmakov]

Из «stage-0» не используется ничего, сделано только для включения всего набора stage.

В боевых условиях: «stage-2», «react».

[@comerc]

yarn run eject — в этом месте уже страшно :)

[@lokhmakov]

Для слабонервных есть альтернативы! ))

https://github.com/facebookincubator/create-react-app/issues/682

[@comerc]

Ага, react-app-rewired уже заюзал для подключения прекрасного пакета Styled JSX:

Теперь CSS-блоки живут внутри файлов компонентов естественным для себя образом — в CSS-формате (против инлайн-стилей JS-объектов). И не нужно беспокоиться за глобальную область видимости.

[@lokhmakov]

Мы используем для работы с CSS https://github.com/kriasoft/isomorphic-style-loader

Который добавляет и убирает CSS в зависимости от того смонтирован компонент или нет (SSR в комплекте), примерно так:

class YourComponent extends React.Component {
  ...
}

import withStyles           from 'isomorphic-style-loader/lib/withStyles'
import s                    from './Root.css'

import { compose }          from 'redux'

export default compose(
  withStyles(s),
)(YourComponent)

[@lokhmakov]

Так же можно обратить внимание на react-css-themr, который позволяет полностью переопределять стили компонента путем задания другого css.

[@lokhmakov]

Потестировал Styled JSX и сходу не нашел варианта реализации комплексных селекторов:

.root {
}

.root > div {
}

`root > div` не работает

[@fr_ant]

src/node_modules/components/

а зачем в node_modules то складывать?

[@lokhmakov]

После длительной дискуссии `src/node_modules` в `create-react-app` выбрано лучшим решением для абсолютных импортов.

Для создания библиотеки это так же позволяет решить задачу разделения демонстрационного приложения в стандартной структуре, а самого кода библиотеки в `src/node_modules`.

[@lokhmakov]

Вторая статья «Full isomorphic create-react-app + SSR + npm packed shared components with CSS»

Чуть позже выложу на Хабре.

[@comerc]

Чем больше сдадим, тем лучше! :)

[@lokhmakov]

К счастью сдаю сам себе — поэтому все с удовольствием! )