Разработка на React. JSX
Ранее мы создавали React элемент при помощи следующего синтаксиса:
React.createElement('h1', null, 'heading');
Это не подходит, если ведется разработка большого приложения со сложным интерфейсом. Используя только этот синтаксиc разработка сильно замедлится, так как он слишком многословен. Поэтому компания Facebook представила синтаксис JSX (JavaScript Syntax Extension), который сильно напоминает язык разметки HTML, но по факту это расширение JavaScript.
Сравнение с createElement
Ранее мы создавали элемент h1 при помощи createElement
ReactDOM.render(
React.createElement('h1', null, 'First React App'),
document.getElementById('root')
);
То же самое на JSX будет выглядеть следующим образом:
<h1>First React App</h1>
Выглядит как обычный HTML код, но не стоит путать. JSX – синтаксический сахар для createElement.
Использование
JSX это расширение JavaScript, по этому все также можем использовать всю силу JS, лишь с некоторыми замечаниями.
Выражения
Внутри JSX можно использовать выражения или переменные JavaScript, поместив лишь в фигурные скобки.
<h1>{name}</h1>
У JSX кода те же возможности как и у JS объектов: присваивание переменным, передача в функции и возврат как результат работы в функций и т.д.
const el = (
<h1> This is object </h1>
);
<h1> Hi, {user ? user.name : ‘stranger’}</h1>
className
Слово class уже зарегистрировано в JavaScript, поэтому используется альтернативное – className.
<button className=”btn btn-small”> Button </button>
Массивы
Так как JSX, включает функциональность JS, то и вывод происходит через перебирающие методы.
<div class=”gallery”>
{this.props.images.map((image, i) =>
<img key={i} src={image.url} />
)}
</div>
JSX также как HTML имеет уровни вложенности. Дочерние элементы могут содержать в себе как стандартные HTML теги, так и созданные компоненты, о которых поговорим позже.
Комментарии
Так же, как и в JS для комментирования можно использовать // либо для многострочных /* … */
Транспиляция
Конечно же, код в JSX не может быть выполнен в обычном браузере и поэтому он подвергается постобработке – транспиляции. Транспиляция – это процесс перевода исходного кода одного языка в другой. Для транспилирования JSX в JavaScript применяется транспайлер Babel.
Кроме того, мы можем использовать новые спецификации JavaScript не задумываясь о его поддержке в старых браузерах, его преобразованием также займется Babel.
К примеру, следующий JSX код:
<h1 className=”title”>First React App</h1>
Будет транспонирован в уже известный нам синтаксис с createElement:
React.createElement(‘h1’, {className: ‘title’, null);
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Вы, скорее всего, заметили, что появился еще один скрипт.
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
Это самый простой вариант подключения Babel, но для больших проектов этот путь не подходит и уже придется прибегнуть к сборщикам, к примеру Webpack с плагином babel-loader.
Далее, в примере, добавлен JSX скрипт с типом type="text/babel" который будет обработан транспилятором и переведен в нативный JavaScript.
Как видно, в функцию render передается код <h1>Hello, world!</h1>. Данный код не сможет работать в браузере без постобработки.
Резюме
На первый взгляд, смесь JS и HTML может показаться абсурдным, но в дальнейшем, при разработке крупных приложений на React, преимущество за JSX будет очевидным. Перечислим основные плюсы:
- Меньше кода
- Проще использовать
- Оптимизация при компиляции