Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.08.2015, 10:50
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Erolast, да эт я видел, но я уже привык =). Только одно мне непонятно, например.
Цитата:
Да, еще, касательно того кода, а не задачи: "use strict" в модулях ES6 писать нет смысла, они и так по дефолту в строгом режиме работают.
Буду знать =)

Есть компонент..... Да пусть новости
<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>


Вот вывод этого дела (код не проверял, поэтому вдруг не работает, но, по идее, должен)
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 уехал, вернусь чарез часик, надеюсь на кучу постов с ответами

Последний раз редактировалось Lemme, 30.08.2015 в 10:53.
Ответить с цитированием
  #12 (permalink)  
Старый 30.08.2015, 15:36
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Lemme
Angular vs react + flux? Ваш опыт, советы?
обе (или оба как кому нравиться) - распиаренные продукты известных брендов

ни то ни другое
Обзоры фреймворков, библиотек, компонентов и прочего
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #13 (permalink)  
Старый 30.08.2015, 15:41
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

nerv_, топик уже читал=)
Цитата:
Обзоры фреймворков, библиотек, компонентов и прочего
Оба это само собой, но мне было интересно, что выбрать как первый fw, но уже определился=). Все равно спасибо=)
Ответить с цитированием
  #14 (permalink)  
Старый 30.08.2015, 15:57
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Сообщение от Erolast
Почему?
Я сторонник разделения шаблонов и js кода.
Ответить с цитированием
  #15 (permalink)  
Старый 30.08.2015, 16:03
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

Но опять же, если класс будет раза в 2-3 больше, чем этот.
Angular vs react+flux (помогите выбрать), а он обязательно будет, то будет громоздко
Ответить с цитированием
  #16 (permalink)  
Старый 30.08.2015, 16:15
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

Сообщение от tsigel
Я сторонник разделения шаблонов и js кода.
и я. Тут был "срач" на эту и около нее темы.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #17 (permalink)  
Старый 30.08.2015, 17:11
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

nerv_, да, имел ввиду пост).
Ответить с цитированием
  #18 (permalink)  
Старый 31.08.2015, 10:29
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

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

{

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

}


Когда методы умещаются в 7-8 строк, то получается давольно аккуратный код, но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.
Ответить с цитированием
  #19 (permalink)  
Старый 31.08.2015, 10:41
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от tsigel
но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.
и с болью верстается
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #20 (permalink)  
Старый 31.08.2015, 11:38
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Цитата:
Это все очень хорошо и замечательно выглядит на примере сложностью швабры
tsigel, я это и имел введу, когда говорил
Цитата:
Но опять же, если класс будет раза в 2-3 больше, чем этот.
Тут должно было быть "троеточие"

Цитата:
Например дробить на огромное количество мелких компонентов, что вообщем -то не плохо
У каждого компонента свой файл, если придерживаться методологии БЭМ.. Все разбито по компонентам 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 ужасен

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

Последний раз редактировалось Lemme, 31.08.2015 в 11:48.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с Jquery запросом. как выбрать дочерний элемент сложенной структурой Keith Events/DOM/Window 4 12.05.2014 22:03
Помогите с чекбоксами Александр141 Элементы интерфейса 0 12.01.2013 21:18
помогите выбрать cyber AJAX и COMET 2 24.04.2012 20:34
выбрать и изменить стиль элемента. Помогите найти ошибку nabiullin11 Элементы интерфейса 16 02.09.2011 11:23
Помогите выбрать галерею :) idle Общие вопросы Javascript 1 16.03.2009 17:06