Полезные видео о фронтенде. Подпишись на Rutube

Инструменты разработчика React

10 месяцев назад·1 мин. на чтение

Используйте инструменты разработчика React для инспектирования компонентов React, редактирования пропсов и состояния, а также выявления проблем с производительностью.

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

Расширение для браузера

Самый простой способ отладки веб-сайтов, созданных с помощью React — установить расширение для браузера React Developer Tools. Он доступен для нескольких популярных браузеров:

Теперь, если вы посетите веб-сайт, созданный с помощью React, вы увидите панели Components и Profiler.

Safari и другие браузеры

Для других браузеров (например, Safari) установите npm-пакет react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Затем откройте инструменты разработчика из терминала:

react-devtools

Затем подключите свой веб-сайт, добавив следующий тег <script> в начало <head> вашего веб-сайта:

<html>
  <head>
    <script src="http://localhost:8097"></script>
  </head>
</html>

Перезагрузите свой веб-сайт в браузере, чтобы просмотреть его в инструментах разработчика.

Мобильный (React Native)

Инструменты разработчика React также можно использовать для проверки приложений, созданных с помощью React Native. Самый простой способ использовать React Developer Tools — установить его глобально:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Затем откройте инструменты разработчика из терминала.

react-devtools

Он должен подключаться к любому локальному приложению React Native, которое запущено. Попробуйте перезагрузить приложение, если инструменты разработчика не подключаются через несколько секунд.

Frontend React Туториал по React

JavaScript в фигурных скобках в JSX в React компонентах

10 месяцев назад·3 мин. на чтение

JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.

Содержание туториала по React JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.

Передача строк в кавычках

Когда нужно передать строковый атрибут в JSX, нужно заключить его в одинарные или двойные кавычки:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="http://example.com/userpic.jpg"
      alt="User Name"
    />
  );
}

Здесь "http://example.com/userpic.jpg" и "User Name" передаются как строки. Но что, если вы хотите динамически указать src или alt? Вы можете использовать JavaScript значение, заменив " и " на { и }:

export default function Avatar() {
  const avatar = 'http://example.com/userpic.jpg';
  const description = 'User Name';
  return <img className="avatar" src={avatar} alt={description} />;
}

Обратите внимание на разницу между className="avatar", который указывает имя CSS класса "avatar", и src={avatar}, который считывает значение переменной JavaScript с именем avatar. Это потому, что фигурные скобки позволяют вам работать с JavaScript прямо в разметке.

Использование фигурных скобок: JavaScript в разметке

JSX — это особый способ написания JavaScript. Это означает, что внутри него можно использовать JavaScript — с помощью фигурных скобок { }. В приведенном ниже примере сначала объявляется имя, name, а затем оно встраивается в фигурные скобки внутри <h1>:

export default function TodoList() {
  const name = 'User Name';

  return <h1>{name}'s To Do List</h1>;
}

Любое выражение JavaScript будет работать между фигурными скобками, включая вызовы функций, таких как formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date);
}

export default function TodoList() {
  return <h1>To Do List for {formatDate(today)}</h1>;
}

Где использовать фигурные скобки

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

Как текст непосредственно внутри тега JSX: <h1>{name}'s To Do List</h1> работает, но <{tag}>To Do List</{tag}> работать не будет.
Поскольку атрибуты следуют сразу после знака =: src={avatar} будут считывать переменную avatar, но src="{avatar}" передаст строку "{avatar}".

Использование двойных фигурных скобок: CSS и другие объекты в JSX

Помимо строк, чисел и других выражений JavaScript, вы даже можете передавать объекты в JSX. Объекты также обозначаются фигурными скобками, например { name: "User Name", itemsCount: 10 }. Следовательно, чтобы передать объект JS в JSX, вы должны заключить объект в другую пару фигурных скобок: person={{ name: "User Name", itemsCount: 10 }}. Вы можете увидеть это со встроенными стилями CSS в JSX. React не требует от вас использования встроенных стилей (классы CSS отлично подходят для большинства случаев). Но когда вам нужен встроенный стиль, нужно передать объект атрибуту стиля:

export default function TodoList() {
  return (
    <ul
      style={{
        backgroundColor: 'black',
        color: 'pink',
      }}
    >
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

Встроенные (inline) стили записываются в camelCase. Например, HTML <ul style="background-color: black"> в компоненте будет записан как <ul style={{ backgroundColor: 'black' }}>.

Другие примеры JavaScript объектов в фигурных скобках

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

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://example.com/userpic.jpg"
        alt="userpic"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

В этом примере объект JavaScript person содержит строку имени и объект темы:

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

Компонент может использовать эти значения из person следующим образом:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

Резюме

Теперь вы знаете почти все о JSX:

Атрибуты JSX внутри кавычек передаются как строки.
Фигурные скобки позволяют добавить в разметку логику и JavaScript переменные.
Они работают внутри содержимого тега JSX или сразу после = в атрибутах.
{{ и }} не являются специальным синтаксисом: это объект JavaScript, спрятанный внутри фигурных скобок JSX.

Frontend React Туториал по React

на русском языке
бесплатно
без VPN

ChatGPT