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

ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter

На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!

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

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

<h1>Hello, world!</h1> - как ни странно, это примитивный компонент.

Пока ничего интересного, но давайте представим такой псевдо-код:

var photos = ['images/cat.jpg','images/dog.jpg','images/owl.jpg']

ReactDOM.render(
  <App>
    <Photos photos=photos />
    <LastNews />
    <Comments />
  </App>,
  document.getElementById('root')
);

Что примечательного в псевдо-коде? Он очень хорошо читается, ведь очевидно, что наше приложение (App) отображает: фото (кошка, собака, сова), новости (какие-нибудь) и комментарии (тоже какие-нибудь).

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

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

js/App.js

var App = React.createClass({
  render: function() {
    return (
      <div className="app">
        Всем привет, я компонент App!
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Посмотрите в браузер, вы увидите разметку, которую мы указали в методе Render, нашего компонента App.

Первый компонент - App

Конечно, кое-что добавил уже сам реакт, например data-reactid=".0", это нормально.

Слово class в javascript является зарезервированным, поэтому внутри JSX синтаксиса необходимо писать className.

В ReactDOM.render мы передали целиком наш компонент, без свойств.

Запись <App /> эквивалентна <App></App>.

Итого: у нас есть компонент <App />

Давайте разовьем идею, и добавим что-нибудь внутрь App, и отобразим это как ни в чем не бывало.

js/App.js

var News = React.createClass({
  render: function() {
    return (
      <div className="news">
        К сожалению, новостей нет.
      </div>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div className="app">
        Всем привет, я компонент App! Я умею отображать новости.
        <News />
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Давайте, вновь взглянем на код и поищем примечательные места.

Во-первых - мы никак не изменили код внутри ReactDOM.render. Компонент <App />, содержит сейчас в себе другой компонент. Но при этом, это никак не влияет на "рендер" всего нашего приложения.

Во-вторых, как уже было сказано - компонент <App /> содержит в себе компонент <News />. Да-да! Так же, как если бы это был просто дочерний <div></div> элемент.

В-третьих, наш компонент <News /> такой же примитивный, как и App, и содержит всего один (обязательный!) метод render.

Задачка на понимание происходящего: создайте компонент <Comments /> и сделайте, чтобы он отображался после новостей. Текст компонента: "Нет новостей - комментировать нечего."

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

Решение:

js/App.js

var News = React.createClass({
  render: function() {
    return (
      <div className="news">
        К сожалению, новостей нет.
      </div>
    );
  }
});

var Comments = React.createClass({
  render: function() {
    return (
      <div className="comments">
        Нет новостей - комментировать нечего
      </div>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div className="app">
        Всем привет, я компонент App! Я умею отображать новости.
        <News />
        <Comments />
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Откройте браузер, посмотрите разметку страницы. Все как мы написали + data-react атрибуты.

Ощущается некоторое неудобство, при использовании стандартного способа просмотра в консоли. Предлагаю вам установить react devtools (плагин для хрома, плагин для мозилы).

После установки, откройте вкладку React в консоли разработчика.

Пытливый читатель уже заметил окошечко "Props". Ок, об этом и поговорим в следующей главе.

Исходный код на данный момент.