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

HTML vs JSX – What’s the Difference?

Kolade Chris

HTML vs JSX

Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page.

HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it.

JSX, on the other hand, means JavaScript Syntax Extension or JavaScript XML as some like to put it.

It was created as a syntactic sugar for React.createElement() . It is an extension of JavaScript that allows developers to write HTML right within JavaScript. So when you’re writing JSX, technically you’re writing JavaScript and HTML together.

Also, that means JavaScript’s reserved keywords must be kept intact. And that is why the “for” attribute in HTML is “HTMLFor” in JSX, since «for» is one of the commonest JavaScript reserved keywords.

In terms of support by browsers, HTML is supported by all of them. JSX, on the other hand, was never really intended to be, so you need a compiler like Babel or Webpack to transpile JSX into the JavaScript that browsers understand.

The Main Differences Between HTML and JSX

You need to return a single parent element in JSX

One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won’t compile.

A lot of devs use

, but a better one that many people use is “fragment”, <>. which makes the code more readable.

In HTML, you are free to do whatever you want as you don’t have to return a single parent element.

Here you can see that JSX is not compiling because there’s no parent element.

And here JSX is compiling because there is a parent element (fragment).

You can implement JS directly in JSX

In JSX, it is possible to write JavaScript directly. You can do this by putting the JavaScript in curly braces <. >. Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript:

const Article = () => < return ( <> 
Hi campers
 
How's coding going
 
What is up?
  
 
 is seven in word 
 ); >; export default Article; 

All Tags Self-close in JSX

Tags can self-close in JSX. That is, it is possible to have as and as . You don’t want to do that, but its possible.

Self-closing tags in HTML can self-close without the slash before the right angle bracket, that is
could work as
. But in JSX, you need to include the slash. This should bring something to mind – JSX heavily relies on HTML 4 syntax.

Here you can see that JSX is not compiling because there’s no forward slash before the right angle bracket of the line break tag.

And here you can see that JSX is compiling because there is a forward slash in the line break tag.

ClassName and HTMLFor, not class and for in JSX

To define class names and for attributes in JSX, you don’t do it as class or for , since both are reserved keywords in JavaScript.

You actually create class components with the class keyword. So, to define class names in JSX, you do it as » className » and for attributes for labels you write » HTMLFor «:

const Article = () => < return ( <> 
Hi campers
 
How's coding going
 
What is up?
  
 
 is seven in word 
 
Name 
 
 ); >; export default Article; 

Write all HTML Attributes in camelCase in JSX

You need to write all HTML attributes and event references in camelCase while writing JSX. So, onclick becomes onClick , onmouseover becomes onMouseOver , and so on:

const Article = () => < const sayHI = () =>< alert("Hi Campers"); >; return ( <> 
Hi campers
 
How's coding going
 
What is up?
  
 
 is seven in word 
>ALert Hi 
 ); >; export default Article; 

Write Inline Styles as Objects in JSX

And lastly, to define inline styles for JSX, you write it as an object, with the properties in camelCase, the values in quotes, and then you pass it inline to the JSX.

This means you have to open up a style attribute and use curly braces instead of quotes. This is opposed to HTML where you’re free to define millions of styles right inside the opening tag without writing them as objects and putting them in quotes:

const Article = () => < const inlineStyle = < color: "#2ecc71", fontSize: "26px", >; return ( <> 
>Hi campers
 
How's coding going
 
What is up?
  
 
 is seven in word 
>ALert Hi 
 ); >; export default Article; 

You can choose to write the object directly in the style attribute – that is, by opening up two curly braces and putting the properties and values inside.

But a cleaner way is to define the object outside of the JSX, and then pass it into the opening tag.

const Article = () => < return ( <> 
>>Hi campers
 
How's coding going
 
What is up?
  
 
 is seven in word 
 ); >; export default Article; 

Note that you should not use inline styling in plain HTML – you don’t want to ruin your website’s SEO.

That’s it!

Thank you for reading. To connect with me, checkout my portfolio, or follow me on Twitter, where I spend most of my time tweeting and engaging in anything web development.

Введение в JSX (Introducing JSX)

Рассмотрим эту переменную декларацию (в оригинале: variable declaration):

const element = h1>Hello, world!/h1>; 

Этот забавный синтаксис записи тегов не является ни строкой, ни HTML .

Он называется JSX, и является синтаксическим расширением JavaScript. Мы (тут и далее авторы Quick Start) рекомендуем использовать его для описания того, как будет выглядеть пользовательский интерфей (UI). JSX может напомнить вам язык шаблонов, но он использует все возможности JavaScript.

JSX производит React «‘элементы». Мы посмотрим отрисовку в DOM в следующей секции next section. Ниже, вы можете найти наобходимую основу для старта работы с JSX .

Встраиваемые выражения в JSX

Вы можете поместить/встроить любое JavaScript выражение в JSX обернув его в фигурные скобки.

Например, 2 + 2 , user.name , и formatName(user) являются валидными выражениями:

function formatName(user)  return user.firstName + ' ' + user.lastName; > const user =  firstName: 'Harper', lastName: 'Perez' >; const element = ( h1> Hello, formatName(user)>!  /h1> ); ReactDOM.render( element, document.getElementById('root') ); 

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

JSX это выражение Too (JSX is an Expression)

После компиляции, JSX выражения становятся постоянными объектами JavaScript.

Это означает, что вы можете использовать JSX внутри выражения if и внутри циклов, присвоить его переменным, принять его в качестве аргумента, и вернуть его из функций:

function getGreeting(user)  if (user)   return h1>Hello, formatName(user)>!/h1>;  > return h1>Hello, Stranger./h1>; > 

Определение атрибутов с JSX

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

const element = div tabIndex="0">/div>; 

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

const element = img src=user.avatarUrl>>/img>; 

Указание дочерних элементов с JSX

Если тег является пустым, вы можете закрыть его с /> , подобно XML:

const element = img src=user.avatarUrl> />; 

JSX теги могут содержать дочерние элементы:

const element = ( div> h1>Hello!/h1> h2>Good to see you here./h2> /div> ); 

Внимание:

Так как JSX ближе к JavaScript, чем HTML, React DOM использует CamelCase-стиль именования свойств в отличие от HTML имен атрибутов.

Например, класс становится className в JSX и TabIndex становится tabIndex .

JSX предотвращение атаки инъекцией

Для безопасной вставки пользовательского ввода в JSX:

const title = response.potentiallyMaliciousInput; // This is safe: const element = h1>title>/h1>; 

По умолчанию, React DOM экранирует любые величины, помещаемые в JSX перед их отрисовкой. Таким образом, это гарантия того, что мы не получим ничего взятого вне приложения. Все преобразуется в строку, перед отрисовкой (rendered). Это помогает предотвратить XSS-атаки (межсайтовый скриптинг).

JSX представление объектов

Babel компилирует JSX в вызовах React.createElement() .

Следующие два пример идентичны:

const element = ( h1 className="greeting"> Hello, world! /h1> ); 

const element = React.createElement( 'h1', className: 'greeting'>, 'Hello, world!' ); 

React.createElement() выполняет несколько проверок, чтобы помочь вам писать безошибочный код, но по существу он создает объект, как:

// Note: this structure is simplified const element =  type: 'h1', props:  className: 'greeting', children: 'Hello, world' > >; 

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

Мы будем изучать отрисовку/рендеринг React элементов в DOM в следующем разделе.

Подсказка:

Мы рекомендуем выполнить поиск для «Babel» схемы синтаксиса для выбранного редактора, чтобы и ES6, и JSX код правильно подсвечивался/выделялся

Быстрый старт в React.js

• React — JavaScript библиотека
• Установка React
• Привет, Мир (React Hello World)
• Введение в JSX (Introducing JSX)
• Отрисовка React элементов (Rendering Elements)
• Компоненты React и свойства (Components and Props)
• Состояния и жизненный цикл (State and Lifecycle)
• Обработка событий (Handling Events)
• Условная отрисовка (Conditional Rendering)
• Списки и ключи (Lists and Keys)
• React и формы (Forms)
• Всплытие состояния (Lifting State Up)
• Композиция или Наследование
• Думать на React

