|
React'а тред
Думаю, можно создать отдельный тред для вопросов\трепни для этого чуда.
Мой первый вопрос - это "Как передавать состояние (или просто данные) компонентам React при серверной отрисовке?" У меня на сайте 2 запроса делается постоянно - это список страниц (меню) и настройки сайта пока решил сделать так, на примере страниц (это маршрут express): var detectNotFound = function (state) { var is404 = function (route) { return route.name == '404'; }; var isNotFound = state.routes.filter(is404).length > 0; return isNotFound; }; var getMarkup = function (req, data) { return new Promise(function (res, rej) { var location = req.url; Router.run(routes, location, function (Handler, state) { var isNotFound = detectNotFound(state); if (isNotFound) { rej(); } else { var handler = React.createElement(Handler, {flux: flux, data: data}); var markup = React.renderToString(handler); res(markup); } }); }); }; module.exports = function reactRoute_middleware (req, res, next) { Promise // Initial data .resolve({}) .then(function (data) { Page.findAll().then(function (pages) { data.pages = _.map(pages, function (page) { return { title: page.title, slug: page.slug }; }); return Promise.resolve(data); }) .then(function (data) { getMarkup(req, data).then(function (markup) { res.render('index', { title: 'Сайтуха', content: markup, data: data }); }, next); }) .catch(next); }); }; ну и в шаблоне это дело вывожу: Код:
extends layout хотелось бы сделать это без глобальной переменной |
Цитата:
Цитата:
React.__initial = {}; |
melky,
продолжая этот пост http://javascript.ru/forum/357828-post843.html Это понятно, но, получается, мне так и придётся передавать дополнительный аргумент-счётчик? Кстати, зачем ему нужен key если без него он и так нормально работал(хоть и выводил преды)? |
Цитата:
key нужен для оптимизации скорости отрисовки списков (без них он бы все удалил из dom и записал заново) |
melky,
спасибище за ответы) |
|
Цитата:
Цитата:
|
melky,
Зачем ты переписываешь один и тот же проект? Пиши себе на v0.12.2 и дальше. Когда начнешь новый проект используй v0.13.1 т.к. они уже к тому времени пофиксят самые страшные баги, из-за которых ты бы парился долго. У меня года три было две версии админки, одна устаревшая, другая супер современная. Немного парило, но вполне терпимо. |
Цитата:
|
Хочу вступить в ваши ряды :) С самим реактом разобрался вроде как, но подскажите, какие полезные аддоны стоит глянуть.
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
https://github.com/LearnBoost/stylus...r/package.json 0.50.0 версия :) *** Но в NPM это предусмотренно, т.е. ^0.1 - будет обновлять только патчи, а уже 0.2 не подтянется ^1.1 - будет обновлять патчи и релизы второй цифры. |
Цитата:
https://github.com/rackt/react-router а также почитать про mixins. |
Цитата:
мне помогло когда-то) |
Ещё статейка по Реакту https://zapier.com/engineering/react...guide-gotchas/
|
Вот никак не понимаю чем вам так нравиться react.js? :)
jsx шаблоны кажуться сущим адом, та же фигня что можно делать и в jq, но с биндингами. А вот riot.js уже поприятнее. Но всеравно это лишь шаблонизатор, добавим к этому архитектурный паттерн (нативный flux например) + AMD для модулей и вырисовывается нечто чем-то напоминающее ангуляр. (не сам двиг, а решаемые задачи) А почему бы не использовать его для своих проектов непонятно... отлично масштабируется, а большая доля ui кейсов делается легким движением пальцев. Даешь холливар? :) |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
имеется в виду - без тулз типа jsdom и prerender Цитата:
пасаны, которые написали это, построили огромнейшую систему - ну вы в курсе кстати, сами компоненты реакта - хороший пример реализации модуля(частицы функционала, грубо говоря) из largescalejs от Османи Цитата:
а так - отлично всё. мне он нравится тем, что большинство работы делается автоматически ангуляр с виджетами типа kendo или бутстрапа (ngStrap) - идеальный тулкит для админок :Р правда, встроенные велосипеды типа модулей (DI) и промисов меня вгоняют в грусть... почему я должен, без права выбора, использовать AMD (я хочу ES6 modules) и недообещания (я хочу полный фич bluebird)? Цитата:
Цитата:
Цитата:
Цитата:
в реакте царит композиция (компонентов) и чистые функции, иммутабельность и реактивность в ангуляре - mvc и мутабельность(модели), функции со сторонними эффектами (в контроллерах) в mvc царит мутабельность и связи (двунаправленные), изоляция во flux - реактивность, иммутабельность и глобализация angular, react \ mvc, flux - это совсем разные вещи. их нельзя сравнивать "лучше\хуже". l-liava-l, у тебя сегодня ДР ? с днём рождения) |
Цитата:
Что я имею ввиду, разложу по полочкам: 1) В терминах БЭМ каждый компонент можно описать как папочку: b-button .. b-button.js (бизнес логика) .. b-button.styl (я использую Stylus) .. b-button.ss (я использую SS) .. b-button.json (тут описано от кого наследуется наш компонент и от кого зависит, чтобы не описывать это отдельно в каждом файле) Поэтому первая задача SS в JSX - это вынесение шаблона в отдельный файл/ы. 2) Думаю многие из вас юзают АНБ при именование классов в CSS и используют Stylus для удобной работы с ним: .b-input { &_style_warning { ... } &__wraper { ... } &__input { ... &_focused_true { ... } } } .b-select { @extend .b-input; ... } И SS полностью переносит концепцию Stylus в шаблоны: - template bInput(@params) < .b-input[.&_style_warning] < .&__wrapper < .&__input[.&_focused_true] - template bSelect(params) extends bInput ... 3) В SS встроены средства локализации на уровне синтаксиса, т.е. чтобы локализовать строку, то её достаточно взять в апострофы - template foo() < h1.warning `Привет мир!` 4) Частый кейз, когда нам нужно определить ряд методов для шаблона, например, для генерации иконок (например, Font-Awesome) - proto base->icon(name, opt_title) < i.fa.&-${name} title = ${opt_title} - placeholder base() И потом просто наследуемся от базового класса и юзаем эти методы. 5) Опциональный Jade-like синтаксис (синтаксис хоть и похож местами на Jade, но в целом другой, просто я хз как было его назвать) Тупо меньше пишем :) *** Теперь пример с React: реализуем 3 компонента: 1) i-base -- базовый компонент, где определяем общие методы и т.д. i-base .. i-base.js .. i-base.styl .. i-base.ss .. i-base.json class iBase extends React.Component { someMethod() { ... } } .i-base { ... } - template iBase.prototype.render() - proto icon(name, title) ... - proto logo(style) ... 2) b-input -- поле ввода b-input .. b-input.js .. b-input.styl .. b-input.ss .. b-input.json class bInput extends iBase { ... } .b-input { @extend .i-base } - template bInput.prototype.render() extends iBase.prototype.render 3) b-select - выпадающий список, естественный наследник b-input Тут логика ясна. *** Ну и напоследок пример компонента, который вызывает другие компоненты b-upload - template bUpload.prototype.render() extends iBase.prototype.render - block root < b-input value = { this.state.value } < b-button value = Отправить! *** По сути я просто взял БЭМ (кто не в курсе, то читать немедленно) и натянул на реакт, и полученная архитектура очень удобна и управляема. Сейчас я работаю над максимально бесшовной интеграцией SS с React, чтобы использование было очевидно и чисто. |
Цитата:
Не хочется HTML - ноль проблем. |
kobezzza, а не потеряем ли мы VDOM (и серверную отрисовку) при использовании SS ?
Цитата:
папочки даже с картинками, если нужно (я так не делаю) Цитата:
Цитата:
или это просто сахар над библиотечным вызовом? если так, то опять таки, палец вверх :) Цитата:
пример: http://jsbin.com/rejicofuvu/1/edit?js хотя, я был бы не против засахарить это : const linksToPages = this.props.pages.map(this.renderPageLink) .. в методе шаблона Цитата:
Цитата:
наследование классов ... вроде с 0.13 версией добавили фишки для ES6 классов (+наследования?), так что должно получиться круто я не вникал в 0.13 и новые классы ES6 , так что промолчу. но чувствуется, что это тоже круто) Цитата:
Цитата:
не знаю, правда, кейса для этого (реального кейса, а не вымышленные наследования Animal и Cat) Цитата:
http://jsbin.com/zehurojinu/1/edit?js обрати внимание на классы - это просто пздц. Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
Цитата:
Базовый шаблон->Input->Select->MultiSelect и т.д. Цитата:
|
Цитата:
Цитата:
http://facebook.github.io/react/docs...ct-without-jsx |
Цитата:
|
Цитата:
был период времени, когда он не работал для jsx, поэтому я его откинул. (sublime text) ща вроде пашет Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
По поводу терминологии:
Цитата:
Википедия: Цитата:
Цитата:
А реакт это не система, а отдельный модуль шаблонизации жэ. Цитата:
Цитата:
Ну лад, это лирика все. Просто программисты любят новое и модное :) Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
ты еще скажи, что питон и nodejs одно и то же, потому что бекенд или ... express , angular, mongodb - одно и то же, потому что на выходе приложение раскрой свою позицию, а то совсем непонятно, что ты имеешь в виду... Цитата:
поэтому все и думают, что он только вьюшка а нифига :) есть паттерн такой - controller component. это компонент, который содержит в себе логику (и всё) и вызывает другие компоненты по правилу композиции я по началу писал без flux - хапал данные с сервера и манипулировал ими напрямую в компоненте. правда, потом, когда данных стало больше, и компонент раздулся, я решил вынести это дело во Flux (и не прогадал) т.о. React - это не только View... в нём может быть логика, только её рекомендуется выносить в отдельные (как правило, вышестоящие) компоненты Цитата:
серьезно. есть целый npm для модулей... дофигища реализаций модулей, обещаний, анимаций, ресурсов, маршрутизации... но при использовании комплексного фреймворка нельзя вкусить это разнообразие. а оно действительно того стоит :) Цитата:
|
Часовой пояс GMT +3, время: 06:44. |
|