Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   React'а тред (https://javascript.ru/forum/offtopic/53890-react%27-tred.html)

melky 22.02.2015 22:46

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

block content
  div#content!= content

block scripts

  - var strdata = JSON.stringify(data)
  script window.initialData = !{strdata};

ну а дальше подхватываю window.initialData в компоненты\Flux

хотелось бы сделать это без глобальной переменной

nerv_ 23.02.2015 00:03

Цитата:

Сообщение от melky
React'а тред

Меня уже не первый раз посещает мысль по веб-паку создать :)

Цитата:

Сообщение от melky
хотелось бы сделать это без глобальной переменной

запихни в какой-нибудь глобальный объект:
React.__initial = {};

Safort 23.02.2015 09:07

melky,
продолжая этот пост http://javascript.ru/forum/357828-post843.html
Это понятно, но, получается, мне так и придётся передавать дополнительный аргумент-счётчик? Кстати, зачем ему нужен key если без него он и так нормально работал(хоть и выводил преды)?

melky 23.02.2015 11:40

Цитата:

Сообщение от Safort (Сообщение 357893)
melky,
продолжая этот пост http://javascript.ru/forum/357828-post843.html
Это понятно, но, получается, мне так и придётся передавать дополнительный аргумент-счётчик? Кстати, зачем ему нужен key если без него он и так нормально работал(хоть и выводил преды)?

угумс, для использования номера лучше передать его как отдельный prop

key нужен для оптимизации скорости отрисовки списков (без них он бы все удалил из dom и записал заново)

Safort 23.02.2015 13:06

melky,
спасибище за ответы)

Safort 26.02.2015 00:26

React v0.13 RC

melky 26.02.2015 11:21

Цитата:

Сообщение от Safort (Сообщение 358485)

:lol: наверное, я пессимист)
Цитата:

Мы уже немного говорили о грядущих изменениях. Основное — это конечно же отбрасывание существующего кода вашего проекта как легаси. Подробнее в нашем анонсе беты. Мы очень взволнованы этим событием! Себастьян также написал сегодня утром о некоторых изменениях с API React. Мы надеемся, что изменения, над которыми мы работали, улучшат производительность и ощущения от переписывания ОДНОГО И ТОГОЖЕ САЙТА ЦУКО СТРАДАЙ ОТ СВОЕГО BLEEDING EDGE НУБАС.

Gozar 26.02.2015 11:57

melky,
Зачем ты переписываешь один и тот же проект? Пиши себе на v0.12.2 и дальше. Когда начнешь новый проект используй v0.13.1 т.к. они уже к тому времени пофиксят самые страшные баги, из-за которых ты бы парился долго.

У меня года три было две версии админки, одна устаревшая, другая супер современная. Немного парило, но вполне терпимо.

nerv_ 26.02.2015 12:01

Цитата:

Сообщение от Safort
React v0.13 RC

semver на них не хватает :)

kobezzza 27.02.2015 09:06

Хочу вступить в ваши ряды :) С самим реактом разобрался вроде как, но подскажите, какие полезные аддоны стоит глянуть.


Часовой пояс GMT +3, время: 12:06.