Начало работы с React и JSX

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Что такое React?

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

Что такое JSX?

JSX - это расширение синтаксиса JavaScript, которое похоже на XML. Вот пример:

ReactDOM.render(
  <h1>Welcome React, TutsPlus !!</h1>,
  document.getElementById('container')
);

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

Из официальных документов:

JSX является XML-подобным расширением синтаксиса для ECMAScript без какой-либо определенной семантики. Он НЕ предназначен для использования движками или браузерами. Это НЕ предложение включить JSX в саму спецификацию ECMAScript. Он предназначен для использования различными препроцессорами (транспилерами) для преобразования этих токенов в стандартный ECMAScript.

Зачем использовать JSX?

На самом деле не требуется использовать JSX во время работы с приложениями React. Вы можете использовать простой старый код JavaScript. Но использование JSX имеет свои преимущества:

1. По сравнению с JavaScript, проще писать 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 оптимизирует код при компиляции, поэтому он работает быстрее по сравнению с эквивалентным кодом JavaScript.

Начинаем

Давайте продолжим изучение дальше, написав код 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 на странице index.html. Мы также использовали ссылку на скрипт 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, который затем скомпилирован для использования кода функции React с помощью Babel. Используя ReactDOM.render, мы визуализируем компонент внутри элемента HTML div main.

Сохраните приведенные выше изменения и попробуйте просмотреть страницу index.html в браузере, и вы должны иметь увидеть сообщение Welcome 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

Создание компонента Google Map React с использованием JSX

Теперь, когда мы знакомы с JSX и умеем создавать компоненты React с помощью JSX, давайте попробуем создать компонент React для отображения Карт Google.

Начните с добавления ссылки на API Карт Google в 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 в компоненте React, и внутри этого метода определите связанные с картой переменные, как показано:

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 в действии.

Подведем итоги

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

Исходный код этого учебника доступен в GitHub.

А вы пробовали создавать свои компоненты React? Я хотел бы услышать ваш опыт. Сообщите мне свои мысли в комментарии ниже.