Знакомство с JSX

Это JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.

JSX производит «элементы» React. То, как элементы рендерятся в DOM, мы изучим в следующей главе, а ниже мы рассмотрим основы JSX, которые нужно знать начинающему.

React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.

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

React можно использовать и без JSX, но большинство людей ценит его за наглядность при работе с UI, живущем в JavaScript-коде. Помимо этого, JSX помогает React делать сообщения об ошибках и предупреждениях понятнее.

С этим разобрались. Поехали дальше!

Встраивание выражений в JSX

В следующем примере мы объявляем переменную name и затем используем её внутри JSX, обрамляя фигурными скобками:

const name = 'Иван-Царевич';const element = h1>Здравствуй, name>!h1>;

JSX допускает использование любых корректных JavaScript-выражений внутри фигурных скобок. Например, 2 + 2 , user.firstName и formatName(user) являются допустимыми выражениями.

В примере ниже мы встраиваем результат вызова JavaScript-функции formatName(user) в элемент :

function formatName(user)  return user.firstName + ' ' + user.lastName; > const user =  firstName: 'Марья', lastName: 'Моревна' >; const element = ( h1>  Здравствуй, formatName(user)>! h1> );

Чтобы улучшить читаемость, мы разбили JSX на несколько строк. В таких случаях, хотя это и не обязательно, мы советуем заключать всё выражение целиком в круглые скобки, чтобы избежать проблем, связанных с автоматической вставкой точек с запятой.

JSX это тоже выражение

После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.

Из этого следует, что JSX можно использовать внутри инструкций if и циклов for , присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.

function getGreeting(user)  if (user)   return h1>Здравствуй, formatName(user)>!h1>; > return h1>Здравствуй, незнакомец.h1>;>

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

Чтобы использовать строковый литерал в качестве значения атрибута, используются кавычки:

const element = a href="https://www.reactjs.org"> link a>;

Если же в значении атрибута требуется указать JavaScript-выражение, то на помощь приходят фигурные скобки:

const element = img src=user.avatarUrl>>img>;

Не ставьте кавычек вокруг фигурных скобок, когда используете JavaScript-выражение в значении атрибута. Следует либо применить кавычки (для строковых литералов), либо фигурные скобки (для выражений), но не то и другое вместе.

Предупреждение:

Поскольку JSX ближе к JavaScript чем к HTML, React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов.

Например, class становится className в JSX, а tabindex становится tabIndex .

Использование дочерних элементов в JSX

Если тег пуст, то его можно сразу же закрыть с помощью /> точно так же, как и в XML:

const element = img src=user.avatarUrl> />;

Но JSX-теги могут и содержать дочерние элементы:

const element = ( div> h1>Здравствуйте!h1> h2>Рады вас видеть.h2> div> );

JSX предотвращает атаки, основанные на инъекции кода

Данные, введённые пользователем, можно безопасно использовать в JSX:

const title = response.potentiallyMaliciousInput; // Этот код безопасен: const element = h1>title>h1>;

По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS).

JSX представляет собой объекты

Babel компилирует JSX в вызовы React.createElement() .

Следующие два примера кода эквивалентны между собой:

const element = ( h1 className="greeting"> Привет, мир! h1> );

const element = React.createElement( 'h1', className: 'greeting'>, 'Привет, мир!' );

React.createElement() проводит некоторые проверки с целью выявить баги в коде, но главное — создаёт объект похожий на такой:

// Примечание: этот код несколько упрощён. const element =  type: 'h1', props:  className: 'greeting', children: 'Привет, мир!' > >;

Эти объекты называются React-элементами. Можно сказать, что они описывают результат, который мы хотим увидеть на экране. React читает эти объекты и использует их, чтобы конструировать и поддерживать DOM.

В следующей главе мы углубимся в то, как React-элементы рендерятся в DOM.

Совет:

Мы рекомендуем настроить ваш редактор кода для использования Babel, чтобы и ES6, и JSX-код были подсвечены должным образом.

Различия 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 студентов

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