В смысле, почему нельзя дождаться загрузки данных перед встраиванием компонента? Потому что асинхронны данные, а не компонент. Иными словами: если я приказал компоненту отрендериться, то я ожидаю, что он сразу появится в DOM, и меня абсолютно не волнует, подгружается ли откуда-то его содержимое или нет.
Сравни с элементом img: когда ты добавляешь его в DOM, то он оказывается там сразу, а картинка появляется уже потом, когда будет сделан запрос к серверу; до тех пор же, например, можно показать какой-нибудь прелоадер.

cyber,
С реактом обычно используют flux или что-то похожее.

Думаю, нет. А вообще - хз, лучше пусть сам Гозар объяснит что имел ввиду)

P.S. тоже слаб в паттернах

Erolast,
Попробовал, выглядит значительно лучше. Спасибо)

Ок, понял.

React без flux использовать смысла нет.

Без flux он становится громоздким и переусложненным шаблонизатором. Гораздо лучше тогда использовать Snakeskin и написать свою архитектуру без висящих в тени методов на 150 кб.

Если думать о React как о node с его loop циклами то то, что ты пытался сделать в начале с await будет вешать петлю и поломает всю "сильную" идею реакта. Хотя в последнее время я React начинаю немного не долюбливать из-за сложности управления всем этим добром. Пока идея потока не войдет в голову прочно, можно много косяков наделать :) А без потока React "громоздкий шаблонизатор" основанный на компонентах.

Что такое flux? Для тех кто в танке?

cyber,
от жеж лентяй)
http://habrahabr.ru/post/246959/
http://tftf.ru/stati/javascript/reac...90/obzor_flux/

Gozar,
Да, тоже бывают такие мысли.

Я ж говорю, я просто экспериментирую)

Safort, спасибо)

Кто то использовал Refluxjs? У меня вопрос, там с es6(классами) совсем беда?

Сколько ни смотрю на Реакт, одного не могу понять: почему этот виртуальный ДОМ так нахваливают. Не холивара ради, просто, правда, не понимаю. Получается, что они перед изменением вьюхи сверяют её с виртуальным представлением и меняют только то, что обновилось. Но чем это лучше dirty-check?

Может и ничем. В React есть хитрый механизм(добавление ключей) оптимизирующий проверки вирт. DOM, сильно влияющий на скорость. Если в твоём dirty-check есть такие же оптимизации, то он может работать быстрее React. ;)

Скажу по секрету на React можно писать так, что он будет тормозить.

Zaveshanie, ну я не сравниваю dirty-check с виртуальным домом, я, скорее, хочу понять, чем он лучше отвутствия всяких проверок.

FINoM, лол вы ребят путаете рендеринг и датабиндинг)

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


вот какую архитектуру щас делаю

Mаxmaxmаximus, а по теме можешь что-то сказать?

разбираюсь с рекатом, сейчас читаю эту статью https://habrahabr.ru/company/mailru/blog/303456/ , не могу понять откуда взялось свойство props https://github.com/teropa/redux-voti...nents/Vote.jsx ??

что такое props
https://facebook.github.io/react/doc...ing-props.html

Откуда в компоненте Vote props
https://github.com/teropa/redux-voti...Voting.jsx#L14

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

cyber, жесть, т.е middleware пугают??

Это с redux-thunk, в большей степени этого middleware хватает для асинхронщины, да и выглядит он банально. https://github.com/gaearon/redux-thu...r/src/index.js

вся суть redux-thunk (без redux)

const dispatch = action => {
  // а это и есть вся суть redux thunk
  if (typeof action === 'function') {
    return action(dispatch) 
  }
  
  // это вместо next(action)
  console.log(action)
}

const syncAction = message => message

const asyncAction = message => dispatch => {
  setTimeout(() => {
  	dispatch(syncAction(message))
  }, 1000)
}

dispatch(syncAction('foo'))
dispatch(asyncAction('bar'))

а вот пример (из доки)
https://github.com/gaearon/redux-thunk#motivation

