Короткий посібник 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>{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'>
{фото}
<div>
)
}
});

React.render(<PhotoGallery >, document.body);


Компонент Photo залишився таким же, як і був.

З'явився новий компонент PhotoGallery, який генерує компоненти Photo. У прикладі використовуються підроблені дані сервера, які повертають масив з 3 об'єктів з url і заголовком.

У циклі створюються 3 компонента Photo, які потім підставляються в обчислене значення функції render.

Висновок

Цього цілком достатньо для того, щоб почати будувати інтерфейси з використанням React. Більш докладний опис є в документації і вона вкрай рекомендується до прочитання.
У посібнику також не було деталей з налаштування локального оточення. Ви можете дізнатися з документації, або використовувати мій boilerplate.

Оригінал статті: The React Quick Start Guide

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.