Краткое руководство по React JS

Статья даст вам краткий обзор того, как строятся интерфейсы с помощью React JS.
Вы можете параллельно писать код с помощью starter kit, или просто продолжать читать.

Концепции


React имеет небольшой API, он прост в изучении использовании. Однако, сперва давайте взглянем на несколько концепций.

Элементы — это объекты JavaScript, которые представляют HTML-элементы. Их не существуют в браузере. они описывают DOM-элементы, такие как h1, div, или section.

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

JSX — это техника создания элементов и компонентов React. Например, это React-элемент, написаный на JSX:

<h1>Hello</h1>

Такой же элемент может быть написан на JavaScript:

React.DOM.h1(null, 'Hello');

С JSX требуется гораздо меньше усилий, он трансформируется в JavaScript перед запуском в браузере.

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

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

Рендеринг


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

React.render(<img src='http:tinyurl.comlkevsb9' />, document.body);


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

Компоненты


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

var Photo = React.createClass({

  render: function() {
    return <img src='http:tinyurl.comlkevsb9' />
  }
});

React.render(<Photo />, document.body);


Функция createClass принимает объект, который реализует функцию render.
Компонент Photo создан и отрисован в теле документа.

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

Свойства


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

var Photo = React.createClass({

  render: function() {
    return (
      <div className='photo' />
        <img src= >
        <span></span>
      </div>
    )
  }
});

React.render(<Photo imageURL='http:tinyurl.comlkevsb9' caption='New York!' />, document.body);


В функции render компоненту Photo переданы 2 свойства: imageURL и caption.

Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения. Свойство caption используется как текст элемента 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= />

        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass} />
            
          </button>
          <span></span>
        </div>
      </div>
    )
  }
});

React.render(<Photo src='http:tinyurl.comlkevsb9' caption='New York!' />, document.body);


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

Также у компонента появляется функция toggleLiked. Она с помощью функции setState, переключает состояние liked.

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

buttonClass используется, как класс кнопки элемента. У кнопки также имеется обработчик события onClick, который вызывает функцию toggleLiked.

Вот, что происходит после отрисовки компонента:

— После нажатия кнопки вызывается toggleLiked
— Изменяется состояние liked
— React перерисовывает компонент в Virtual DOM
— Новый Virtual DOM сравнивается с предыдущим
— React изолирует изменения и обновляет их в DOM браузера

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

Композиция


Композиция означает комбинирование меньших компонентов при формировании большего. Например, компонент Photo может быть использован внутри компонента PhotoGallery. Примерно таким образом:

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= />

        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            
          </button>
          <span></span>
        </div>
      </div>
    )
  }
});

var PhotoGallery = React.createClass({

  getDataFromServer: function() {
    return [{
      url: 'http:tinyurl.comlkevsb9',
      caption: 'New York!'
    },
    {
      url: 'http:tinyurl.commxkwh56',
      caption: 'Cows'
    },
    {
      url: 'http:tinyurl.comnc7jv28',
      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 и заголовком.

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

Заключение


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

Оригинал статьи: The React Quick Start Guide
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 15
  • +4
    Вызов метода this.getDataFromServer() внутри render вызывает у меня сомнения. В данном примере мгновенно возвращается объект-заглушка, но в реальном приложении подразумевается асинхронный запрос к серверу, которому никак не место внутри render!
    • 0
      Согласен. React — это View, которое не должно запрашивать данные с сервера. В зависимости от архитектурных решений, фрейморков/библиотек, которые стоят за React, данными занимаются модели, ActionCreator'ы/Хранилища, сервисы или аналогичные уровни абстракции.
      • 0
        React — это View, но использование других фреймворков/бибилиотек вовсе не обязательно. Можно запрашивать данные с сервера в момент создания компоненты в методах componentDidMount() или componentWillMount(). Или же передавать ранее загруженные данные другими компонентами через props.
    • 0
      > код с помощью starter kit, или

      ссылка в статье плохо вложилась: h ttp://https:github.comjarsbereact-starter-kit
      • 0
        Спасибо, поправил ссылки.
        • 0
          в ссылке a href=«http://https:github.comjarsbereact-starter-kit»>starter kit 2 раза протокол указан http и https
          и в конце a href=«http://http:www.jackcallister.com20150105the-react-quick-start-guide.html»>The React Quick Start Guide
      • –2
        Интересная статья, достаточно просто и понятно описаньі основньіе понятия React. Однако некоторьіе важніье моментьі остались за кадром.
        Тут описано, как можно организовать рендеринг отдельньіх компонентов, и реагирование на собьітия внутри них. А как организовано «общение» компонентов и их координация? К примеру, во вложенном компоненте происходит собьітие, а среагировать на него должен родительский компонент(или даже соседний). Как это описать?
        Можно ли «расшарить» изменяемьіе данньіе между несколькими компонентами(«реактивная коллекция»)?
        • 0
          Один из возможных подходов описан здесь (мы его используем, например):

          facebook.github.io/flux/docs/overview.html#content

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

          image
          • 0
            можно передать метод родителя во внутрь компоненты через props:

            render:function(){
            return (
            )
            }

            В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
            itemClick:function(e){
            var item = e.currentTarget.dataset(«item»);
            if (this.props.onSelect){
            this,props.onSelect(item);
            }
            }
            P.S. прошу прощения, что написал без форматирования текста.
            • +2
              Предыдущее сообщение страшно отобразилось, отредактировать его не получается (( Редко пишу комментарии (( Повторю:
              можно передать метод родителя во внутрь компоненты через props:

              <ChildComponent onSelect={this.itemSelected} >

              В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
              itemClick:function(e){
              var item = e.currentTarget.dataset("item");
              if (this.props.onSelect){
              this.props.onSelect(item);
              }
              }
          • 0
            Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения.

            Неведомая магия какая-то или ошибка?

            Еще вопрос, а для чего это всё? Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
            • +1
              Да, там опечатка, должно быть

              <img src={this.props.imageURL} />
              • 0
                а точнее:
                 <img src={this.props.src} />
                


                я считаю такие примеры удачными для обучения — когда не просто скопипастил и заработало, а посидел, подумал, что-то поправил — и заработало:)
            • 0
              Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
              Наверное мешала лапша из jquery. Прежде всего стоит изучить tftf.ru/stati/javascript/reactjs/flux290/ и прочитать доку, можно тамже, а после у вас могут отпасть подобные вопросы.
              • 0
                В блоке про свойства есть еще одна опечатка
                <span>{this.props.caption}</span> 
                
                вместо
                 <span></span>
                

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.