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

Использование JSX и React

Read Time: 10 mins
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

Вся прелесть React'а заключается в том, что вы можете создать код, который легко повторно использовать и структурировать ваше приложение основываясь на идеи компонентов. Наконец, создание структуры полагающейся на идеи семантики и реализация самого приложения, идут рука об руку.

Первый взгляд на JSX

Пример рендеринга JSX в HTML:

Для создания компонента, используйте локальные переменные, начинающиеся с большой буквы, то есть:

Обратите внимание: в JSX есть зарезервированные слова, так как в свой основе это тот же JavaScript—тем самым не стоит использовать слова class и for, в качестве имён атрибутов. Вместо этого свойства React компонентов должны иметь название className и htmlFor, к примеру.

Вложенные теги

Создание дочерних элементов в JSX, выглядит следующим образом:

Тестирование JSX

Чтобы проверить, как работает JSX, воспользуйтесь Babel REPL.

Суб-компоненты и пространство имён

Создать форму с JSX и суб-компонентами невероятно просто, к примеру:

Чтобы это работало, следует сделать суб-компонент и назначить его, как атрибут основного компонента:

Выражения

Чтобы добавить результат выполнения JavaScript кода в качестве значения атрибута React, вам следует обернуть выражение в {} фигурные скобки:

Также вы можете передать булево значение в качестве атрибута формы, disabled, checked и так далее. Эти значения также могут быть написаны обычным HTML.

Spread атрибуты

Когда вы хотите назначить несколько атрибутов, убедитесь, что вы делаете это во время объявления компонента, а не после. Позднее объявления - опасный анти-паттерн, это значит, есть вероятность, что на момент исполнения данные свойства могут быть недоступны.

Добавить несколько свойств компоненту, можно следующим образом, используйте ES6 новый ... spread оператор.

Комментарии в JSX

В JSX можно использовать как // так и /* ... */ - комментарий для нескольких строк. К примеру:

Подводные камни JSX

В JSX есть несколько вещей, которые могут некоторых застать врасплох, к примеру добавление атрибутов нативным HTML элементам, которые не существуют в HTML спецификации.

React не будет рендерить любые атрибуты HTML элементов, которых нет в спецификации, пока вы не добавите префикс  data-:

Также, рендеринг HTML внутри динамичного контента, может сбивать с толку, в связи с экранированием и XSS защитой, встроенной в React. По этому React предоставляет нам dangerouslySetInnerHTML.

Пример чат приложения

Возможно вам доводилось встречаться с приложением Gitter. Это приложение - веб-чат в реальном времени, в основном предназначенный для разработчиков. Многие используют это приложения, чтобы обсудить проекты на GitHub, связано это с простой интеграцией с GitHub и возможностью создания канала для вашего репозитория.

Приложение такого типа можно запросто сделать с React, используя WebRTC API для создания p2p чата в браузере. Мы будем использовать Node модули PeerJs и socket.io.

Для того чтобы вы поняли идею архитектуры приложения, вот простая низкоуровневая UML диаграмма:

filefilefile

ChatServer получает сообщения от PeerJS, и каждый клиент будет использовать прокси, чтобы позаботиться о NAT traversal.

Мы начнём делать это приложения с нуля, чтобы вы могли полностью почувствовать, как создавать React приложение. Сперва создайте новую директорию для вашего приложения, затем внутри этой директории создайте файл package.json.

Файл package.json используется npm, чтобы сконфигурировать ваше приложение. Мы указываем в нём зависимости: express; веб-фреймворк, который мы будем использовать, чтобы отправлять файлы нашего приложения; peer, сервер peerjs будет использовать для отправления сигналов; socket.io для пулинга и реализации webRTC. react-bootstrap и bootstrap библиотеки для использования CSS фреймворка от Twitter, тем самым мы сможем добавить стили нашему приложению.

Нам также понадобятся дополнительные библиотеки и для этого мы используем bower.

Создадим bower.json и добавим в него следующее:

В этом конфигурационном файлы, мы укажем react, jQuery, bootstrap, eventEmitter для запуска событий и peerJS клиентская библиотека, который послужит обёрткой WebRTC.

Ну и наконец, следует обозначить куда всё это должно быть установлено, в нашем .bowerrc файле:

На этом моменте, просто расслабьтесь и установите зависимости, с помощью команды:

Наконец когда закончится выполнение команды, вы увидите новые директории node_modules и src/lib. Тут находятся наши модули, готовые к использованию.

Теперь создайте app.js в основной директории рядом с package.json. Это будет главный файл нашего приложения.

Это создаст наш Express сервер, делая файлы, которые мы установили с помощью bower, в папке src/ доступными через HTTP. Далее мы создали экземпляр socket.io, чтобы слушать объект expressServer. Это будет использоваться для пулинга и послужит следующим шагом для создания PeerServer, который будет отвечать за WebRTC чат.

Чтобы сконфигурировать PeerServer, всё что вам нужно сделать, так это указать port и path сервер будет работать согласно этому, после чего начните конфигурацию событий при помощи метода .on. Мы используем отдельный файл под названием Events.js, чтобы указать события нашего приложения.

Мы используем событие events.CONNECT, чтобы определить когда пользователь присоединился к нашему приложению. Это понадобится состоянию нашего компонента представления (view), для обновления изображения на экране в реальном времени.

Чтобы это сделать, мы должны создать сервер для peer-to-peer соединения через прокси.

Создайте файл src/Server.js и добавьте туда следующее:

Это главные внутренности приложения. Здесь мы конфигурируем объект ChatSever всеми необходимыми функциями.

Сначала мы используем socket.io для установки отправления сигналов, когда новый пользователь присоединился, через events.CONNECT:

Затем, чтобы присоединиться к PeerSever, мы используем следующее:

Затем мы будет слушать события с помощью метода on:

Также внутри наших компонентов будет JSX, в components/chat директории. Советую потратить время и взглянуть на них в репозитории проекта. С этого момента я сфокусируюсь на компоненте ChatBox:

Этот класс использует ChatSever, который мы создали ранее, используя его как прокси для нашего ChatBox компонента.

Компонент и библиотеки наконец отрендерились на странице index.html и были отправлены благодаря node express.

Чтобы запустить приложение введите команду npm start и откройте браузер по адресу http://localhost:3001, чтобы взглянуть на чат.

Деплой на Heroku

Разместить наше приложение в облаке довольно легко с помощью Heroku. Зарегистрируйте бесплатный аккаунт, затем установите heroku toolbelt на ваш компьютер. Прочитать больше о настройке Heroku можно на Heroku Dev Center.

Теперь когда Heroku доступен, залогинтесь и создайте новый проект, сделать это можно следующим образом:

Вы получите случайное имя вашего приложения на Heroku, в моём случае ссылка, по которой можно открыть приложение выглядит так - http://sharp-rain-871.herokuapp.com/. Heroku также создаёт git репозиторий приложения.

Теперь вам остаётся лишь отправить код на heroku:

После того как процесс отправки закончится, вы можете запустить веб-сервис следующим образом:

Осталось лишь открыть соответствующую ссылку, или можете воспользоваться командой open:

Заключение

Вы научились, как создать JSX компоненты и как взаимодействовать с ними с помощью React, на наглядном примере приложения - чата. Потратьте время и изучите код, чтобы понять как React и директория components/chat устроена и работают.

Благодаря деплою на Heroku, вы можете начать создавать и работать над собственными 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.