Статья даст вам краткий обзор того, как строятся интерфейсы с помощью 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>{this.props.caption}<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>{this.props.caption}<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>{this.props.caption}<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
Автор: follower
