В продолжение недавнего анонса про сайт на react-js, начинаю сегодня обещанный цикл обучающих статей по этим технологиям. Да, тут недостаточно изучить только реакт, это целый комплекс связанных между собой технологий:

• node-js - серверная реализация javascript, основа всего, без чего ничто не будет работать, включая react. Здесь стоит сразу оговорочку сделать, что react может и просто в браузере работать, как обычная JS-библиотека, но мы будем учиться разрабатывать именно изоморфные JS-приложения, которые работать умеют не только в браузере, но и на сервере. А здесь уже как раз нужны будут все заявленные технологии.
• webpack - сборщик скриптов (из кучи отдельных модулей собирает конечный JS/CSS). В MODX наверняка многие сталкивались с MinifyX. Условно можно сказать, что это схожие по назначению вещи, хоть и сильно отличаются. Привожу это сравнение просто для большего понимания для чего вообще нужен webpack.
• react - JS-библиотека от фейсбука, реализующая такую интересную штуку как Virtual DOM. Многие спрашивают в чем отличие реакта от тех же Angular, Backbone и т.п. Коротко: react - это просто библиотека, а ангулар и т.п. - это комплексные фреймворки с кучей всего готового. С реактом старт сложнее (так как все необходимые под проект модули надо ставить самому, и много писать приходится), но зато потом и контроль проекта лучше, и вообще со временем многое получается писать гораздо быстрее.

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

Здесь сразу уточню, что разработка на javascript сама по себе более проблемная, чем на том же php, просто потому что слишком большое разнообразие платформ используется, программ и т.п. То есть если вы настроили свой сервер и запустили там сайт на php, то для всех пользователей это один и тот же сервер, одна и та же программная среда. С JS же все гораздо хуже - куча браузеров, версии движка и т.п. По этой причине я изначально оговорю какие программные средства мы будем с вами использовать, и настоятельно рекомендую придерживаться именно этого списка, чтобы у вас не возникали лишние ошибки. Когда вы будете чувствовать себя уверенно во всем этом, тогда уже сможете пробовать настроить свой сервер, адаптировать все под различные браузеры и т.п. Сейчас у нас эти задачи не стоят, мы просто будем учиться для себя.

Итак, в качестве хостинга советую https://modhost.pro/ (в случае, если вы работаете с MODX. В остальных случаях все на ваше усмотрение). На первых порах вам будет достаточно даже бесплатного тарифного плана, 250 метров места хоть и под завязку нам, но все же хватает. Напоминаю, что бесплатный сервер живет только сутки, поэтому кому не хочется переустанавливать все с нуля каждый раз (хоть это и занимает 10 минут), оплатите минимальный тарифный план и учитесь спокойно.

Отмечу на будущее, что по мере появления новых уроков заготовка будет увеличиваться в объемах, и 250 метров на хостинге может просто не хватить и команда npm i будет в итоге разваливаться, так как не сможет установить все нужные пакеты. Если у вас это происходит, значит берите минимальный ТП, там 500 метров, их хватит.

На вопрос “Почему modhost, заточенный под MODX, если мы будем изучать реакт?” отвечу: на modhost сразу есть все необходимое: ssh, node-js, npm, git. Это все нам понадобится. Можно, конечно, альтернативы посмотреть, но в нашем случае овчинка совсем не стоит выделки.

В качестве браузера советую Google Chrome (да-да, теперь я в нем работаю, а не в FireFox). И в него же обязательно установите дополнение react-dev-tools. После установки у вас в дев-панели появится еще одна вкладка - react

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

В качестве редактора я использую sublime с установленными пакетами Babel (для подсветки react-кода) и LESS, но вы можете использовать любой другой редактор, поддерживающий синтаксис JSX (как тот же PhpStorm), это уже не принципиально.

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

Создаем сайт на modhost.pro

В панели управления сайтами создаем новый сайт, при этом убираем установку самого MODX-а. Он нам сейчас не нужен, а место будет занимать (и может просто не хватить под наш реакт-проект).

