https://habrahabr.ru/company/ruvds/blog/343022/

• Разработка веб-сайтов
• ReactJS
• JavaScript
• Блог компании RUVDS.com

Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.

Разобравшись с этим материалом, вы освоите следующее:

• Компоненты React.
  
• Рендеринг ReactDOM.
  
• Классы компонентов и функциональных компоненты.
  
• JSX.
  
• Состояние (state).
  
• Обработка событий.
  
• Асинхронный метод setState.
  
• Свойства (props).
  
• Ссылки (refs).
  

Это — практически всё, что нужно знать для того, чтобы создавать и поддерживать React-приложения.

Предварительная подготовка

Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.

Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.




Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).

Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.

Что такое React?

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

Вот пример разбивки страницы на компоненты:


Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?

Что такое компонент React?

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

Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.

Напишем компонент внутри тега <script> файла index.html с type, установленным в "text/babel":

<script type="text/babel">
  function OurFirstComponent() {
    return (
      // Тут будет код, представляющий элемент пользовательского интерфейса
    );
  }
</script>

Когда мы вызываем функцию OurFirstComponent(), в ответ приходит фрагмент страницы.

Функции можно писать и так:

const OurFirstComponent = () => {
  return (
    // То, что нужно для создания компонента, идёт сюда
  );
}

React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.

Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:

<script type="text/babel">
  function OurFirstComponent() {
    return (
      <h1>Hello, I am a React Component!</h1>
    );
  }
</script>

Когда мы вызываем функцию OurFirstComponent(), она возвращает фрагмент JSX-кода. Мы можем использовать так называемый ReactDOM для вывода того, что представляет этот код, на страницу:

<script type="text/babel">
  function OurFirstComponent() {
    return (
      <h1>Hello, I am a React Component!</h1>
    );
  }
  const placeWeWantToPutComponent = document.getElementById('hook');
  ReactDOM.render(OurFirstComponent(), placeWeWantToPutComponent);
</script>

Теперь тег <h1> окажется внутри элемента с ID hook. Когда вы обновите страницу браузера, она должна выглядеть так:


Можно и написать собственный компонент на JSX. Делается это так:

ReactDOM.render(<OurFirstComponent />, placeWeWantToPutComponent);

Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.

Сборка компонентов

Компоненты React можно помещать в другие компоненты.

<script type="text/babel">
  function OurFirstComponent() {
    return (
      <h1>I am the child!</h1>
    );
  }
  function Container() {
    return (
      <div>
        <h1>I am the parent!</h1>
        <OurFirstComponent />
      </div>
    );
  }
  const placeWeWantToPutComponent = document.getElementById('hook');
  ReactDOM.render(<Container />, placeWeWantToPutComponent);
</script>

Вот что выведет вышеприведённый код:


Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.

Классы компонентов

До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.

class Container extends React.Component {
  render() {
    return (
      <div>
        <h1>I am the parent!</h1>
        <OurFirstComponent />
      </div>
    );
  }
}
const placeWeWantToPutComponent = document.getElementById('hook');
ReactDOM.render(<Container />, placeWeWantToPutComponent);

Классы компонентов должны содержать функцию, называемую render(). Эта функция возвращает JSX-код компонента. Их можно использовать так же, как функциональные компоненты, например, обращаясь к ним с помощью конструкции:

<AClassComponent />

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

JavaScript в JSX

В JSX-код можно помещать переменные JavaScript. Выглядит это так:

class Container extends React.Component {
  render() {
    const greeting = 'I am a string!';
    return (
      <div>
        <h1>{ greeting }</h1>
        <OurFirstComponent />
      </div>
    );
  }
}

Теперь текст «I am a string» окажется внутри тега <h1>.

Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:

class Container extends React.Component {
  render() {
    const addNumbers = (num1, num2) => {
      return num1 + num2;
    };
    return (
      <div>
        <h1>The sum is: { addNumbers(1, 2) }</h1>
        <OurFirstComponent />
      </div>
    );
  }
}

Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:

Подводные камни JSX

Переименуйте OurFirstComponent() в PlayButton. Нам надо, чтобы этот компонент возвращал следующее:

<a href="#" title="Play video" class="play" />

Однако, тут мы сталкиваемся с проблемой: class — это ключевое слово JavaScript, поэтому использовать его мы не можем. Как же назначить класс play элементу <a>?

Для того, чтобы этого добиться, нужно воспользоваться свойством className:

<script type="text/babel">
  function PlayButton() {
    return <a href="#" title="Play video" className="play" />;
  }
  class Container extends React.Component {
    render() {
      return (
        <div>
          <PlayButton />
        </div>
      );
    }
  }
  const placeWeWantToPutComponent = document.getElementById('hook');
  ReactDOM.render(<Container />, placeWeWantToPutComponent);
</script>

Особенности создаваемого компонента

Компоненты, основанные на классах, могут хранить информацию о текущей ситуации. Эта информация называется состоянием (state), она хранится в JS-объекте. В нижеприведённом коде показан объект, представляющий состояние нашего компонента. Его ключ — это isMusicPlaying, с ним связано значение false. Этот объект назначен this.state в методе constructor, который вызывается при первом использовании класса.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  
  render() {
    return (
      <div>
        <PlayButton />
      </div>
    );
  }
}

Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?

Изменение компонента React на основе его состояния

Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.

Вот с чего мы начнём. Узнаем состояние компонента с помощью конструкции this.state. В следующем коде мы проверяем состояние и используем его для принятия решения о том, какой текст показать пользователю.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  render() {
    const status = this.state.isMusicPlaying ? 'Playing' : 'Not playing';
    return (
      <div>
        <h1>{ status }</h1>
        <PlayButton />
      </div>
    );
  }
}

В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.


Всё это не особенно полезно, если у нас нет способа изменять this.state.isMusicPlaying.

Как компонент реагирует на события?

Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  handleClick(event) {
    // Отреагировать на щелчок мышью
  };
  render() {
    let status = this.state.isMusicPlaying 
    ? 'Playing :)' 
    : 'Not playing :(';
    return (
      <div>
        <h1 onClick={this.handleClick.bind(this)}>{ status }</h1>
        <PlayButton />
      </div>
    );
  }
}

Когда пользователь щёлкает по тексту, представленному тегом <h1>, компонент вызывает функцию handleClick. Функция получает объект события в качестве аргумента, а это значит, что она может, при необходимости, им пользоваться.

Мы используем метод .bind функции handleClick для того, чтобы ключевое слово this ссылалось на весь компонент, а не только на <h1>.

Как должен работать компонент

Когда меняется состояние компонента, он снова вызовет функцию render. Мы можем изменить состояние с помощью this.setState(), если передадим этой функции объект, представляющий новое состояние. Компонент на странице всегда будет представлять своё текущее состояние. React самостоятельно обеспечивать такое поведение компонентов.

handleClick() {
    if (this.state.isMusicPlaying) {
      this.setState({ isMusicPlaying: false });
    } else {
      this.setState({ isMusicPlaying: true });
    }
  };

Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.

Обмен данными между компонентами

Компоненты могут «общаться» друг с другом. Посмотрим, как это работает. Мы можем сообщить PlayButton, проигрывается музыка или нет, используя так называемые свойства (props). Свойства — это информация, коллективно используемая родительским компонентом и компонентами-потомками.

Свойств в JSX выглядят так же, как HTML-свойства. Мы назначаем PlayButton свойство, называемое isMusicPlaying, которое является тем же самым, что и isMusicPlaying в this.state.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  handleClick() {
    if (this.state.isMusicPlaying) {
      this.setState({ isMusicPlaying: false });
    } else {
      this.setState({ isMusicPlaying: true });
    }
  };
  render() {
    return (
      <div>
        <PlayButton isMusicPlaying={this.state.isMusicPlaying} />
      </div>
    );
  }
}

Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.

Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:

function PlayButton(props) {
  const className = props.isMusicPlaying ? 'play active' : 'play';
  return <a href="#" title="Play video" className={className} />;
}

Если мы поменяем состояние на this.state = { isMusicPlaying: true }; и перезагрузим страницу, на ней должна появиться кнопка паузы:

События как свойства

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

function PlayButton(props) {
  const className = props.isMusicPlaying ? 'play active' : 'play';
  return <a onClick={props.onClick} href="#" title="Play video" className={className} />;
}
class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  handleClick() {
    if (this.state.isMusicPlaying) {
      this.setState({ isMusicPlaying: false });
    } else {
      this.setState({ isMusicPlaying: true });
    }
  };
  render() {
    return (
      <div>
        <PlayButton 
          onClick={this.handleClick.bind(this)} 
          isMusicPlaying={this.state.isMusicPlaying} 
        />
      </div>
    );
  }
}

Теперь, когда мы щёлкаем по кнопке PlayButton, она меняет состояние Container, которое изменит props PlayButton, что приведёт к обновлению кнопки на странице.

Неприятная особенность setState

При вызове setState изменение состояния не производится мгновенно. React ждёт немного для того, чтобы увидеть, не нужно ли внести ещё какие-то изменения, и только потом производит изменение состояния. Это означает, что нельзя точно знать, каким будет состояние компонента после вызова setState.

Поэтому вот так поступать не следует:

handleClick() {
  this.setState({ isMusicPlaying: !this.state.isMusicPlaying });
};

Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.

Выглядит это так:

handleClick() {
  this.setState(prevState => {
    return { 
      isMusicPlaying: !prevState.isMusicPlaying   
    };
  });
};

Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.

Что такое ссылки?

Пришло время включить музыку. Для начала добавим тег <audio>:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMusicPlaying: false };
  }
  handleClick() {
    this.setState(prevState => {
      return { 
        isMusicPlaying: !prevState.isMusicPlaying   
      };
    });
  };
  render() {
    return (
      <div>
        <PlayButton 
          onClick={this.handleClick.bind(this)} 
          isMusicPlaying={this.state.isMusicPlaying} 
        />
        <audio id="audio" />
      </div>
    );
  }
}

Нам нужен способ обратиться к тегу <audio> и вызвать либо его метод play(), либо pause(). Сделать это можно с помощью конструкции document.getElementById('audio').play(), но React предлагает кое-что получше.

Мы назначаем элементу атрибут, называемый ref, который принимает функцию. Эта функция, в качестве первого аргумента, принимает элемент <audio>, и присваивает его this.audio.

<audio id="audio" ref={(audioTag) => { this.audio = audioTag }} />
Эта функция будет вызываться каждый раз, когда выводится Container, то есть, this.audio всегда будет в актуальном состоянии и будет указывать на тег <audio>.
Теперь мы можем запускать и приостанавливать воспроизведение музыки:

handleClick() {
  if (this.state.isMusicPlaying) {
    this.audio.pause();
  } else {
    this.audio.play();
  }
  this.setState(prevState => {
    return { 
      isMusicPlaying: !prevState.isMusicPlaying   
    };
  });
};

Выгрузим на страницу музыкальный файл (лучше — в формате .mp3) с использованием кнопки Choose files, нажмём на кнопку запуска воспроизведения и послушаем музыку.

React за пределами index.html

Как вы, возможно, догадались, React-код не должен «жить» исключительно внутри тега <script>. React поддерживает множество конфигураций сборки. К счастью, с помощью инструментов вроде Create React App всю рутинную работу по формированию каркаса приложения можно автоматизировать. Установите create-react-app, создайте новый проект, посмотрите руководство и приступайте к работе с JS-файлами в папке проекта src, применяя все те знания по React, которые вы сегодня получили.

Итоги

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

Уважаемые читатели! Если сегодня состоялось ваше первое знакомство с React — просим поделиться впечатлениями.