7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

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

Read Time: 4 mins

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. Вот пример:

Код 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:

Вот скомпилированный код React:

2. Код JSX обеспечивает читаемость и упрощает поддержку.

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

Начинаем

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

Как видно из приведенного выше кода, мы ссылаемся на скрипты react и react-dom на странице index.html. Мы также использовали ссылку на скрипт babel, который преобразует код JSX в вызовы функций react. Например, рассмотрим следующий код JSX:

Babel преобразует вышеуказанный код JSX в требуемую функцию react , как показано:

Запись компонентов React с помощью JSX

Давайте создадим компонент React, который отобразит приветственное сообщение. Вот как выглядит код:

Message является компонентом react, который возвращает вышеуказанный код JSX, который затем скомпилирован для использования кода функции React с помощью Babel. Используя ReactDOM.render, мы визуализируем компонент внутри элемента HTML div main.

Сохраните приведенные выше изменения и попробуйте просмотреть страницу index.html в браузере, и вы должны иметь увидеть сообщение Welcome TutsPlus в своем браузере.

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

Большую часть времени требуется передавать данные нашим компонентам, которые будут выполняться или модифицироваться, а затем визуализироваться. Давайте посмотрим, как мы можем передавать атрибуты нашим компонентам и отображать данные.

Предположим, мы хотим передать имя нашему компоненту Message и отобразить его в нашем сообщении. Во-первых, мы добавим пользовательский атрибут к нашему компоненту.

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

Сохраните приведенные выше изменения и просмотрите страницу index.html, и вы сможете увидеть сообщение.

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

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

Начните с добавления ссылки на API Карт Google в index.html.

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

Добавьте метод, называемый componentDidMount в компоненте React, и внутри этого метода определите связанные с картой переменные, как показано:

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

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

Сохраните указанные выше изменения и попробуйте просмотреть страницу index.html, и вы сможете просматривать Карты Google в действии.

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

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

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.