Запись разметки с использованием JSX

Введение

Добро пожаловать в документацию по React! В этом практическом занятии вы познакомитесь с написанием разметки с использованием JSX.

Запись разметки с использованием JSX

Виртуальная машина уже содержит проект React. В общем случае, вам нужно только добавить код в App.js.

Для установки зависимостей используйте следующую команду:

npm i

Синтаксис разметки, который вы видели выше, называется JSX. Он является необязательным, но большинство проектов React используют JSX за счет его удобства.

JSX более строгий, чем HTML. Теги, такие как <br />, должны быть закрыты. Также ваш компонент не может возвращать несколько JSX-тегов. Их нужно обернуть в общий родительский тег, например, <h1>...</h1> или пустой тег <>...</>:

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

Если у вас есть много HTML, который нужно перенести в JSX, вы можете использовать онлайн-конвертер.

Для запуска проекта используйте следующую команду. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

npm start

Отображение данных

JSX позволяет помещать разметку в JavaScript. С использованием фигурных скобок можно “вернуться обратно” в JavaScript, чтобы вставить переменную из кода и отобразить ее для пользователя. Например, это отобразит user.name:

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

Можно также “вернуться в JavaScript” из атрибутов JSX, но для этого нужно использовать фигурные скобки вместо кавычек. Например, className="avatar" передает строку "avatar" в качестве CSS-класса, а src={user.imageUrl} читает значение переменной JavaScript user.imageUrl и передает его в качестве атрибута src:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

Добавление стилей

В React вы указываете CSS-класс с помощью className. Это работает так же, как атрибут class в HTML:

<img className="avatar" />

Затем вы пишете CSS-правила для него в отдельном CSS-файле:

/* App.css */
.avatar {
  border-radius: 50%;
}

React не规定дает, как добавлять CSS-файлы. В простейшем случае вы добавите тег <link> в свой HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить CSS-файл в ваш проект.

// App.js
import "./App.css";

Вы также можете поместить более сложные выражения внутри фигурных скобок JSX, например, конкатенацию строк:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

В приведенном выше примере style={{}} не является специальным синтаксисом, а обычным объектом {} внутри фигурных скобок style={ } JSX. Вы можете использовать атрибут style, когда ваши стили зависят от переменных JavaScript.

Резюме

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