Разрабатываем React-компоненты многократного использования

[UbuRus]

Блин, все ждал когда капитан очевидность передаст слово и нам расскажут как писать те самые тупые компоненты чтобы они встраивались в любую верстку, имели темы, расширяемость и при этом чтобы их легко было эволюционировать, и т.д. и т.п.

[Mihail72]

Попробуйте оформлять паки компонент, в которых отдельно описываете состояние и поведение.

Плюс вы можете использвоать эмуляторы view port a la такое addon-viewport

[vintage]

Меня часто спрашивают, как же подобная задача решается в $mol, где все компоненты умные. Думаю вам в Единой Фронтальной Системе тоже будет не безынтересно это узнать.

Итак, берём реализацию ToDoMVC. Всё приложение — это один компонент $mol_app_todomvc: https://github.com/eigenmethod/mol/tree/master/app/todomvc.

Если заглянуть в код, то можно обнаружить, что работа с задачами ведётся через два свойства:

• task_ids( next? : number[] ) : number[] — список идентификаторов задач: https://github.com/eigenmethod/mol/blob/master/app/todomvc/todomvc.view.ts#L20
• task( id : number , next? : $mol_app_todomvc_task ) — свойства задачи по идентификатору: https://github.com/eigenmethod/mol/blob/master/app/todomvc/todomvc.view.ts#L92

Оба свойства полиморфные, то есть через них можно как читать данные, так и писать.

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

Заголовок спойлера

<= Todo_widget $mol_app_todomvc
    task_ids?val <=> task_ids?val /
    task!id?val <=> task!id?val *
        title \
        completed false

А теперь, добавим нашу логику. Например, загрузим список задач из json файла:

Заголовок спойлера

tasks() : $mol_app_todomvc_task[] {
    return this.$.$mol_http.resource( 'tasks.json' ).json() 
}

task_ids() {
    return Object.keys( this.tasks() )
}

task( id : number ) {
    return this.tasks()[ id ]
}

Или что-нибудь по сложнее — будем и читать и писать в файл, через WebDav:

Заголовок спойлера

tasks( next? : $mol_app_todomvc_task[] ) {
    return this.$.$mol_webdav.item( 'tasks.json' ).json( next )
}

task_ids( next? : number[] ) {
    return Object.keys( this.tasks( next ? next.map( id => this.task( id ) ) : undefined ) )
}

task( id : number , next? : $mol_app_todomvc_task ) {
    return this.tasks( next )[ id ]
}

Да, и это всё. Пока данные загружаются в компоненте автоматически будет показываться индикатор загрузки, хотя изначально он вполне себе синхронно работал с локальным хранилищем.

[vintage]

В js с json все же работать проще. Хотя, конечно, убивает, что нельзя сказать "у вас ошибка на такой-то строке". Е4х, к сожалению, все.