Чем отличается jsx от html
Перейти к содержимому

Чем отличается jsx от html

  • автор:

Чем отличается jsx от html

До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса className против class для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег: ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва строки может быть записан как
или как
, но никогда не должен быть записан как , так как он не содержит никакого содержимого. В JSX правила немного отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт. Например, тег разрыва строки всегда должен быть записан как
, чтобы быть действительным JSX, который может быть переписан. То же самое касается и тега . А , с другой стороны, может быть записано как или . Разница в том, что в первой версии синтаксиса нет способа включить что-либо в . В последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.

Исправьте ошибки в редакторе кода, чтобы он был корректным JSX и успешно переводил. Убедитесь, что вы не меняете какой-либо контент — вам нужно только закрыть теги, где они нужны.

  • Компонент должен вернуть тег div
  • div должен содержать тег br
  • div должен содержать тег hr

Запустить тесты (Ctrl+Enter) Восстановить код

The constant JSX should return a div element.

Различия jsx и html — JS: React

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

В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в camelCase. Например, атрибут tabindex превращается в tabIndex. Исключением являются атрибуты aria- и data-, они записываются точно так же, как и в обычном HTML.

htmlFor

Так как for — зарезервированное слово в JS, в React-элементах используется свойство htmlFor.

Экранирование

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

JSX работает по-другому. Всё, что выводится обычным способом, безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:

По сути, для вывода без экранирования нужно использовать свойство dangerouslySetInnerHTML. В это свойство передаётся объект со свойством __html , значением которого является строка с HTML. Обратите внимание: если у компонента определён атрибут dangerouslySetInnerHTML, то содержимого у такого компонента быть не должно. Следующий пример приведёт к ошибке:

div dangerouslySetInnerHTML= __html: '

content

' >>>more contentdiv>;

Стили

Совсем по-другому работает атрибут style. Если в HTML это обычная строка, то в JSX только объект.

Для консистентности с именами атрибутов, имена CSS-свойств также должны быть записаны в стиле camelCase.

Значение свойств по умолчанию

Если свойство передаётся в компонент без значения, то оно автоматически становится равным true .

Примеры ниже эквивалентны:

MyTextBox autoComplete /> MyTextBox autoComplete=true> /> 

При этом предпочтительным является первый вариант.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

JSX — подробности

React. Продвинутые руководства. Часть Первая

Этой публикацией я открываю серию переводов раздела «Продвинутые руководства» (Advanced Guides) официальной документации библиотеки React.js.

JSX — подробности

Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, . children) .

> Click Me 
React.createElement( MyButton, , 'Click Me' )

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

React.createElement( 'div', , null )

Протестировать, как различные конструкции JSX компилируются в JavaScript, можно в онлайн компиляторе Babel

Спецификация типов элементов React

Начальная часть JSX тега определяет тип элемента React.

Типы, определенные с Прописной буквы, указывают на то, что тег ссылается на компонент React. Эти теги в процессе компиляции ссылаются на именованную переменную, содержащую компонент React. Поэтому, обратите внимание, — эта переменная должна находится в области видимости. Например: Если вы используете выражение JSX — , то переменная Foo должна находится в области видимости.

React должен находиться в области видимости

Т.к. JSX компилируется в вызовы функции React.createElement , библиотека React всегда должна находиться в области видимости вашего кода JSX.

Например: обе строки import необходимы в данном коде, т.к. React и CustomButton не включены непосредственно в JavaScript:

import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() < // return React.createElement(CustomButton, , null); return ; >

Если вы не используете какой-либо упаковщик JavaScript и добавляете React непосредственно в тег , то React всегда будет находиться в глобальной области видимости.

Использование нотации через точку в JSX типе

На компонент React можно ссылаться используя нотацию через точку в JSX. Это удобно, если у вас есть модуль, который экспортирует несколько компонентов React. Например, если MyComponents.DatePicker — это компонент, то вы можете использовать эту нотацию непосредственно в JSX:

import React from 'react'; const MyComponents = < DatePicker: function DatePicker(props) < return 
Imagine a datepicker here.
; > > function BlueDatePicker() < return ; >

Вновь определенные компоненты, не входящие в стандартную библиотеку React, должны именоваться с Прописной буквы

Если тип элемента именуется со строчной буквы, это означает, что элемент является встроенным компонентом таким как или и передается в виде строки ‘div’ или ‘span’ в функцию React.createElement . Типы, определенные с прописной буквы, такие как компилируются как React.createElement(Foo) и ссылаются на компонент, определенный или импортированный в вашем JavaScript файле.

Мы рекомендуем именовать компоненты с Прописной буквы. Если у вас есть компонент, именующийся со строчной буквы, перед использованием в JSX — присвойте его переменной именующейся с Прописной буквы.

Для примера, этот код не вернет то, что от него ожидается:

import React from 'react'; // Неправильно! Это компонент и должен именоваться с Прописной буквы: function hello(props) < // Правильно! Использование верно, т.к. div это существующий HTML тег: return Hello ; > function HelloWorld() < // Неправильно! React принимает за HTML тег, т.к. он начинается со строчной буквы: return ; >

Для исправления ошибки, мы переименуем hello в Hello и будем использовать в JSX:

import React from 'react'; // Правильно! Это компонент и именуется с Прописной буквы: function Hello(props) < // Правильно! Использование верно, т.к. div это существующий HTML тег: return Hello ; > function HelloWorld() < // Правильно! React знает, что это компонент, т.к. он именован с Прописной буквы: return ; >

Выбор типа во время выполнения

Нельзя использовать общее выражение в типе элемента React. Если вам необходимо использовать общее выражение для определения типа элемента, сначала присвойте его переменной, именованной с Прописной буквы. Это часто необходимо для отображения разных компонентов в зависимости от значения свойства в props:

import React from 'react'; import < PhotoStory, VideoStory >from './stories'; const components = < photo: PhotoStory, video: VideoStory >; function Story(props) < // Неправильно! JSX тип не может быть выражением. return />; >

Для исправления ошибки, мы присвоили тип переменной, именуемой с Прописной буквы:

import React from 'react'; import < PhotoStory, VideoStory >from './stories'; const components = < photo: PhotoStory, video: VideoStory >; function Story(props) < // Правильно! JSX тип может быть переменной, именуемой с Прописной буквы. const SpecificStory = components[props.storyType]; return />; >

Свойства в JSX

Есть несколько различных путей для задания свойств в JSX.

JavaScript выражения

Вы можете разместить любое JavaScript выражение в свойстве, заключив его в фигурные скобки <> . Например:

Для компонента MyComponent значение props.foo будет 10 , т.к. выражение 1 + 2 + 3 + 4 вернет такой результат.

Инструкции if или циклы for не являются выражениями в JavaScript, поэтому они не могут использоваться непосредственно в JSX. Поэтому их необходимо использовать только в окружающем коде. Например:

function NumberDescriber(props) < let description; if (props.number % 2 == 0) < description = even; > else < description = odd; > return 
is an number
; >

Строковые литералы

Строковые литералы могут быть размещены в свойствах. Эти два JSX выражения эквивалентны:

При размещении строкового литерала — его значение будет HTML деэкранировано. Эти два JSX выражения эквивалентны:

Размещение строковых литералов непосредственно в свойствах обычно не используется и дано здесь только для полноты спецификации.

Свойства по умолчанию принимают значение «True»

Если вы укажете в компоненте JSX свойство и не укажете его значение, то значение свойства по умолчанию установится в true . Эти два JSX выражения эквивалентны:

Мы не рекомендуем использовать эту возможность, т.к. ее легко спутать с короткой нотацией объектов в ES6 Например: в ES6 — это короткая нотация записи , а не . Эта возможность добавлена только из-за ее присутствия в HTML.

Разворачивание атрибутов

Если у вас есть объект, содержащий свойства, и вы хотите передать его в JSX, вы можете использовать . в качестве «разворачивающего» (spread) оператора для передачи всех свойств, содержащихся в объекте. Эти два компонента эквивалентны:

function App1() < return ; > function App2() < const props = ; return />; >

Разворачивание атрибутов может быть полезно при реализации универсальных контейнеров. В то же время, разворачивание может сделать ваш код грязным, т.к. при разворачивании в компонент в качестве свойств передаются все свойства объекта, в том числе те, в которых компонент не нуждается и которые не обрабатывает. Мы рекомендуем использовать данный синтаксис осмотрительно.

Потомок (children) в JSX

В JSX выражении, которое содержит открывающий и закрывающий тег, контент, заключенный между этими тегами, при компиляции передается в специальное свойство: props.children . Давайте рассмотрим типы возможных потомков:

Строковые литералы

Вы можете вставить строку между открывающим и закрывающим тегами и значение props.children будет равно этой строке. Использование строковых литералов удобно для многих встроенных элементов HTML.

Выглядит это так:

Hello world!

Это валидное JSX выражение — props.children компонента MyComponent установится равным строке «Hello world!» . Обратите внимание, что значение строкового литерала будет HTML деэкранировано при компиляции, поэтому в общем упрощенном случае вы можете писать свой JSX код также как вы пишете HTML:

Этот код содержит экранированный символ - &. Код валиден одновременно как в HTML так и в JSX.

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

Hello World
Hello World
Hello World
Hello World

JSX элемент

В качестве потомков JSX элемента могут выступать другие JSX элементы. Это удобно для отображения вложенных компонентов:

Вы можете смешивать любые типы потомков, будь то строки или JSX элементы. Это еще один вариант когда JSX может выглядеть также как HTML. Следующий пример валиден в JSX и HTML:

Компонент React не может возвращать несколько элементов React — иными словами: компонент React всегда должен иметь только один корневой элемент верхнего уровня. Одновременно с этим — одно JSX выражение может иметь неограниченное количество потомков. Таким образом, если у вас нет корневого элемента верхнего уровня — просто оберните свой набор элементов в элемент div , как в предыдущем примере.

JavaScript выражения

Вы можете использовать любое JavaScript выражение в качестве потомка, просто взяв его в фигурные скобки — <> . Например, следующие выражения эквивалентны:

Эта возможность часто используется для отображения списка JSX выражений произвольной длины. Например, этот код отображает список HTML:

JavaScript выражения могут совмещаться с другими типами потомков. Это удобно при отображении строковых шаблонов:

function Hello(props) < return 
Hello !
; >

Функции JavaScript

Как правило, JavaScript выражения, используемые в JSX возвращают строки, элементы React или и то и другое вместе. Однако, props.children работает также как и любое другое свойство, в которое можно передать любой вид данных, а не только данные тех типов, которые React знает как отобразить. Например, вы можете определить некий компонент, и принять от него обратный вызов через props.children :

function ListOfTenThings() < return ( > 
This is item in the list
>
); > // Вызывает "потомка - функцию обратного вызова" numTimes раз для отображения повторяемого компонента function Repeat(props) < let items = []; for (let i = 0; i < props.numTimes; i++) < items.push(props.children(i)); >return
; >

В компонент в качестве потомка можно передавать что угодно. Главное — этот компонент должен преобразовать и вернуть к моменту отображения (рендеринга) то, что React знает как отобразить. Такое использование не является общепринятым, но оно прекрасно отображает то, на что способен React.

Булевые значения, Null и Undefined игнорируются

false , null , undefined и true можно использовать в качестве потомков. Но данные значения не отображаются при рендеринге. Следующие JSX выражения будут отображены одинаково:

Эта особенность совместно с особенностью обработки условных выражений в JavaScript может быть использована для условного отображения элементов React. Следующее JSX выражение отобразит если значение showHeader будет true :

Однако, есть нюанс, когда некоторые «falsy» значения, такие как число 0 , отображаются React. Например, следующий код не будет вести себя как ожидается, и в случае если props.messages будет содержать пустой массив — в результате рендеринга будет отображен 0 :