После того, как сайт был создан (в нашем случае это правильней назвать сервер), заходим в информацию о нем и находим данные авторизации по ssh

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

Скачиваем файлы проекта.

Я собрал уже готовую заготовку и выложил ее на гит. Коннектимся на сервер по ssh и прям в домашнем каталоге выполняем команду

https://github.com/MODX-Club/react-study.git

В результате у вас в текущем каталоге появится папка react-study

Переходим в эту папку и выполняем команду npm i

Начнется скачивание необходимых компонентов, занимает обычно несколько минут. Когда все скачается, вы увидите типа такого

Собственно, на этом все. Проект установлен, осталось его просто запустить. Выполняем npm start

Если сервер запустился, вы увидите такое:

Обратите внимание на указанный в сообщении порт. В данном случае 3000. Вот на этом порту у нас и будет крутиться приложение. Остается перейти в браузере на адрес вашего сайта (он указан в панели хостинга) и дописать ему в адресной строке порт. У меня все запустилось без проблем (не считая пары мелких варнингов)

На странице будет несколько кнопок, каждая из которых по клику открывает так называемый snackbar - это один из material-design элементов. Собственно, пример взят с сайта-документации библиотеки material-ui https://material-ui-1dab0.firebaseapp.com/component-demos/snackbars Советую внимательно изучить этот сайт, многие элементы мы будем брать именно оттуда. Вообще react+material-ui - это сила! Интерфейсы на этом писать - только в путь!

Структура и редактирование приложения.

Вообще структура всего приложения довольно объемная, поэтому я сразу покажу где конечный код и как его отредактировать, чтобы мы увидели итоговые изменения на нашей странице. Это соответствует нашей текущей модели обучения.

Условный корень приложения - /app/modules/ReactStudy/components/App/index.js а компонент с кнопками - /app/modules/ReactStudy/components/lessons/lesson1/index.js

Давайте разберем их подробней.

Вот код MainApp:

import './styles/styles.less';

import React, {Component} from "react";

import PropTypes from 'prop-types';

import Lesson1 from '../lessons/lesson1/';

export default class MainApp extends Component {


  constructor(props){

    super(props);

    let state = {
    };

    this.state = state;
  }


  render() {

    let {
      ...other
    } = this.props;

    return <div>
      <Lesson1 
      />
    </div>

  }
}

MainApp.propTypes = {
}

MainApp.defaultProps = {
}

Основные моменты:

1. Класс MainApp расширяет базовый класс Component из пакета react. Этот класс импортирован выше в строке import React, {Component} from "react"; Эту строку, условно, следует понимать следующим образом: “Импортировать переменные React и Component из стороннего модуля react”. Основные методы класса React.Component описаны здесь: https://facebook.github.io/react/docs/react-component.html

2. Метод render(){} обязательный и должен возвращать или null (в случае, если мы ничего не хотим рендерить на странице), или node/react-элемент. В нашем случае мы возвращаем div с отрисованным в него компонентом Lesson1

return <div>
 <Lesson1 
 />
</div>

Компонент Lesson1 мы импортируем выше. import Lesson1 from '../lessons/lesson1/';

Ну а теперь самое главное - это изучим компонент Lesson1, так как по сути именно его мы видим в окне браузера (точнее результат его работы).

Вот код этого компонента:

import React, { Component } from 'react';
import Button from 'material-ui/Button';
import Snackbar from 'material-ui/Snackbar';

class PositionedSnackbar extends Component {
  static state = {
    open: false,
    vertical: null,
    horizontal: null,
  };

  handleClick = state => () => {
    this.setState({ open: true, ...state });
  };

  handleRequestClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { vertical, horizontal, open } = this.state;
    return (
      <div>
        <Button onClick={this.handleClick({ vertical: 'top', horizontal: 'center' })}>
          Top-Center
        </Button>
        <Button onClick={this.handleClick({ vertical: 'top', horizontal: 'right' })}>
          Top-Right
        </Button>
        <Button onClick={this.handleClick({ vertical: 'bottom', horizontal: 'right' })}>
          Bottom-Right
        </Button>
        <Button onClick={this.handleClick({ vertical: 'bottom', horizontal: 'center' })}>
          Bottom-Center
        </Button>
        <Button onClick={this.handleClick({ vertical: 'bottom', horizontal: 'left' })}>
          Bottom-Left
        </Button>
        <Button onClick={this.handleClick({ vertical: 'top', horizontal: 'left' })}>
          Top-Left
        </Button>
        <Snackbar
          anchorOrigin={{ vertical, horizontal }}
          open={open}
          onRequestClose={this.handleRequestClose}
          SnackbarContentProps={{
            'aria-describedby': 'message-id',
          }}
          message={<span id="message-id">I love snacks</span>}
        />
      </div>
    );
  }
}

export default PositionedSnackbar;

Здесь примерно все то же самое, что и в предыдущем листинге, только содержимое метода render() более объемное и появляется еще два метода handleClick() и handleRequestClose().

Отмечу, что метод render(), как и говорилось выше, - это “родной” метод класса React.Component, а вот два других, это уже наши произвольные методы, которые могут называться иначе, и методов этих может быть сколько угодно.

Итак, здесь не сложно выделить несколько обособленных элементов , которые рендерятся в кнопки как есть, и есть еще один элемент - . Это отличный пример для демонстрации реакта и формирования понимания парадигмы его работы. Вот у нас на странице выводится 6 кнопок, по клику на каждую у нас в том или ином месте появляется элемент Snackbar с надписью I love snacks. Магия заключается в том, что хотя у нас 6 кнопок, в единицу времени у нас выводится только одна сущность снакбара, просто в разных местах ввиду того, что этому элементу передаются разные свойства, которые и определяют в каком месте этот снакбар будет выведен.

Здесь последует довольно объемное и запутанное объяснение всего этого с кучей повторений, но очень важно во все это вникнуть и понять, так как все это на 95% соответствует всему, что работает на реакте.

Свойства и состояния.

Это основа жизни реакт-компонентов. Хотя не все реакт-компоненты имеют свойства (props) и состояния (state), именно эти вещи изначально закладывались в саму основу реакт-парадигмы. То, что вы имеете в итоге на странице документа - это отражение текущего состояния элемента (state). Меняя его состояния из любого положения, это скорее всего повлияет на отображение его в документе. Давайте попробуем освоить это на практике. Откроем хром-консоль (F12), перейдем во вкладку react и посмотрим структуру react-элементов текущего документа. В нашем случае она вот такая: http://joxi.ru/Y2LjLVES9DL5Kr

То есть мы видим внутри других компонентов наши 6 кнопок и конечный снакбар. Так же мы видим, что у снакбара в Props свойство open является true. Попробуйте снять галочку с этого свойства, и снакбар скороется. И наоборот, выставив его в true, снакбар появится. Попробуйте вручную отредактировать свойства anchorOrigin, изменив, к примеру, left на right, и снакбар изменит свое положение.

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

А откуда берутся эти свойства?

Свойства могут быть прописаны по умолчанию, а могут быть переданы непосредственно в элемент. Давайте еще раз внимательно посмотрим на наш код компонента PositionedSnackbar.

В начале класса у нас прописаны исходные свойства состояния объекта.

state = {
 open: false,
 vertical: null,
 horizontal: null,
};

Далее в методе render() мы “выдергиваем” из состояния этого объекта нужные нам переменные (получаем три отдельные переменные).

const { vertical, horizontal, open } = this.state;

И потом этим переменные передаем непосредственно в снакбар как свойства.

<Snackbar
 anchorOrigin={{ vertical, horizontal }}
 open={open}
 onRequestClose={this.handleRequestClose}
 SnackbarContentProps={{
   'aria-describedby': 'message-id',
 }}
 message={<span id="message-id">I love snacks</span>}
/>

То есть переменные vertical и horizontal определяют положение снакбара, а свойство open определяет открыт ли снакбар или закрыт. Соответственно, если свойство open == true, то снакбар появится на странице.

И вот здесь еще один очень-very важный момент. Многие в начале освоения реакта воспринимают код метода render() неправильно, как декларативный, то есть прописали компонент со статическими переменными и все, он один раз инициировался и далее живет своей жизнью. Это неправильно. Магия заключается в том, что метод render() вызывается за время жизни конечного объекта чаще всего далеко не один раз. При любом изменении входящих свойств элемента (props) или его состояния (state) метод render() вызывается по новой. И если какое-то свойство изменилось и влияет на поведение дочерних объектов или текущего, то документ будет перерисован, то есть если поменялось, к примеру, свойство open, то снакбар будет открыт или скрыт, то есть он переинициализируется по новой.

И тут как раз появляется Virtual DOM. Если бы каждое изменение свойств объектов с последующим вызовом метода render() приводило к тому, что DOM документа перерисовывался бы по новой, это бы повлекло бы за собой существенное снижение производительности такого веб-приложения. Все же работает гораздо хитрее - реакт сначала выполняет в своей виртуальной машине все вычисления и смотрит, есть ли какие-то изменения в конечном DOM элемента, и если есть, тогда меняет и DOM документа. А если нет, то нет. Получается и гибкость высокая, и производительность норм.

Итак, давайте еще раз посмотрим в react-dev-tools, только на этот раз не на конечный элемент Snackbar, а на главный компонент PositionedSnackbar, на его свойства.

Сейчас мы видим, что state.open == false. Кстати, если в дев-панели нажать Esc, откроется допвкладка Console, в которой можно выполнять JS-команды, и в ней выбранный реакт-элемент будет виден как переменная $r, с которой можно работать напрямую.

Выполнив команду, мы видим уже свойства элемента как самостоятельные JS-сущности

И если там же выполнить команды $r.state.open = true (то есть установить новое значение состояния) и потом выполнить$r.forceUpdate() (то есть вызывать принудительный ререндеринг компонента), то мы увидим и изменения на странице.

В данном случае мы выполняли два отдельных метода (сначала изменили состояние объекта, а потом вызвали его ререндеринг). Но это только потому что мы изменили свойство состояния напрямую. Но правильней такие вещи делать через метод setState(newState). В нашем случае это $r.setState({open: true});

Такой метод не только поменяет состояние, но и вызовет последовательную цепочку событий жизненного цикла реакт-компонента. Это мы разберем позже, но коротко: будет вызван метод shouldComponentUpdate(nextProps, nextState), на уровне которого вы можете регулировать стоит ли обновить состояние компонента или нет (в нашем случае не уровне разницы текущего состояния this.state и предстоящего состояния nextState), то есть вы можете как позволить компоненту измениться, так и препятствовать этому. Затем вызывается componentDidUpdate(prevProps, prevState), то есть когда компонент был обновлен, и опять-таки что-то выполнить по результату, имея разницу предыдущего состояния и текущего. Затем метод componentWillReceiveProps(newProps) у всех дочерних элементов, которые вы вызываете в своем компоненте и которым передаете различные свойства (и уже на уровне тех компонентов все те же перечисленные методы). То есть это целый конвейер. На первый взгляд все это очень сложно и запутанно, но когда разберетесь, почувствуете насколько управляемыми и предсказуемыми станут ваши программные продукты.

Так вот, мы изменили программно состояние нашего компонента PositionedSnackbar, и его эти свойства состояния в виде передаваемых параметров (props) ушли далее в компонент Snackbar.

Все. Этим можно подытожить: оперируем состояниями и свойствами. Свойства входящие принято не трогать и не изменять (хотя если очень надо, то можно местами), а вот состояния напрямую менять можно.

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

Забегая вперед, что скоро появится готовая сборка MODX+node.js+react, на базе чего будет строить многое, так что этот цикл статей не просто так появляется, а закладывается в основу многих, в том числе и наших, технологий на ближайшие пару лет. Так что как минимум поверхностно изучить не будет лишним.

UPD: пример выполнения.