Библиотека React для Javascript

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

React – простая библиотека

Опытные разработчики всегда скептический относятся к новым технологиям. Зачем изучать ещё одну библиотеку, если уже есть проверенные временем Bootstrap и Angular? Однако React позволяет более эффективно подойти к вопросу создания пользовательского интерфейса.

Главная задача React – создание красивого UI. Библиотека настолько простая, что даже новичок в javascript сможет разобраться, изучая официальную документацию. Глядя на код сайта, вы без проблем скажете, как будет нарисован элемент. Например, нужно изменить заголовок сайта на имя пользователя. Без использования фреймворков код будет такой:

<header><div class=»name»></div></header>
$.post(‘/login’, credentials, function( user ) {
//остальные изменения
$(‘header .name’).show().text( user.name );
});

Для небольшого проекта писать так простительно, но кода идёт работа над большим приложением или сайтом, подобный подход сильно усложнит жизнь вам и вашим коллегам. Используя React, можно добиться следующего:

render: function()
{
return<header> { this.state.name ? <div>this.state.name</div> : null } </header>;
}

React позволяет быстро создать красивый интерфейс, объединив javascript код и разметку html. Но одной этой библиотеки недостаточно для создания полноценного приложения. Если обратиться к паттерну MVC, то React – это View, то есть представлением. Бизнес логику и контроллер программист должен реализовать самостоятельно.

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

Компонентом является любая структура, которую создал программист и которая может использоваться повторно. Разберём страницу google.com. Всё, что можно увидеть на сайте – это компонент. Например, лого компании, кнопки, строка поиска и так далее. Каждый этот элемент можно использовать повторно на сайте.
Для разработчика каждый компонент – это функция на javascript, которая возвращает html код. Чтобы сформировать страницу, нужно вызывать эти функции в определённом порядке.

Пример функции:

<script type=»text/babel»>
function OurFirstComponent() {
return (
<h1>HelloWorld</h1>
);
}
</script>

Этот тег помещается прямо в код html страницы.Внутри блока returnописывается компонент. В React используется язык JSX. Внешне он похож на обычный html. Главное отличие от языка разметки – JSX может работать внутри JSкода.

Чтобы вызвать этот компонент, допишите перед тегом </script>:

const placeWeWantToPutComponent = document.getElementById(‘hook’);
ReactDOM.render(<OurFirstComponent>, placeWeWantToPutComponent);

Один компонент может состоять из нескольких функций. Пример составного компонента:

function Container() {
return (
<div>
<h1>I am the parent!</h1>
<OurFirstComponent /> //В функции Container мы вызываем наш предыдущий компонент.
</div>
); }

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

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

То, что описывалось до этого – это функциональные компоненты. Но React позволяет описать структуру прямо в javascript классе. Обязательное условие для нормальной работы – наличие функции render, которая возвращает JSX код.

Пример компонента класса:

class Container extends React.Component {
render() {
return (
<div>
<h1>Компонент класса</h1>
<OurFirstComponent />
</div>
); } }

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

Язык JSX

В JSX довольно много возможностей. Несмотря на то, что это простой html, вы можете использовать в этом языке переменные, вызывать функции и даже писать свою логику. Для примера изменим функцию render предыдущего класса:

render() {
const greeting = ‘I am a string!’;
return (
<div>
<h1>{ greeting }</h1>
<OurFirstComponent />
</div>
); }

Часто в render приходится описывать другие функции. Делается это так: <h1>The sum is: { add(5, 10) }</h1> Здесь мы вызываем add(), в которую передаются два параметра. В качестве параметров можно использовать переменные или значения, которые вернёт другая функция.

Состояния компонента

Многие компоненты должны хранить в себе текущее состояние. Для примера возьмём кнопку, которая включает музыку на сайте, состояние назовём isPlaying=false. При первом нажатии его значение должно измениться на true, при втором – на false.

Пример компонента с состоянием:

class Container extends React.Component {
constructor(props) {
super(props);//обязательная функция
this.state = { isMusicPlaying: false };
}
render() {
return (
<div>
<PlayButton />
</div>
);
}
}

Так как нас интересует только работа с состоянием, вынесем описание кнопки в компонент PlayButton. Его реализацию вы можете написать самостоятельно. Перед функцией render описывается конструктор класса, в котором устанавливается this.state. Состояние можно использовать в других частях программы по ключу isMusicPlaying. Если вы используйте классовые компоненты, обязательно вызывайте в конструкторе super(). Это особенность работы с React.

Работа с состоянием

Само по себе состояние ничего не делает, но при его изменении возникает событие. Для примера изменим текст на кнопке. Для этого объявляем переменную status, которой присваиваем Playing, если музыка играет (то есть state=true), NotPlaying, если не играет. Выбор текста можно реализовать с помощью тернарного оператора:

const status = this.state.isMusicPlaying ? ‘Playing’ : ‘Not playing’;

Чтобы обратиться к состоянию по ключу, используется ключевое слово this. Оно всегда возвращает ссылку на текущий компонент. Объект stateхранит в себе все состояния компонента. Для отображения текста:

<h1>{status}</h1>

Изменить состояние можно в событии OnClick. Добавим обработчик, в нашем случае, это будет простая функция:

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

Для изменения значения состояния используется метод setState(). В качестве параметра он принимает ключ и новое значение.

Чтобы кнопка как-то реагировала на OnClick, нужно добавит обработчик:

<h1 onClick={this.handleClick.bind(this)}>{ status }</h1>

Обязательное вызывайте метод bind(this) у функции, обрабатывающей событие. Это нужно для того, чтобы в this была записана ссылка на весь компонент, а не на тег <h1>.

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

При вызове этой функции React не изменяет состояние объекта мгновенно. Библиотека ждет несколько миллисекунд, проверяя не требуются ли ещё какие-нибудь изменения. В целом, задержка никак не повлияет на работу программы, если правильно использовать функцию SetState.

Не правильно: this.setState({ isMusicPlaying: !this.state.isMusicPlaying }); В этом примере мы устанавливаем значение, на основе предыдущего состояния. Но за миллисекунду isMusicPlaying может измениться.

Правильнее будет передавать не объект state, а функцию:

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

Функция prevState в качестве аргумента принимает старое состояние, а возвращает объект с новым значением.