Вернуться




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



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

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

 

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

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

const element = <p> Я элемент, размещенный на странице</p>

 

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

 

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

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

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

const element = <h1>Приветствую Вас, {name}!</h1>;

 

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

function peopleName(user) {

  return user.firstName + ' ' + user.secondName;

}

const user = {

  firstName: 'Игнатий',

  secondName: 'Порфириевич'

};

const element = (

  <h1>

    Приветствую тебя, {peopleName(user)}!  </h1>

);

ReactDOM.render(

  element,

  document.getElementById('root')

);

 

JSX и браузер

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

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

function getGreeting(user) {

  if (user) {

    return <h1>Приветствую тебя, {firstName(user)}!</h1>;  }

  return <h1>Приветствую тебя, мистер «Х».</h1>;}

 

JSX и атрибуты

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

const element = <div background-color= “red“></div>

 

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

const element = <img src={site.logoUrl}></img>;

 

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

  1. JSX — это то, что сделает ваш код более лаконичным, если использовать чистый JavaScript в React. Вы это сразу заметите, если пропишите одни и те же действия разными подходами.
  2. При наименовании чего-либо в JSX всегда используется «верблюжий стиль», когда первое слово пишется с маленькой буквы, а следующие слова с большой. Например: classAge, secondName и т. д.
  3. JSX очень сильно напоминает HTML, но когда начнете глубже изучать эту технологию, то поймете, что по факту это синтаксис XML.
  4. JSX-синтаксис так же строг, как и XHTML, поэтому в нем нужно закрывать все теги, даже те, которые в HTML можно не закрывать. Например: <br>, <hr> и др.
  5. CSS свойства, которые записываются в JSX, слегка отличаются от синтаксиса «чистого» CSS, к этому нужно быть готовыми. К примеру: названия свойств прописываются только в camelCase, или трудно реализовать CSS, когда нужно указать медиа-запрос, придать стиль анимации и др.
  6. JSX упрощает работу с формами HTML.
  7. JSX в автоматическом режиме сканирует выражения — это смягчает риск XSS-атаки.
  8. Все горизонтальные пробелы в выражениях сокращаются до одного.
  9. Комментарии в код добавляются, как и комментарии в JavaScript.
  10. И др.

 

Заключение

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



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Представляем вашему вниманию первое занятие учебного курса по React для нач ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 2: функциональные компоненты

Учебный курс по React, часть 2: функциональные компоненты

 Cегодня мы представляем вашему внимание продолжение курса. Здесь мы погово ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 3: файлы компонентов, структура проектов

Учебный курс по React, часть 3: файлы компонентов, структура проектов

В этом материале мы поговорим о файлах компонентов и о структуре React-прое ...

21 Февраля 2021    JavaScript



Напишем