Знакомство с 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. Пример:

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

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

Узнать подробнее

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

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

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

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

Начинаем

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

В коде выше видно, что мы подключили скрипты react и react-dom. Также мы подключили скрипт babel, который будет переводить JSX код в вызовы react функций. К примеру, разберем следующий JSX код:

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

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

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

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

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

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

Узнать подробнее

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

Как передавать атрибуты в компоненты

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

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

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

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

Создаем React компонент Google Map с помощью JSX

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

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

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

Добавьте в компонент метод componentDidMount, внутри метода определите переменные для карты:

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

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

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

Заключение

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

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

Автор: Roy Agasthyan

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

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

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

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

Узнать подробнее

Уроки AngularJS

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree