30.08.2015, 10:50
|
|
Профессор
|
|
Регистрация: 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.
|
|
30.08.2015, 15:36
|
|
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
Сообщение от Lemme
|
Angular vs react + flux? Ваш опыт, советы?
|
обе (или оба как кому нравиться) - распиаренные продукты известных брендов
ни то ни другое
Обзоры фреймворков, библиотек, компонентов и прочего
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
30.08.2015, 15:41
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
nerv_, топик уже читал=)
Цитата:
|
Обзоры фреймворков, библиотек, компонентов и прочего
|
Оба это само собой, но мне было интересно, что выбрать как первый fw, но уже определился=). Все равно спасибо=)
|
|
30.08.2015, 15:57
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Сообщение от Erolast
|
Почему?
|
Я сторонник разделения шаблонов и js кода.
|
|
30.08.2015, 16:03
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
tsigel, ага, именно это меня и смутило в jsx ;D
Но если смотреть на React, как на "представление", то jsx вполне разумен и даже удобен, ибо видно, за что отвечает этот класс и.т.д
Но опять же, если класс будет раза в 2-3 больше, чем этот.
Angular vs react+flux (помогите выбрать), а он обязательно будет, то будет громоздко
|
|
30.08.2015, 16:15
|
|
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
Сообщение от Lemme
|
топик уже читал
|
я дал ссылку на пост, а не на топик
В след. раз я не буду настолько любезен указывать на очевидные вещи.
Сообщение от tsigel
|
Я сторонник разделения шаблонов и js кода.
|
и я. Тут был "срач" на эту и около нее темы.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
30.08.2015, 17:11
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
nerv_, да, имел ввиду пост).
|
|
31.08.2015, 10:29
|
Профессор
|
|
Регистрация: 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 строк, то получается давольно аккуратный код, но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.
|
|
31.08.2015, 10:41
|
|
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
Сообщение от tsigel
|
но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.
|
и с болью верстается
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
31.08.2015, 11:38
|
|
Профессор
|
|
Регистрация: 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.
|
|
|
|