Познакомьтесь с JSX, классным братом JavaScript

Что такое JSX?

JSX во многом похож на HTML, но знаете что? Это не HTML. Технически это JavaScript. Отсюда и название JSX… J ava S cript e X…

Но почему именно JSX?

JSX позволяет нам писать HTML-подобный код внутри JavaScript. Однако браузеры не понимают код JSX, поэтому мы используем такие инструменты, как Babel, для преобразования JSX в JS.

Хотя JSX не требуется использовать при написании React, его настоятельно рекомендуется использовать по двум причинам:

1. Это делает код менее подробным.
2. Это значительно упрощает визуализацию пользовательского интерфейса.

Например:

За кулисами…

Каждый созданный элемент JSX (например, ‹div› выше) - это просто «синтаксический сахар» для вызова React.createElement (), который принимает следующие аргументы: тип создаваемого элемента, объект, содержащий свойства, также известные как «реквизиты», которые передаются компоненту, потомкам этого компонента.

JSX против HTML

Четыре основных различия между JSX и HTML:

Встроенный стиль

• Внешние фигурные скобки указывают ссылку на переменную JavaScript внутри нашего JSX.
• Внутренние фигурные скобки ссылаются на объект JavaScript.

Именование классов CSS

• Поскольку «класс» - это ключевое слово в JavaScript, а JSX - это расширение JavaScript, React должен использовать className вместо class.

для → htmlFor

• Чтобы браузер не думал «for», нужно ссылаться на цикл JS for.

Ссылка на переменные JS

В простом старом HTML… вы, по сути, «жестко кодируете» то, что будет отображаться в DOM.

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

Так что в целом JSX кажется очень полезным для разработчиков. Тогда почему все еще есть ненавистники? Один плодовитый разработчик программного обеспечения однажды сказал:

И ненавистники будут ненавидеть, ненавидеть, ненавидеть, ненавидеть, ненавидеть
JSX, просто буду трясти, трясти, трясти, трясти, трясти

Это потому, что, как разработчики программного обеспечения, мы любим соблюдать так называемое разделение задач, что означает, что логика, представление, стиль и т. Д. Должны находиться в отдельных файлах. . JSX переворачивает эту идею с ног на голову.

Но подумайте об этом; JSX был создан по какой-то причине ... эта причина заключалась в том, чтобы помочь разработчику. Поэтому, даже если сначала JSX кажется неправильным или неприятным, я рекомендую продолжать его использовать, поскольку он делает написание React намного проще и читабельнее.

Источники:

Https://www.udemy.com/react-redux/