Знакомство с React и JSX

Знакомство с React и JSX

От автора: в этом уроке мы узнаем, как создать приложение на React, а также попробуем понять основы JSX. Предполагается, что вы уже хорошо знаете HTML и JavaScript.

Что такое React?

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

Что такое JSX?

JSX – JS расширение, схожее с XML. Пример:

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:

<div>
<p>Welcome to TutsPlus</p>
</div>

Компилированный код React:

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

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

3. JSX оптимизирует код во время компиляции, поэтому он запускается быстрее, чем такой же код на JS.

Начинаем

Давайте напишем что-нибудь на JSX и покажем это в браузере. Чтобы создать React приложение, создайте простую страничку index.html со следующей структурой:

<html>
<head>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <script src="https://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 код:

var grp = <div>
  <p>Welcome to TutsPlus</p>
</div>;

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

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

Как писать компоненты React с помощью JSX

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

<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 и выводить его в сообщении. Сперва необходимо добавить пользовательский атрибут в компонент.

ReactDOM.render(<Message name="Roy" />,document.getElementById('main'));

Переданный атрибут можно считать из функции рендеринга компонента при помощи this.props по ключу. Измените код, как показано ниже:

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.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Создайте компонент MyMap, как показано ниже:

var MyMap = React.createClass({
 render: function() {
 return (
 <div id="map"><span></span></div>
 );
 }
});
 
ReactDOM.render(<MyMap />,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 (
 <div id="map"><span></span></div>
 );
 }
});

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

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

ReactDOM.render(<MyMap />,document.getElementById('main'));

Сохраните изменения и откройте в браузере index.html. Перед вами откроется Google Maps.

Заключение

В этом уроке мы познакомились с React и JSX. Мы узнали, как создавать React компоненты с помощью JSX, а также создали компонент Google Map. В следующих уроках мы разберем больше возможностей React.

Исходники урока доступны на GitHub. Вы уже пробовали создавать React компоненты? Буду рад услышать ваши истории. Пишите об этом в комментариях.

Автор: Roy Agasthyan

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Уроки AngularJS

Изучите все возможности AngularJS в авторском курсе!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree