Небольшое руководство по React

react-javascript-library-building-user-interfaces[1]
image-756

Эта статья даст вам краткий обзор того, как построить пользовательские интерфейсы в React JS. Код статьи доступен в репозитрии, или же вы можете все делать постепенно как в статье.

Основная концепция

React имеет довольно небольшую API. Это делает этот фреймворк приятным в использовании, легким в обучении, и простым для понимания. Однако, будучи простым, не означает, что все это вам уже знакомо. Есть несколько концепций, которые надо знать перед началом работы. Давайте рассмотрим их по очереди.

Элементы React  являются объектами JavaScript, которые представляют HTML элементы. Они не существуют в браузере. Они представляют собой элементы браузера, такие как h1, div или section.

Компоненты разработчик создает React элементы. Они, как правило, более крупные части пользовательского интерфейса, которые содержат как структура и функции. Подумайте о таких понятий, как NavBar, LikeButton или ImageUploader.

JSX представляет собой метод для создания React элементов и компонентов. Например, <h1>Hello</h1> является React элементом, записанный в JSX. Некоторые React элементы могут быть записан в виде JavaScript как React.DOM.h1 (NULL, 'Hello');. С JSX вы затратите меньше усилий, на чтение, запись и трансформацию в JavaScript перед запуском в браузере.

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

С понимание этих понятий мы можем двигаться дальше к использованию React. Мы будем строить серию пользовательских интерфейсов, каждый из которых добавляет слой функциональности на предыдущий. Мы будем строить фотогалерею, похожую на Instagram.

Rendering

Первым делом рендерим визуальный элемент (React элементы или компоненты). Запомните, что виртуальный элемент существует только в памяти JavaScript, мы должны явно указать React, чтобы вывести его в браузере DOM.

React.render(<img src="http://tinyurl.com/lkevsb9" alt="" />, document.body);

Функция render принимает два аргумента: виртуальный элемент и реального DOM узла. React принимает визуальный элемент и вставляет его в данный DOM узлел. Изображение теперь отображается в браузере.

Компоненты

Компоненты сердце и душа React. Они настраиваемый React элементы. Они, как правило, расширены с уникальной функциональностью и структурой.

var Photo = React.createClass({
  render: function() {
    return <img src='http://tinyurl.com/lkevsb9' />
  }
});
React.render(<Photo />, document.body);

Функция createClass принимает объект, который реализует рендеринг функции.

Компонент photo создает <Photo />, и выводит его в теле документа.

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

Свойства

Свойства можно рассматривать в качестве опций компонента. Они используются в качестве аргументов компонента и выглядят в точности как атрибуты HTML.

var Photo = React.createClass({
  render: function() {
    return (
      <div className='photo'>
        <img src={this.props.imageURL} />
        <span>{this.props.caption}</span>
      </div>
    )
  }
});
React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='New York!' />, document.body);

Внутри функции React render: два параметра передаются в компонент Photo: ImageUrl и caption.

Внутри компонента функция render свойство ImageUrl используется в качестве SRC для React элемента изображения. caption также используется как обычный текст в React элементе span.

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

Состояние

Состояние объекта является внутренним для компонента. Он содержит данные, которые могут меняться с течением времени.

var Photo = React.createClass({
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },
  getInitialState: function() {
    return {
      liked: false
    }
  },
  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
});
React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='New York!'/>, document.body);

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

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

Компонент имеет еще один новый функцию toggleLiked. Эта функция вызывает SetState для компонента, и меняет значение liked.

В визуализации функции компонента переменной buttonClass присваивается либо «активый» или стирается — в зависимости от liked состояния.

buttonClass используется в качестве имени класса для кнопки React элемента. Кнопка также имеет обработчик событий OnClick и настроена на работу в toggleLiked.

Вот что происходит, когда компонент оказывается в DOM браузера:

  • Когда кнопка компонента нажата, вызывается toggleLiked
  • liked состояние изменяется
  • React повторно рендерит компонент в виртуальный DOM
  • Новая виртуальная DОМ  сравнивается с предыдущим виртуальной DOM
  • React изолирует, что изменилось и обновляет DOM браузера

В этом случае, React изменяет имя класса на кнопке.

Состав

Состав означает объединение более мелких компонентов с образованием большего целого. Например компонент фотография может быть использовано в качестве компонента фотогалерии, например, так:

var Photo = React.createClass({
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },
  getInitialState: function() {
    return {
      liked: false
    }
  },
  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
});
var PhotoGallery = React.createClass({
  getDataFromServer: function() {
    return [{
      url: 'http://tinyurl.com/lkevsb9',
      caption: 'New York!'
    },
    {
      url: 'http://tinyurl.com/mxkwh56',
      caption: 'Cows'
    },
    {
      url: 'http://tinyurl.com/nc7jv28',
      caption: 'Scooters'
    }];
  },
  render: function() {
    var data = this.getDataFromServer();
    var photos = data.map(function(photo) {
      return <Photo src={photo.url} caption={photo.caption} />
    });
    return (
      <div className='photo-gallery'>
        {photos}
      </div>
    )
  }
});
React.render(<PhotoGallery />, document.body);

Компонент Photo точно такой же, как и раньше.

Новый компонент PhotoGallery, который генерирует Photo компоненты. В этом случае есть некоторые поддельные данные сервер, который возвращает массив 3 объектов, содержащие url и caption.

Данные создают 3 компонента Photo, которые вставляются в возвращаемом значении render функции компонента.

Вывод

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