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

Facebook поглощает мир с реле, Refrux, GraphQL, реагировать, реагировать на родных и пучком других библиотек, чтобы сделать масштабируемые приложения.

Но этот учебник будет просто охватить реагирование с METEOR.

Цель

Целью этого учебного пособия является руководством по пути создания приложения Meteor с React Veric V в MVC, поэтому какой лучший пример, чем воссоздание основного шаблона CSS?

Полный код живет в Это репо Отказ

Создание проекта

Во-первых, создайте проект.

meteor create --release 1.3-modules-beta.11 react
cd react
rm -rf *

Затем запустите проект

meteor

Я собираюсь использовать материализировать Для CSS и Маршрутизатор потока для маршрутизации.

meteor add kadira:flow-router poetic:materialize-scss fourseven:scss

Далее давайте сделаем наш проект Meteor NPM-Ready.

Установка необходимых зависимостей

Создать Package.json и установить необходимые зависимости.

npm init --yes # shortcut to create a package.json 

Затем заполните Package.json С текущей информацией

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

npm WARN install Refusing to install hapi as a dependency of itself

Тогда вы можете запустить NPM установить Чтобы получить необходимые зависимости.

npm install --save --save-exact react react-dom react-mounter

Зачем использовать NPM вместо пакета взаимодействия сообщества?

Вы можете задаться вопросом, почему мы устанавливаем React Plugins с использованием NPM, а не просто используя прохладный пакет React. Ну, это было не то, что я сказал, это то, что @ yyx990803 (Evan Yuu) говорит на этот вопрос Отказ

Один пакет, который нужно воспользоваться вот здесь React-Mounter Пакет из Кадира (да, ребята за все потрясающие пакеты там для метеора) и из Readme.md , это в основном то, что делает этот пакет для вас:

React Mounter позволяет легко устанавливать компоненты реагирования на DOM.

Запуск базовой структуры папки

Структура папки – это всегда о чем беспокоиться, когда вы начинаете новый проект. Мы всегда пытаемся улучшить наш код, и с тем, как мы структурируем его на метеоре, не слишком много сделки о структуре папки. У нас есть /клиент и а /Сервер Папка (всегда есть /Public,/Private/lib папка), поэтому в этом руководстве мы будем следовать за Meteor Standard , с некоторыми очевидными папками в /клиент папка, как /Компоненты Отказ

Подготовка макета приложений

Наличие чем-то похожего на это, первое, что нам нужно сделать, это создать наш компонент макета, который будет внутри React/Client/Layouts/MainLayout.jsx и напишите следующий код.

import React from 'react';

export const MainLayout = ({navbar, content, footer}) => (
  

      {navbar}
      

        {content}
      
      {footer}
  
);

Это будет наше Mainlayout Компонент, выглядит просто правильно? Это просто Const Экспорт . Mainlayout Компонент, который принимает 3 параметра, Навкар , Содержание и нижний колонтитул Отказ

Если вы знакомы с потоком железа-маршрутизатора или Blazelayout или пакетом макета RACT, следующее будет выглядеть довольно известно.

Теперь мы должны создать Router.jsx Файл для обработки основного макета, используя Flowrouter Продолжайте и создайте файл .jsx на этом пути. Реагистрирование/клиент/маршрутизация/Router.jsx Затем напишите следующий код.

import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';

FlowRouter.route("/", {
  action (){
      mount(MainLayout)
  }
});

На данный момент вы должны быть уже знакомы с импортом. Мы просто требуем реагирования, крепления и Mainlayout из других папок в приложении Но подожди … Вы можете задаться вопросом, почему некоторые ** требуют ** завернуты в фигурные брекеты ( {} ) И другие нет?

Ну, это не синтаксис реагирования, это более синтаксис модуля ES6. Давайте посмотрим на пример, чтобы лучше понять этот момент.

