От автора: в этом уроке мы узнаем, как создать приложение на React, а также попробуем понять основы JSX. Предполагается, что вы уже хорошо знаете HTML и JavaScript.
Что такое React?
React – JS библиотека, разработанная Facebook* для упрощения управления интерфейсами в веб-приложениях. Отличительная особенность React в том, что с его помощью можно создавать управляемые UI компоненты, которые помогают легко масштабировать проекты до крупных веб-приложений. В основе React лежит концепция Virtual DOM – зеркальное отражение реального DOM. Всякий раз, как вносятся изменения, React запускает процесс их отлова и обновляет настоящий DOM. Концепция Virtual DOM позволяет ускорить рендеринг приложений и повышает производительность.
Что такое JSX?
JSX – JS расширение, схожее с XML. Пример:
|
1 2 3 4 |
ReactDOM.render( <h1>Welcome React, TutsPlus !!</h1>, 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:
|
1 2 3 |
<div> <p>Welcome to TutsPlus</p> </div> |
Компилированный код React:
|
1 2 3 4 5 6 7 8 9 10 11 |
"use strict"; React.createElement( "div", null, React.createElement( "p", null, "Welcome to TutsPlus" ) ); |
2. JSX код легче читается и упрощает обслуживание.
3. JSX оптимизирует код во время компиляции, поэтому он запускается быстрее, чем такой же код на JS.
Начинаем
Давайте напишем что-нибудь на JSX и покажем это в браузере. Чтобы создать React приложение, создайте простую страничку index.html со следующей структурой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> <script src="//unpkg.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> // JSX code would be here </script> </head> <body> <div id="container"> </div> </body> </html> |
В коде выше видно, что мы подключили скрипты react и react-dom. Также мы подключили скрипт babel, который будет переводить JSX код в вызовы react функций. К примеру, разберем следующий JSX код:
|
1 2 3 |
var grp = <div> <p>Welcome to TutsPlus</p> </div>; |
Babel переведет JSX код выше в подходящую react функцию:
|
1 2 3 4 5 6 7 8 9 |
var grp = React.createElement( "div", null, React.createElement( "p", null, "Welcome to TutsPlus" ) ); |
Как писать компоненты React с помощью JSX
Давайте создадим React компонент с приветствием. Код будет такой:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/babel"> var Message = React.createClass({ render:function(){ return <h1>Welcome to TutsPlus</h1> } }); ReactDOM.render(<Message />,document.getElementById('main')); </script> |
Message – компонент react, возвращающий JSX код выше, который затем при помощи Babel компилируется в функцию React. С помощью ReactDOM.render мы отрисовываем компонент внутри HTML тега div main.
Сохраните изменения и попробуйте открыть index.html в браузере. Перед вами должно появиться сообщение Welcome to TutsPlus.
Как передавать атрибуты в компоненты
В большинстве случаев в компоненты необходимо передавать данные, которые будут изменяться, оцениваться и выводиться на экран. Давайте посмотрим, как можно передавать атрибуты в компоненты и отображать данные.
Предположим, что мы хотим передать имя в компонент Message и выводить его в сообщении. Сперва необходимо добавить пользовательский атрибут в компонент.
|
1 |
ReactDOM.render(<Message name="Roy" />,document.getElementById('main')); |
Переданный атрибут можно считать из функции рендеринга компонента при помощи this.props по ключу. Измените код, как показано ниже:
|
1 2 3 4 5 |
var Message = React.createClass({ render:function(){ return <h1>Welcome to TutsPlus, {this.props.name}</h1> } }); |
Сохраните изменения и откройте в браузере страницу index.html. Перед вами должно появиться сообщение: Welcome to TutsPlus, Roy
Создаем React компонент Google Map с помощью JSX
Мы познакомились с JSX и научились создавать с его помощью React компоненты. Давайте создадим компонент, в котором будем выводить на экран Google Maps.
Сперва необходимо указать ссылку на Google Maps API в index.html.
|
1 |
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script> |
Создайте компонент MyMap, как показано ниже:
|
1 2 3 4 5 6 7 8 9 |
var MyMap = React.createClass({ render: function() { return ( <div id="map"><span></span></div> ); } }); ReactDOM.render(<MyMap />,document.getElementById('main')); |
Добавьте в компонент метод componentDidMount, внутри метода определите переменные для карты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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 ( <div id="map"><span></span></div> ); } }); |
Метод componentDidMount выполняется сразу после первоначальной отрисовки. Внутри данного метода инициализируются все объекты карты. ReactDOM.findDOMNode находит ссылку на узел компонента в DOM и создает объект карты. Переменная marker была создана для таких свойств, как map, position и animation.
Попробуйте отрендерить компонент карты внутри #main div.
|
1 |
ReactDOM.render(<MyMap />,document.getElementById('main')); |
Сохраните изменения и откройте в браузере index.html. Перед вами откроется Google Maps.
Заключение
В этом уроке мы познакомились с React и JSX. Мы узнали, как создавать React компоненты с помощью JSX, а также создали компонент Google Map. В следующих уроках мы разберем больше возможностей React.
Исходники урока доступны на GitHub. Вы уже пробовали создавать React компоненты? Буду рад услышать ваши истории. Пишите об этом в комментариях.
Автор: Roy Agasthyan
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
