Erolast, да эт я видел, но я уже привык =). Только одно мне непонятно, например.
Буду знать =)

Есть компонент..... Да пусть новости :D

<div>
	<article>
		<h2>News item #1</h2>
		<p>Lorem ipsum dolor sit amet</p>
	</article>
	<article>
		<h2>News item #2</h2>
		<p>Lorem ipsum dolor sit amet</p>
	</article>
</div>

Вот вывод этого дела (код не проверял, поэтому вдруг не работает, но, по идее, должен:D)

import React from 'react';

class NewsList extends React.Component {

	// 1) - Где это должно быть? =) По сути, оно не в рендере, поэтому можно и сюда запихнуть, но все же?=)
	getDataFromServer() {
		return [
			{id: 1, title: 'News item #1', snippet: 'Lorem ipsum dolor sit amet'},
			{id: 2, title: 'News item #2', snippet: 'Lorem ipsum dolor sit amet'}
		];
	}

	renderItem(item) {
		return (
			<article key={item.id}>
				<h2>{item.title}</h2>
				<p>{item.snippet}</p>
			</article>
		);
	}

	render() {
		let items = this.getDataFromServer().map(this.renderItem);

		return (
			<div>{items}</div>
		);
	}
}

// где то там, из компонентов собираем страничку ;)
export default NewsList;

Вопросы:

1) По сути, в этом классе должна быть только манипуляция DOM, да? Т.е данные с сервера я должен тащить уже с помощью flux, там же и обрабатывать, а тут только выводить.
2) Допустим, есть сущность "Новости", которая содержит всю инфу о новостях. Должен ли быть один компонент News, а в нем уже вывод полной новости и списка новостей? Либо это уже два разных компонента?

Пока все=)

p.s по сути, данный тред себя изжил, вопрос на него был получен, пора апать React'а тред ;)

p.s уехал, вернусь чарез часик, надеюсь на кучу постов с ответами :D

обе (или оба как кому нравиться) - распиаренные продукты известных брендов

ни то ни другое :)
http://javascript.ru/forum/offtopic/...tml#post369258

nerv_, топик уже читал=)
Оба это само собой, но мне было интересно, что выбрать как первый fw, но уже определился=). Все равно спасибо=)

Я сторонник разделения шаблонов и js кода.

tsigel, ага, именно это меня и смутило в jsx ;D
Но если смотреть на React, как на "представление", то jsx вполне разумен и даже удобен, ибо видно, за что отвечает этот класс и.т.д

Но опять же, если класс будет раза в 2-3 больше, чем этот.
http://javascript.ru/forum/misc/5799...tml#post386417, а он обязательно будет, то будет громоздко:(

я дал ссылку на пост, а не на топик :)
В след. раз я не буду настолько любезен указывать на очевидные вещи.

и я. Тут был "срач" на эту и около нее темы.

nerv_, да, имел ввиду пост).

Lemme,
Это все очень хорошо и замечательно выглядит на примере сложностью швабры, а вот в реальном проекте сложный шаблон превращается в огромную кучу говнокода. И тут появляются варианты. Например дробить на огромное количество мелких компонентов, что вообщем -то не плохо, но: я люблю чтобы весь код был покрыт доками и чтобы система всегда знала что надо класть в тот или иной метод (в частности очень люблю тайпскрипт), так вот с этим в jsx проблема. Ещё мы пробовали ООП подход, и всесто деления на компоненты делали объект. Что-то типа такого:

{

   render: () {
       return (
         <div>
             {this.getHeader()}
             {this.getContent()}
             {this.getFooter()}
         </div>
       )
   }

}

Когда методы умещаются в 7-8 строк, то получается давольно аккуратный код, но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.

и с болью верстается :)

tsigel, я это и имел введу, когда говорил
Тут должно было быть "троеточие" :D

У каждого компонента свой файл, если придерживаться методологии БЭМ.. Все разбито по компонентам aka блокам, компоненты собираются из компонентов=). Для маленьких проектов, глупо, сложно, нерационально, но для больших, имхо - единственное правильное решение, с точки зрения внесения изменений.


Банальный пример из Jade

//- navigation.jade
mixin navigation(items)
	.navigation
		each item in items
			a.navigation__link(href=item.url)
				= item.title

//- header.jade

include path/to/navigation-mixin

mixin header()
  .header
     +navigation([
	     {url: '#/page/1', title: 'link #1'},
	     {url: '#/page/2', title: 'link #2'},
	     {url: '#/page/3', title: 'link #3'},
	     {url: '#/page/4', title: 'link #4'},
	     {url: '#/page/5', title: 'link #5'}
     ]);

А это уже ужас=),

Но помимо всего, я согласен, что jsx ужасен :agree:

по моему, с болью верстается все, что верстается не целиком=)