Идти вперед к mainlayout.jsx Файл и изменить Const к по умолчанию , а потом иди к Router.jsx Файл и удалить фигурные брекеты и Магия! оно работает.

Кредиковые скобки используются для указания того, какие компоненты для импорта из A .jsx файл. Если вы не используете фигурные скобки, он импортирует компонент по умолчанию.

Теперь, когда мы понимаем немного больше импортной вещи, давайте понять, что Гора () Функция есть. Синтаксис функции монтирования похоже на следующее:

mount(ReactComponentToMountInTheScreen, parameters);

Теперь это имеет смысл правильно? Мы импортируем наш компонент макета и просто рендеринг его на вид, так просто! Но как насчет параметров? Я говорю о заголовке, содержании и нижнем колонтитуле, где они , Как я могу импортировать их , Где я их положил , Мы люди или мы танцорами? Чего ждать?

Итак, давайте создадим наши три пропущенных компонента здесь.

React/Client/Components/Content.JSX

import React from 'react';

export default Content = ({name}) => (
  

  

    

      


      
Hello, {name}
      

        
A modern responsive front-end framework based on Material Design
      
      

        Get Started
      
      


    
  
  

  

    

      

        

          

            flash_on
          
          
Speeds up development

          
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
        
      

      

        

          

            group
          
          
User Experience Focused

          
By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
        
      

      

        

          

            settings
          
          
Easy to work with

          
We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
        
      
    
  
  



);

React/Client/Components/Footer.jsx ;

import React from 'react';

export default Footer = () => (
  
);

React/Client/Components/Navbar.jsx ;

import React from 'react';

export default Navbar = () =>(
  
);

А потом давайте использовать их в нашем Router.jsx Отказ

Сначала вам нужно импортировать их, поэтому добавим следующий код.

import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';

А потом просто смонтирую их, как это.

mount(MainLayout, {
      header: ,
      content: ,
      footer: 
    });

Так что полный колотер Router.jsx Файл должен выглядеть так.

import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';
import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';

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

А затем приложение должно выглядеть как начальное изображение, мертвое шаблон стартера из пакета Materialize.

Должен задавать вопросы

Почему Класс вместо классное значение ? Бен Альперт из команды React Core объясняет причины довольно хорошо на Эта квора тема

Как я могу получить доступ к контексту реагирования некоторых компонентов? Вы должны сделать элемент внутри макета, как функция вместо простого реагирования.

Например:

        {content()}
 

А потом Гора () Функция должна выглядеть следующую

    mount(MainLayout, {
      header: ,
      content: () => (
        
      ),
      footer: 
    });

Как пройти параметры на компонент React, I.e. Navbar или Content

Допустим, мы хотим заменить Стартовый шаблон Заголовок на Компонент для приветственного сообщения.

Для достижения этого нам нужно сделать 3 изменения в наш существующий код.

1. Сделайте компонент содержимого принять параметры.

export default Content = ({name}) => ( )

2. Передайте параметры нашему компоненту (аналогично синтаксису Blaze, но только с 1 фигурной скобой).

Hello, {name}

3. Передайте значение имени.

content: () => (
  
),

И вы должны получить что-то подобное.

Как пройти реактивные данные своим компонентам? Это может быть, самый важный вопрос об этом всем руководству, и к сожалению, это будет охвачено следующему руководству. Если вы не хотите ждать до следующего учебника, вы можете проверить следующее Средний пост от @Arunoda

Резюме

Сегодня мы изучаем основы реагирования, мы узнаем, что Meteor работает довольно хорошо с реагированием с использованием той же экосистемы обычного приложения NPM. Более того, мы больше не используем Meteor CLI, чтобы добавить пакеты RACT.

На данный момент вы также должны быть уже следовать за Meteorhacks команда на Github /Середина.

Реагирование принимается и любим от сообщества JavaScript, поэтому не слишком много думайте о реагировании в обучении – это лучший вариант для V в MVC.