JSX — это мощный инструмент в React, который позволяет вам создавать ваши пользовательские интерфейсы в стиле HTML, но с возможностью интегрировать JavaScript. Вам не придется писать бесконечные строки createElement, вы просто описываете, как ваш интерфейс должен выглядеть, и React делает остальное.
Работа с JSX
Давайте разберем основы работы с JSX.
Создание элемента
JSX позволяет создавать элементы пользовательского интерфейса так же, как в HTML, но с использованием JavaScript. Давайте создадим элемент кнопки с текстом «Нажми меня»:
const buttonElement = <button>Нажми меня</button>;
Здесь мы создали переменную buttonElement и использовали JSX для создания кнопки с текстом «Нажми меня».
Вставка данных в элемент
Часто вам приходится вставлять данные внутрь элементов JSX. Давайте предположим, у нас есть имя пользователя, и мы хотим его отобразить на странице:
const userName = "Джон";
const greetingElement = <p>Привет, {userName}!</p>;
В этом примере, мы создали переменную greetingElement, вставив имя пользователя в текстовый элемент при помощи фигурных скобок {}.
Условные операторы
JSX позволяет использовать условные операторы, чтобы изменять отображение элементов в зависимости от условий. Давайте создадим элемент, который будет отображать разные сообщения в зависимости от времени суток:
const currentTime = new Date().getHours();
let greetingElement;
if (currentTime < 12) {
greetingElement = <p>Доброе утро!</p>;
} else {
greetingElement = <p>Добрый вечер!</p>;
}
Создание списка
С JSX, создание списков элементов также становится простым. Например, у нас есть массив задач, и мы хотим создать список:
const tasks = ["Поход в магазин", "Завершить проект", "Пройти тренировку"];
const taskList = (
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
);
Здесь мы создали переменную taskList, используя метод .map() для создания элементов списка <li> на основе элементов массива tasks.
Обработка событий
JSX также позволяет добавлять обработчики событий. Предположим, у нас есть кнопка, и мы хотим вызвать функцию при ее нажатии:
function handleClick() {
alert("Кнопка была нажата!");
}
const buttonElement = <button onClick={handleClick}>Нажми меня</button>;
В этом примере мы создали функцию handleClick, которая вызывает всплывающее окно с сообщением при нажатии на кнопку.
Использование стилей CSS
В React и JSX, стили могут быть добавлены непосредственно к элементам с помощью инлайн-стилей. Давайте предположим, у нас есть компонент для отображения товара и мы хотим стилизовать его заголовок в красный цвет, а цену — в зеленый.
const product = {
name: "Смартфон",
price: 499.99,
};
const productStyle = {
color: "green", // Зеленый цвет для цены
fontWeight: "bold", // Жирный шрифт для заголовка
};
const ProductComponent = () => (
<div>
<h2 style={productStyle}>{product.name}</h2>
<p style={{ color: "red" }}>Специальная цена: ${product.price}</p>
</div>
);
export default ProductComponent;
Создание файла компонента
Создайте новый файл с именем, например, MyComponent.jsx.
Импортируем React
В начале файла импортируйте библиотеку React и другие зависимости, если они вам нужны:
import React from 'react';
Создаем компонент
Создайте функциональный компонент.
function MyComponent() {
return (
<div>
<h1>Привет из MyComponent!</h1>
<p>Это мой первый компонент.</p>
</div>
);
}
В этом примере мы создали компонент MyComponent, который возвращает JSX элементы, описывающие содержимое компонента.
Экспортируем компонент
В конце файла экспортируйте ваш компонент, чтобы его можно было использовать в других частях вашего приложения:
export default MyComponent;
Импортируем компонент
Теперь вы можете импортировать и использовать ваш компонент в других частях вашего приложения. Например:
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<div>
<h1>Мое React приложение</h1>
<MyComponent />
</div>
);
}
export default App;
Комментарии
0