Основы JSX
JSX представляет способ описания визуального кода посредством комбинации кода на JavaScript и разметки XML. В реальности для разработки под React использование JSX не требуется, однако примение JSX является рекомендуемым способом создания интерфейса.
Так, в прошлой теме мы рассмотрели создание первого самого примитивного приложения, где использовался код JSX:
const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React
// получаем корневой элемент
const root = ReactDOM.createRoot(rootNode);
// рендеринг в корневой элемент
root.render(
<h1>Hello React</h1> // элемент, который мы хотим создать
);
В данном случае с помощью JSX определялся элемент h1, то есть заголовок.
Однако кроме того, JSX позволяет вводить в эти элементы код JavaScript. Например, определим следующую страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
<div id="app"> </div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM
.createRoot(document.getElementById("app"))
.render(
<h2>2 + 2 = {2 + 2}</h2>,
);
</script>
</body>
</html>
С помощью фигурных скобок в код html можно вводить код на JavaScript, который затем выполняется, а на веб-станице мы увидим его результат:
В выражениях можно использовать и более сложные объекты:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
<div id="app"> </div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const user = {
id : 5,
age: 33,
firstName: 'Tom',
lastName: 'Smit',
getFullName: function(){
return `${this.firstName} ${this.lastName}`;
}
};
ReactDOM
.createRoot(document.getElementById("app"))
.render(
<div id={user.id}>
<p>Полное имя: {user.getFullName()}</p>
<p>Возраст: {user.age}</p>
<p>Время генерации данных: {new Date().toLocaleTimeString()}</p>
</div>
);
</script>
</body>
</html>
Здесь в элемент вводятся значения из объекта user, либо также мы можем использовать встроенные объекты типа Date.
При работе с JSX следует учитывать ряд моментов, в частности, в JSX для установки класса применяется атрибут className, а не class.
Второй момент: атрибут style в качестве значения принимает объект javascript.
И третий момент: в JSX используется camel-case, то есть если мы хотим определить стилевое свойство для шрифта, например, свойство font-family,
то соответствующее свойство в объекте стиля будет называться fontFamily, то есть дефис отбрасывается, а следующая часть слова начинается с
заглавной буквы. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
<style>
.user-info{
padding: 8px;
border: 1px #ccc solid;
}
</style>
</head>
<body>
<div id="app"> </div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const user = {
id : 5,
age: 33,
firstName: 'Tom',
lastName: 'Smit',
getFullName: function(){
return `${this.firstName} ${this.lastName}`;
}
};
const userClassName = "user-info";
const styleObj = {
color:'red',
fontFamily:'Verdana'
};
ReactDOM
.createRoot(document.getElementById("app"))
.render(
<div className={userClassName} style={styleObj}>
<p>Полное имя: {user.getFullName()}</p>
<p>Возраст: {user.age}</p>
</div>
);
</script>
</body>
</html>
А если б мы определяли стиль inline, то это выглядело бы так:
<div className={userClassName} style={{color:'red', fontFamily:'Verdana'}}>
JSX и Babel
Для компиляции JSX в JavaScript использовался специальный инструмент - компилятор Babel. Для этого, во-первых, на веб-страницу подключался скрипт компилятора:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Это специальный скрипт, который позволяет при запуске веб-страницы в брузере на лету преобразовать весь содержащийся на ней код React в код javascript, понятный браузеру.
Во-вторых, элемент script, который содержал основной код приложения, имел атрибут type="text/babel":
<script type="text/babel">
const rootNode = document.getElementById("app");
const root = ReactDOM.createRoot(rootNode);
root.render(
<h1>Hello React</h1>
);
</script>
Если мы уберем подключениие скрипта компилятора Babel или уберем атрибут type="text/babel" наш код не будет работать. Более того
в браузере мы увидим ошибки, поскольку по умолчанию мы не можем определять код html в javascript, как это делается с помощью JSX. Нам обязательно
надо транслировать код JSX в обычный JavaScript, который понимается браузером.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи