Начало работы с METEOR 1.3 и RECT: часть 2

Автор оригинала: Ethan.

Привет, ребята, как я обещал, это продолжение метеора 1.3 с учебником по реагированию. Если вы, ребята, пропустили это, вот ссылка:

METEOR 1.3 с реагирующими.

Что мы собираемся говорить о

В этом уроке мы будем изучать более глубокие вещи о реагировании, крючками жизненного цикла, управлять реактивными данными METEOR и Virtual DOM, JSX.

Поэтому для того, чтобы следовать этому руководству, будет здорово, если вы сможете взглянуть в первую часть этой серии.

Прежде чем начать В этом руководстве вы увидите такие вещи, как (На мой взгляд) или подобное И это в основном потому, что я говорю, что сегодня может измениться завтра, или он уже изменился.

Вернуться к основам

Что реагирует?

Самое первое, что вам нужно спросить себя в этот момент, когда вы уже получаете небольшой аромат о том, как выглядит реактивный синтаксис, как создавать компоненты, он должен что-то вроде хорошо .. Я думаю, что я реагирую, это приятно, это от Facebook, все говорят об этом … хорошо, но что это?

Ну, вы помните эту вещь по имени MVC ?

Реагировать только V Внутри MVC, поэтому, если вы когда-либо увидите некоторые учебные пособия о сравнении React VS Angular, Ember, Backbone и т. Д., Следуйте этим инструкциям.

Перейти к хроместоре и скачать Блок сайта
Перейти на эту страницу учебника
Bloooock это.

Теперь, когда вы понимаете, что реагируют только для V A.k.a Просмотр слоя, вы в порядке, чтобы продолжить.

Что такое JSX?

От jsx на глубоком

JSX – это расширение синтаксиса JavaScript, которое выглядит похоже на XML. Вы можете использовать простое синтаксическое преобразование JSX с реакцией.

Примечание .jsx не является обязательным, но рекомендуется использовать.

В двух словах вы увидите больше фрагментов и кода и код для реагирования на .jsx Так что вам лучше привыкнуть к этому, невозможно избежать этого.

Виртуальный домос

После исследования “что, черт возьми, это реагирование”, я нашел это: Tony Feed – Что react dom Отказ Это отличное чтение, и вы должны посмотреть.

В метере вы увидите, что некоторые люди, жалующиеся (или не жалуетесь) о смене от Blaze, чтобы реагировать, потому что повторное рендеринг материалов, и они Way Blaze VS реагируют управляют тем, как вы повторно визуализируете свой дом.

И они (на мой взгляд) Неправильно , React и Blaze работают в основном так же – они оба обновляют вашу DOM, где необходимо.

Жизненные циклы

Итак, компоненты React имеют свои собственные методы лучше называются «Крючки жизненного языка». Вот список самых важных, в логическом порядке.

Технические характеристики компонентов

оказывать Render () Метод требуется.

Когда вызывается, он должен изучить Это .props и Это и вернуть один дочерний элемент. Этот дочерний элемент может быть либо виртуальным представлением собственного компонента DOM (например,

или rect.dom.div () ) или другой компонент, который вы определили себя.

Получающийся стадь – вызывается один раз перед установленным компонентом. Возвращаемое значение будет использоваться в качестве начального значения Это Отказ getdefaultprops
– вызывается один раз и кэшируется, когда класс создан. Значения в сопоставлении будут установлены на Это .props Если этот опор не указан родительским компонентом (то есть, используя в проверке).

Этот метод вызывается до создания каких-либо экземпляров и, таким образом, не может положиться на Это .props Отказ Кроме того, осознайте, что любые сложные объекты, возвращаемые getdefaultprops () будет поделиться по всему случаю, не скопировано.

Монтаж
ComponentWillmount Занимается один раз, как на клиенте, так и на сервере, непосредственно перед началом исходного рендеринга. Если вы звоните SetState В рамках этого метода Render () увижу обновленное состояние и будет выполнено только один раз, несмотря на изменение состояния.
ComponentDidmount Занимается один раз, только на клиенте (не на сервере), сразу после исходного рендеринга. В этот момент в жизненном цикле вы можете получить доступ к любым ресурсам вашим детям (например, доступ к базовому представлению DOM). ComponentDidMount () Метод дочерних компонентов вызывается перед родительским компонентами.

Отключение

ComponentWillunmount Вызов сразу до того, как компонент не отключен от DOM.

Выполните любую необходимую очистку в этом методе, таком как недействительные таймеры или очистки любых элементов DOM, которые были созданы в ComponentDidmount Отказ

Обновление

ComponentWillReceiveProps (NextProops) Вызывается, когда компонент получает новые реквизиты. Этот метод не вызывается для начального рендера.
SOCCOMPONENTUPDATE (NextProops, NextState) Вызывается перед рендерингом, когда принимаются новые реквизиты или состояние. Этот метод не вызывается для начального рендера или когда ForceUpdate используется.
ComponentWillUpdate (NextProops, NextState) Призывает непосредственно перед рендерингом, когда принимаются новые реквизиты или состояние. Этот метод не вызывается для начального рендера.

Используйте это как возможность выполнить подготовку до появления обновления!

Начало работы с Meteor и реагировать

Теперь, когда вы получили вещи по порядку, на данный момент у вас уже есть понятие того, что реагирует, что не реагирует, и как сделать его работать с вашими любимыми рамками, как (потому что это ваш любимый).

Вы могли бы задаться вопросом, ну и теперь, как я могу начать питание моих реактивных приложений? Проходя реальные данные с моей бэкинги, как это возможно?

И ответ на ваш вопрос.

npm install --save --save-exact react-mounter # our savor

Так что опять же, наши друзья из Kadirahq Сделайте грязную работу для нас и дайте нам удобное решение для обработки наших данных с полезным партнером, называемым «рисунком React Container».

Я порекомендую вам взглянуть на следующий пост на среднем от @arunoda :

Давайте сочинем некоторые React Containers Отказ

Чтобы получить представление о том, о чем мы говорим.

Часто задаваемые вопросы

Какой я должен использовать?

Насколько я знаю с Meteor 1.3 Существует 2 способа обработки данных с METEOR.

react-meteor-data

РЕПО – Реагировать

А также

react-komposer

РЕПО – Meteor Data и Rect 1.3

В этом минимальном примере я буду использовать React-komposer библиотека.

Где я могу найти больше информации об этом обсуждении?

Продолжай и следуй по этому вопросу:

Что дальше для реакции + Meteor 1.3

Хорошо, хорошо, давайте действительно начнем

Весь код, используемый здесь, находится внутри Это репо Отказ

Что мы собираемся создавать?

Как видите, мы собираемся создать простую сетку с постом внутри него, и мы собираемся использовать Компонент карты из материализации за это.

Идти вперед к /lib Папка и создать /lib/collctions/posts.js Файл, затем создайте коллекцию ваших сообщений.

Posts = new Mongo.Collection('posts');

Затем перейдите на сервер и создайте файл с именем Сервер/Seed/Posts.js , со следующим контентом.

if(_.isEqual(Posts.find().count(),0)){
  for(let i = 0; i < 25; i++){
    Posts.insert({
      name: "Post Test " + [i] + 1,
      subbmitedAtt: new Date()
    });
  };
};

То, что мы здесь делаем, просто: мы создаем сообщение для сбора коллекции и вставляем 25 постов (только когда коллекция пуста), только для целей тестирования.

Все еще на сервере, иди и создайте файл публикаций, назовите его Сервер/Публикации/Posts.js и поместите следующий контент.

Meteor.publish("posts", () =>{
  return Posts.find();
});

Примечание: Если вы ничего не знаете о публикациях, Проверьте официальные документы Отказ

На данный момент у нас есть основы, чтобы начать играть с данными, у нас есть:

Коллекция по имени сообщение
Данные семян
Метод публикации.

Сейчас самое время начать играть с нашими компонентами и контейнерами.

Давайте создадим нашу открытую компонент

В нашем /Компоненты Папка, создайте Поставщики Файл и назовите это как это Клиент/Компоненты/СовместныеList.jsx , со следующим контентом.

import React from 'react';

const CardItem = ({name}) =>(
    
      
        
          {name}
          
        
    
  
);

const PostList = ({posts}) =>(
        
          {posts.map(({name}) => (
            
          ))}
        
);

export default PostList;

Как видите, они похожи на простые реактивные компоненты. Сначала мы создаем CardiTem компонент, а затем в нашем Пособие Компонент мы называем это.

Теперь вам может быть интересно: где мы получаем {posts} Параметры, и почему мы его сопоставим? Откуда этот массив?

Ну вот где наш контейнер приходит к действию.

Продолжайте и создайте следующий файл Клиент/контейнеры/Postlist.js

Примечание: Ты помнишь, что я сказал вам, что реагировать только V на MVC ? Наш контейнер будет C в MVC – Наш контроллер (да наши контейнеры – наши контроллеры. Люди любят изобретать колесо столько в эти дни). Вот почему наш контейнер может быть простой .js вместо .jsx Отказ

Теперь поставьте этот код в Клиент/контейнеры/Postlist.js :

import {composeWithTracker} from 'react-komposer';
import PostList from '/client/components/postsList.jsx'; 

function composer(props, onData) {
  const handle = Meteor.subscribe("posts");
  if (handle.ready()) {
    const posts = Posts.find().fetch();
    onData(null, {posts});
  };
};

export default composeWithTracker(composer)(PostList);

Первые две линии импортируют ComposewithTracker Метод от React-komposer Библиотека, и наши Пособие составная часть.

Тогда мы создаем композитор Функция, которая принимает два параметра {реквизит, ондата} И в теле этой функции вы должны быть, возможно, знакомы с тем, что мы делаем.

Мы подписываем на нашу публикацию Сообщения тогда мы ждем, чтобы быть готов (Да, ComposewithTracker является реактивным).

Тогда мы проходим к OnData (обратный вызов) , запрос со всеми сообщениями.

И, наконец, наш компонент готов быть «состоит» и экспортирован!

Узнайте больше о React-Mounter в Readme.md.md

Легко справа? Есть еще один последний шаг в ожидании. Давайте создадим маршрут для списка постов.

Перейти к нашему Клиент/маршрутизация/маршрутизация .JSX Файл и добавьте эти строки кода.

Во-первых, импортировать контейнер – Не компонент.

import PostList from '/client/containers/postsList.js';

Затем создайте маршрут.

FlowRouter.route("/routes", {
  action () {
    mount(MainLayout, {
      header: ,
      content: ,
      footer: 
    });
  }
});

Этот маршрут похож на домашний маршрут, просто мы проезжаем как контент.

Проверка Meteor Magic реактивность

Иди и напечатайте

meteor shell

Вы можете открыть еще один клемм Команда + т. в консоли

а затем вставьте его.

Posts.insert({name:"Post Test 25"})

Ваш терминал должен выглядеть так:

И ваше приложение должно иметь пост 25 уже там!