Str (IT-Community)

📌 Что такое JSX?



JSX — это особый синтаксис, который позволяет писать HTML-подобный код в JavaScript. Под капотом, JSX преобразуется в вызовы функции React.createElement.

Вот как выглядит обычный JSX код:

<MyButton color="blue" shadowSize={2}>

  Click Me

</MyButton>

Этот код преобразуется в следующий вызов JavaScript:

React.createElement(

  MyButton,

  { color: 'blue', shadowSize: 2 },

  'Click Me'

)

Самозакрывающиеся теги

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

<div className="sidebar" />

Что эквивалентно:

React.createElement(

  'div',

  { className: 'sidebar' },

  null

)

Именование компонентов

Пользовательские компоненты должны начинаться с заглавной буквы:

function ExampleOfNameCasing() {

  return (

    <div>

      <h1>Example</h1>

      <CustomComponent>Example</CustomComponent>

    </div>

  );

}

Атрибуты в JSX:

Атрибуты в JSX схожи с HTML, но используют camelCase:

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

Str (IT-Community)