сейчас вроде как становится популярный mobx

Lemme, меня больше смущает что то такое

store.dispatch(fetchPosts('reactjs')).then(() =>
  console.log(store.getState())
)

cyber, это api redux'a, если использовать redux с react'ом, то такого не будет.

import { connect } from 'react-redux'
import fetchPosts from 'path/to/actions'

@connect(({ posts }) => posts) // map state to props
export default class Posts extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchPosts('reactjs'))
  }
  
  render = () => (
    <ul>
      {this.props.posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

Lemme, я так понимаю ты сам используюешь react + redux, с какими проблемами в архитектуре ты чаще всего сталкуешся ?
Для чего например могут понадобится костыли?

cyber, давно были траблы с сокетами, т.е было непонятно, как хранить соединение, как это соединение расшарить между компонентами и подключаться при необходимости, как вызывать события и.т.д. Но сейчас, загуглив redux-socket, решений больше, чем нужно. Поэтому, основная проблема Redux'a - бойлерплейт, но и это решается с помощью того же redux-saga, но я не использовал.

Но, как говорят, сейчас врывается mobx, а redux постепенно отъезжает, но я его не пробовал, только мельком доку смотрел.

Как все запутанно)

cyber, это то, что я где-то читал, а мб mobx начали пиарить, кто его знает. Да и, если нужно что-то будет писать на реакте, буду использовать redux.

А в остальных случаях, лучше Vue :)

Мне сначало, нужно разобратся что к чему)
Что из себя представляет react + flux, react + redux, angular 2, а потом уже и можно на vue смотреть, а то я так сказать отстал от жизни)

В некоторых статьях видел писали что flux похож на MVC. Я может чего то еще не понимаю но это мне кажется бредом?

cyber,
в таких статьях надо очень внимательно выяснять у автора что он понимает под mvc (и что под flux раз уж такое дело).

cyber,
https://twitter.com/agento/status/790856622860013568

Makarov, ты о том что люди по разному понимают MVC?

cyber,
да, причем потрясающе по-разному. Как это видит фейсбук показано в их презентации, которую Вы уже наверняка смотрели впрчоем: https://facebook.github.io/flux/

Makarov, да смотрел, у каждого свой MVC ))

написал первое приложение в связке react + redux, если кому то не влом то сделайте code review https://bitbucket.org/CyBer_UA/react...simple-app/src )
P.s про immutable.js знаю, буду использовать в след проектах

cyber,
Так в пару случайных мест тыкнул (по сорцам, не собирал даже):
1. в babelrc одни пресеты, в package.json в зависимостях другие, в секции babel - третьи. Не запутаешься?)
2. <b>owner: </b> <img src={`${item.owner.avatar_url}.jpg`} width="50px" height="50px"/> Инлайнить размеры - айяйяй. css loader настраивать влом было?)
3. Я крайне рекомендую прописывать propTypes где это возможно

Ну и шутка в тему:
https://twitter.com/thomasfuchs/stat...75139253174273

Лол, еще шапку не везде убрал: (удалена шапка чтобы кто-то не получил по шапке))

это тестовый модуль, я скопировал откуда то, лень было руками.
ага)
спасибо))
*faceplam*
убери плиз из коммента, а то я могу получить по шапке, я перезалью репозиторий)
еще как в тему

cyber,
убрал

вернул, ссылку))

сейчас пишу не много на ангуляр 2, такое чувство что это реакт для мазахистов

написал 2 одинаковых приложения на react и angular 2, и там и там архитктура редукса
реакт https://bitbucket.org/CyBer_UA/react...simple-app/src
ангуляр 2 https://bitbucket.org/CyBer_UA/angul...simple-app/src

cyber,
у меня вот такое же ощущение сложилось (впрочем с ангуляром я только игрался, а реакт у меня в продакшне, возможно это "эффект утенка"). С другой стороны тайпскрипт явно заслуживает внимания и многие выбирают А. именно по принципу "что бы заюзать чтобы писать на тайпскрипте?"