Для исправления ситуации, убедитесь, что выражение перед && всегда является булевым:

И наоборот, если вам необходимо отобразить false , true , null или undefined при рендеринге — сконвертируйте их в строку:

 
Значение переменной myVariable = .
  • PropTypes — проверка типов в React.
  • Ref-атрибуты и DOM в React.
  • Неконтролируемые компоненты в React.
  • Оптимизация производительности в React.

JSX. Что это за расширение, где и для чего оно используется

Lorem ipsum dolor

Часто при изучении React пользователи сталкиваются с таким понятием , как «JSX». Возникает непонимание и вопрос : «А что это такое — JSX , и почему эту технологию так нахваливают? ». Давайте разбираться вместе.

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

Итак, что это такое — JSX?

JSX — это « микс » из синтаксиса JavaScript, HTML и немного CSS. А по своей сути это является инструментом для распределения элементов страницы внутри разметки при помощи JavaScript. Его синтаксис прост, например:

const element =

Я элемент, размещенный на странице

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

Как можно выстроить выражения в JSX?

JSX позволяет довольно просто выстраивать сложные выражения и встраивать переменные прямо внутри этих выражений, например:

const name = ‘Тихон Платонович’;

const element =

Приветствую Вас, !

;

То есть можно создать любую переменную, в нашем случае это «name» , и , обрамив ее «египетскими» скобками, вставить в код JSX. К стати, когда нужно будет вставить любой какой-нибудь скрипт JavaScript внутри кода JSX, это все делается при помощи «<>». Например:

function peopleName(user)

return user.firstName + ‘ ‘ + user.secondName;

>

const user =

firstName: ‘Игнатий’,

secondName: ‘Порфириевич’

>;

const element = (

Приветствую тебя, !

);

ReactDOM.render(

element,

document.getElementById(‘root’)

);

JSX и браузер

По факту JSX код «н еп онятен» браузеру. Поэтому во время компиляции он трансформируется в альтернативную функцию JavaScript. Отсюда и происходит утверждение, что на Реакт мож но и не использовать JSX.

Но в т о ж е время JSX проще , чем JavaScript. А трансформация JSX в JS дает нам возможность использовать код JSX внутри выражений JavaScript, к примеру , это можно делать в выражениях «if» или «for». Например:

function getGreeting(user)

if (user)

return

Приветствую тебя, !

; >

return

Приветствую тебя, мистер «Х».

;>

Напишем

JSX и атрибуты

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

const element =

Иногда в атрибуте нужно использовать какое-нибудь выражение JS, в этом случае такая манипуляция происходит при помощи символов «<>», например:

const element = >;

Несколько особенностей JSX

  1. JSX — это то, что сделает ваш код более лаконичным, если использовать чистый JavaScript в React. Вы это сразу заметите, если пропишите одни и те же действия разными подходами.
  2. При наименовании чего-либо в JSX всегда используется «верблюжий стиль», когда первое слово пишется с маленькой буквы, а следующие слова — с большой. Например: classAge, secondName и т. д.
  3. JSX очень сильно напоминает HTML, но когда начнете глубже изучать эту технологию, то поймете, что по факту это синтаксис XML.
  4. JSX-синтаксис та к ж е строг , как и XHTML, поэтому в нем нужно закрывать все теги, даже те, которые в HTML можно не закрывать. Например:
    ,

    и др.

  5. CSS свойства, которые записываются в JSX , слегка отличаются от синтаксиса «чистого» CSS, к этому нужно быть готовыми. К примеру: названия свойств прописываются только в camelCase , или трудно реализовать CSS, когда нужно указать медиа-запрос, придать стиль анимации и др.
  6. JSX упрощает работу с формами HTML.
  7. JSX в автоматическом режиме сканирует выражения — это смягчает риск XSS-атаки.
  8. Все горизонтальные пробелы в выражениях сокращаются до одного.
  9. Комментарии в код добавляются , как и комментарии в JavaScript.
  10. И др.

Заключение

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *