[kobezzza]

компонент - это не биндинг с шаблоном, это модуль

Это всё понятно. Я же бывший Яндексоид, поэтому я всегда мыслю в категориях: модуль, класс, компонент. Мне React понравился сразу именно своей простотой и гибкостью, но его "шаблоны" - это шаг назад, поэтому я сразу же выкинул их

Что я имею ввиду, разложу по полочкам:

1) В терминах БЭМ каждый компонент можно описать как папочку:

b-button
  .. b-button.js (бизнес логика)
  .. b-button.styl (я использую Stylus)
  .. b-button.ss (я использую SS)
  .. b-button.json (тут описано от кого наследуется наш компонент и от кого зависит, чтобы не описывать это отдельно в каждом файле)

Поэтому первая задача SS в JSX - это вынесение шаблона в отдельный файл/ы.

2) Думаю многие из вас юзают АНБ при именование классов в CSS и используют Stylus для удобной работы с ним:

.b-input {
  &_style_warning {
    ...
  }

  &__wraper {
    ...
  }

  &__input {
    ...

    &_focused_true {
       ...
    }
  }
}

.b-select {
  @extend .b-input;
  ...
}

И SS полностью переносит концепцию Stylus в шаблоны:

- template bInput(@params)
   < .b-input[.&_style_warning]
     < .&__wrapper
       < .&__input[.&_focused_true]

- template bSelect(params) extends bInput
   ...

3) В SS встроены средства локализации на уровне синтаксиса, т.е. чтобы локализовать строку, то её достаточно взять в апострофы

- template foo()
  < h1.warning
     `Привет мир!`

4) Частый кейз, когда нам нужно определить ряд методов для шаблона, например, для генерации иконок (например, Font-Awesome)

- proto base->icon(name, opt_title)
  < i.fa.&-${name} title = ${opt_title}

- placeholder base()

И потом просто наследуемся от базового класса и юзаем эти методы.

5) Опциональный Jade-like синтаксис (синтаксис хоть и похож местами на Jade, но в целом другой, просто я хз как было его назвать)

Тупо меньше пишем


***

Теперь пример с React: реализуем 3 компонента:

1) i-base -- базовый компонент, где определяем общие методы и т.д.

i-base
  .. i-base.js
  .. i-base.styl
  .. i-base.ss
  .. i-base.json

class iBase extends React.Component {
  someMethod() {
    ...
  }
}

.i-base {
   ...
}

- template iBase.prototype.render()
  - proto icon(name, title)
    ...

  - proto logo(style)
   ...

2) b-input -- поле ввода

b-input
  .. b-input.js
  .. b-input.styl
  .. b-input.ss
  .. b-input.json

class bInput extends iBase {
   ...
}

.b-input {
   @extend .i-base
}

- template bInput.prototype.render() extends iBase.prototype.render

3) b-select - выпадающий список, естественный наследник b-input

Тут логика ясна.


***

Ну и напоследок пример компонента, который вызывает другие компоненты

b-upload

- template bUpload.prototype.render() extends iBase.prototype.render
  - block root
    < b-input value = { this.state.value }
    < b-button value = Отправить!

***

По сути я просто взял БЭМ (кто не в курсе, то читать немедленно) и натянул на реакт, и полученная архитектура очень удобна и управляема.

Сейчас я работаю над максимально бесшовной интеграцией SS с React, чтобы использование было очевидно и чисто.