Знайомство з React і JSX

1

Від автора: у цьому уроці ми дізнаємося, як створити додаток на React, а також спробуємо зрозуміти основи JSX. Передбачається, що ви вже добре знаєте HTML і JavaScript.

Що таке React?

React – JS бібліотека, розроблена Facebook для спрощення управління інтерфейсами у веб-додатках. Відмітна особливість React в тому, що з його допомогою можна створювати керовані UI компоненти, які допомагають легко масштабувати проекти до великих веб-додатків. В основі React лежить концепція Virtual DOM – дзеркальне відображення реального DOM. Всякий раз, коли вносяться зміни, React запускає процес їх вилову і оновлює справжній DOM. Концепція Virtual DOM дозволяє прискорити обробку додатків і підвищує продуктивність.

Що таке JSX?

JSX – JS розширення, схоже з XML. Приклад:

ReactDOM.render(

Welcome React, TutsPlus !!

,
document.getElementById(‘container’)
);

Код JSX схожий на HTML, але насправді це суміш JS і HTML. Код вище показує повідомлення у тегах h1 всередині елемента container. JSX швидше JS, так як під час компіляції вихідного коду проводиться оптимізація. Краще працювати з JSX, так як він набагато простіше, ніж чистий JS код.

З документації: «JSX – розширення XML-подібний синтаксис для ECMAScript без семантики. Він НЕ виконується движками або браузерами. Це НЕ пропозиція про включення JSX специфікації ECMAScript. Це розширення створено для різних препроцесорів (транспиллеров), щоб перетворювати ці токени в стандартний ECMAScript.»

Навіщо використовувати JSX?

JSX необов’язково використовувати при роботі над React додатками. Можна обійтися й звичайним JS. Але у JSX є свої переваги:

1. Порівняно з JS, JSX простіше в написанні. Так само просто, як відкривати і закривати XML теги. Приклад JSX:

Welcome to TutsPlus

Компільований код React:

«use strict»;
React.createElement(
«div»,
null,
React.createElement(
«p»,
null,
«Welcome to TutsPlus»
)
);

2. JSX код легше читається і спрощує обслуговування.

3. JSX оптимізує код під час компіляції, тому він запускається швидше, ніж такий же код на JS.

Починаємо

Давайте напишемо що-небудь на JSX і покажемо це у браузері. Щоб створити React додаток, створіть просту сторінку index.html з такою структурою:

// JSX code would be here

У коді вище видно, що ми підключили скрипти react і react-dom. Також ми підключили скрипт babel, який буде переводити JSX-код в виклики react функцій. Приміром, розберемо наступний JSX код:

var grp =

Welcome to TutsPlus

;

Babel переведе JSX код вище в підходящу react функцію:

var grp = React.createElement(
«div»,
null,
React.createElement(
«p»,
null,
«Welcome to TutsPlus»
)
);

Як писати компоненти React з допомогою JSX

Давайте створимо React компонент з привітанням. Код буде такою:

var Message = React.createClass({
render:function(){
return

Welcome to TutsPlus

}
});
ReactDOM.render(,document.getElementById(‘main’));

Message – компонент react, повертає JSX код вище, який потім за допомогою Babel компілюється в функцію React. З допомогою ReactDOM.render ми промальовуємо компонент всередині HTML тега div main.

Збережіть зміни і спробуйте відкрити index.html у браузері. Перед вами повинно з’явитися повідомлення Welcome to TutsPlus.

Як передавати атрибути компоненти

У більшості випадків компоненти необхідно передавати дані, які будуть змінюватися, оцінюватися та виводитися на екран. Давайте подивимося, як можна передавати атрибути компоненти і відображати дані.

Припустимо, що ми хочемо передати ім’я компонент Message і виводити його в повідомленні. Спершу необхідно додати атрибут користувача в компонент.

ReactDOM.render(,document.getElementById(‘main’));

Переданий атрибут можна вважати функції рендеринга компонента за допомогою this.props по ключу. Змініть код, як показано нижче:

var Message = React.createClass({
render:function(){
return

Welcome to TutsPlus, {this.props.name}

}
});

Збережіть зміни і відкрийте в браузері сторінку index.html. Перед вами повинно з’явитися повідомлення: Welcome to TutsPlus, Roy

Створюємо React компонент Google Map з допомогою JSX

Ми познайомилися з JSX і навчилися створювати з його допомогою React компоненти. Давайте створимо компонент, в якому будемо виводити на екран Google Maps.

Спершу необхідно вказати посилання на Google Maps API в index.html.

Створіть компонент MyMap, як показано нижче:

var MyMap = React.createClass({
render: function() {
return (

);
}
});
ReactDOM.render(,document.getElementById(‘main’));

Додайте в компонент метод componentDidMount, всередині методу, визначити змінні для карти:

var MyMap = React.createClass({
componentDidMount: function() {
var latLong = new google.maps.LatLng(-47.888723, 444.675360);
var options = {
zoom: 2,
center: latLong
},
map = new google.maps.Map(ReactDOM.findDOMNode(this), options),
marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.BOUNCE,
position: latLong
});
},
render: function() {
return (

);
}
});

Метод componentDidMount виконується відразу після першого відтворення. Всередині даного методу ініціалізуються всі об’єкти карти. ReactDOM.findDOMNode знаходить посилання на сайт компонента в DOM і створює об’єкт карти. Змінна marker була створена для таких властивостей, як map, position та animation.

Спробуйте отрендерить компонент карти всередині #main div.

ReactDOM.render(,document.getElementById(‘main’));

Збережіть зміни і відкрийте в браузері index.html. Перед вами відкриється Google Maps.

Висновок

У цьому уроці ми познайомилися з React і JSX. Ми дізналися, як створювати React компоненти з допомогою JSX, а також створили компонент Google Map. У наступних уроках ми розберемо більше можливостей React.

Исходники уроку доступні на GitHub. Ви вже пробували створювати React компоненти? Буду радий почути ваші історії. Пишіть про це в коментарях.