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

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

год назад·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, которое запущено. Попробуйте перезагрузить приложение, если инструменты разработчика не подключаются через несколько секунд.
FrontendReactТуториал по React

Разметка React с JSX

год назад·1 мин. на чтение

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

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

JSX: добавление разметки в JavaScript

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

Преобразование HTML в JSX

Предположим, что у вас есть некоторый (совершенно правильный) HTML: 
<h1>Todos</h1>
<img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
<ul>
  <li>Learn JavaScript</li>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>
И вы хотите поместить его в свой компонент: 
export default function TodoList() {
  return (
    // ???
  )
}
Если вы скопируете и вставите его как есть, он не будет работать. 
// App.js

export default function TodoList() {
  // Этот код не будет работать
  return (
    <h1>Todos</h1>
    <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
    <ul>
      <li>Learn JavaScript</li>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
    </ul>
  );
}

// App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)

// App.js: Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX <>...</>? (5:4)
Это потому, что JSX строже и имеет несколько больше правил, чем HTML. Если вы прочитали сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.

Правила JSX

1. Возвращать один корневой элемент

Чтобы вернуть несколько элементов из компонента, оберните их одним родительским тегом. Например, вы можете использовать <div>: 
<div>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</div>
Если вы не хотите добавлять в разметку лишний <div>, вы можете вместо этого написать <> и </>: 
<>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</>
Этот пустой тег называется фрагментом (Fragment). Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.

Почему необходимо обернуть несколько тегов JSX?

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

2. Закрывать все теги

JSX требует, чтобы теги были закрыты явно: самозакрывающиеся теги, такие как <img>, должны стать <img />, а теги-обертки, такие как <li>апельсины, должны быть записаны как <li>апельсины</li>.

3. Пишите все в camelCase

JSX превращается в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вам часто потребуется считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать тире или быть зарезервированными словами, такими как class. Вот почему в React многие атрибуты HTML и SVG записываются в camelCase. Например, вместо stroke-width вы используете strokeWidth. Поскольку class является зарезервированным словом, в React вместо этого вы пишете className, названное в честь соответствующего DOM свойства: 
<img src="https://example.com/userpic.jpg" alt="userpic" className="photo" />

Совет: используйте конвертер JSX

Преобразование всех этих атрибутов в существующую разметку может быть утомительным. Рекомендуется использовать конвертер для перевода существующих HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно. Вот окончательный результат: 
export default function TodoList() {
  return (
    <>
      <h1>Todos</h1>
      <img
        src="https://example.com/userpic.jpg"
        alt="userpic"
        className="photo"
      />
      <ul>
        <li>Learn JavaScript</li>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
      </ul>
    </>
  );
}

Резюме

Теперь вы знаете, почему существует JSX и как его использовать в компонентах:
  • React компоненты группируют логику рендеринга вместе с разметкой, потому что они связаны.
  • JSX похож на HTML с некоторыми отличиями. Вы можете использовать конвертер, если вам нужно.
  • Сообщения об ошибках часто укажут вам правильное направление для исправления разметки.
FrontendReactТуториал по React
logo

itdevjournal