JSX — это мощный инструмент в React, который позволяет вам создавать ваши пользовательские интерфейсы в стиле HTML, но с возможностью интегрировать JavaScript. Вам не придется писать бесконечные строки createElement, вы просто описываете, как ваш интерфейс должен выглядеть, и React делает остальное.

Навигация по статье

Работа с JSX

Давайте разберем основы работы с JSX.

Создание элемента

JSX позволяет создавать элементы пользовательского интерфейса так же, как в HTML, но с использованием JavaScript. Давайте создадим элемент кнопки с текстом «Нажми меня»:

const buttonElement = <button>Нажми меня</button>;

Здесь мы создали переменную buttonElement и использовали JSX для создания кнопки с текстом «Нажми меня».

Этот элемент можно затем вставить в ваш интерфейс или использовать в других частях вашего кода React. Например, вы можете добавить его в вашу компоненту и отобразить на веб-странице.

Вставка данных в элемент

Часто вам приходится вставлять данные внутрь элементов 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.

Вы можете использовать расширение .js вместо .jsx, но .jsx обычно используется, чтобы явно указать, что файл содержит JSX код.

Импортируем React

В начале файла импортируйте библиотеку React и другие зависимости, если они вам нужны:

import React from 'react';

Создаем компонент

Создайте функциональный компонент.

function MyComponent() {
  return (
    <div>
      <h1>Привет из MyComponent!</h1>
      <p>Это мой первый компонент.</p>
    </div>
  );
}

В этом примере мы создали компонент MyComponent, который возвращает JSX элементы, описывающие содержимое компонента.

Экспортируем компонент

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

export default MyComponent;

export default — это способ экспорта значения (какой-либо функции, класса, объекта) по умолчанию из модуля JavaScript. Это позволяет импортировать это значение в других модулях без явного указания имени, что делает код более лаконичным и читаемым.

Импортируем компонент

Теперь вы можете импортировать и использовать ваш компонент в других частях вашего приложения. Например:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Мое React приложение</h1>
      <MyComponent />
    </div>
  );
}

export default App;