Статьи

Введение в JSX

Октябрь 15, 2018

Когда React был впервые представлен, одной из функций, которая привлекла внимание большинства людей (и привлекла наибольшую критику), был JSX. Если вы изучаете React или когда-либо видели примеры кода, вы, вероятно, сделали двойной анализ синтаксиса. Что это за странное объединение HTML и JavaScript? Это даже настоящий код?

Давайте посмотрим, что на самом деле представляет собой JSX, как он работает и почему, черт возьми, мы бы хотели смешивать HTML и JS в первую очередь!

Что такое JSX?

JSX, определяемый React Docs как «расширение к JavaScript» или «синтаксический сахар для вызова React.createElement(component, props, ...children))

JSX считается доменно-специфическим языком (DSL) , который может выглядеть очень похожим на язык шаблонов, такой как Усы, Thymeleaf, Razor, Twig или другие.

Он не визуализируется непосредственно в HTML, а визуализируется в классах React, которые используются Virtual DOM. В конце концов, благодаря таинственной магии Виртуального DOM, он попадет на страницу и будет представлен в HTML.

Как это работает?

JSX в основном все еще просто JavaScript с некоторыми дополнительными функциями. С помощью JSX вы можете писать код, который очень похож на HTML или XML, но у вас есть возможность беспрепятственно смешивать методы JavaScript и переменные с вашим кодом. JSX интерпретируется транспортным средством, таким как Babel , и отображается в коде JavaScript, который может понять UI Framework (в данном случае React).

Не нравится JSX? Это классно. Это технически не требуется, и документы React фактически содержат раздел об использовании « React Without JSX ». Позвольте мне предупредить вас прямо сейчас, хотя это не красиво. Не веришь мне? Взглянем.

JSX: 

 class SitePoint extends Component {
  render() {
    return (
      <div>My name is <span>{this.props.myName}</span></div>
    )
  }
}

React Sans JSX: 

 class SitePoint extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "My name is",
      React.createElement(
        "span",
        null,
        this.props.myName
      )
    )
  }
}

Конечно, глядя на эти небольшие примеры кода на этой странице, вы можете подумать: «О, это не так уж и плохо, я мог бы это сделать». Но не могли бы вы представить, как написать такое целое приложение?

Пример — это просто два простых вложенных HTML-элемента, ничего особенного. В основном, просто вложенный Hello World Попытка написать свое приложение React без JSX будет чрезвычайно трудоемкой, и, если вы, как и большинство других разработчиков, работаете в качестве символов в DevLand ™, вы, скорее всего, быстро превратитесь в запутанный беспорядок в коде спагетти. Тьфу!

Использование фреймворков, библиотек и тому подобного призвано сделать нашу жизнь проще, а не сложнее. Я уверен, что мы все видели чрезмерное использование и злоупотребление библиотеками или структурами в нашей карьере, но использование JSX с вашим React определенно не является одним из таких случаев.

А как насчет разделения проблем?

Теперь для тех из нас, кто научился не смешивать наш HTML с нашим JS — насколько это было плохо и как, если бы мы это делали, наши приложения часто посещали Боги-ошибки Апокалипсиса — возможно, смешивание вашего HTML внутри вашего JavaScript как все виды неправильно. В конце концов, вы должны поддерживать разделение проблем любой ценой! Мир зависит от этого!

Я знаю, я был там, я был тобой .

Но, как бы странно это ни казалось, все на самом деле не так уж и плохо , и ваши проблемы по-прежнему разделены. Как человек, который работает с React достаточно долго, чтобы чувствовать себя комфортно с ним, использование небольших кусочков HTML / XML внутри вашей кодовой базы JavaScript действительно … волшебно. Это берет управление HTML из уравнения и оставляет вас с хорошим, надежным кодом. Просто код. Это помогает облегчить боль при попытке использовать язык разметки — который был разработан для создания текстовых документов — для создания приложений и возвращает его к контролю кода приложения.

Еще одна проблема, которая заключается в том, чтобы не отделять ваш JavaScript от вашего HTML: что делать, если ваш JS не загружается или не запускается, а пользователю остается только HTML / CSS для рендеринга? Если вы создаете свое приложение способом React, то ваш HTML (и, возможно, даже ваш CSS, если вы используете WebPack), связан с самим вашим JavaScript. Таким образом, пользователь действительно может загрузить только один небольшой HTML-файл, а затем большой полезный груз JavaScript, содержащий все остальное.

Беспокойство по поводу поисковых систем и SEO, к сожалению, все еще вызывает озабоченность. Мы все знаем, что основные поисковые системы теперь отображают JavaScript, но начальный рендеринг с помощью JavaScript может быть медленнее, что может повлиять на ваш общий рейтинг. Чтобы смягчить это, можно выполнить начальную визуализацию вашего React на сервере перед отправкой его клиенту. Это не только позволит поисковым системам быстрее продвигать ваш сайт, но и даст вашим пользователям более быструю первую значимую краску .

Это может быстро усложниться, но на момент написания этой статьи сам SitePoint фактически использовал этот метод. Брэд Денвер написал фантастическую статью о том, как это было сделано здесь: « Универсальный рендеринг: как мы перестроили SitePoint ».

Рендеринг на стороне сервера по-прежнему будет помогать только при неудачных загрузках (которые встречаются редко) или медленном времени загрузки (гораздо чаще). Это не поможет пользователям, которые полностью отключили JavaScript. Извините, но приложение React все еще остается приложением на основе JavaScript. Вы можете многое сделать за кулисами, но как только вы начнете смешивать функциональность приложения и управление состоянием (например, Flux, Redux или MobX), ваши временные вложения в сравнении с потенциальной отдачей станут отрицательными.

Не только для реакции

JSX с React — отличная штука. Но что, если вы используете другой фреймворк или библиотеку, но все же хотите его использовать? Ну, тебе повезло — потому что JSX технически не привязан к React. Это все еще просто DSL или «синтаксический сахар», помните? Vue.js фактически поддерживает JSX из коробки , и были попытки использовать его с другими фреймворками, такими как Angular 2 и Ember.

Я надеюсь, что это краткое введение в JSX помогло вам лучше понять, что такое JSX, как он может помочь вам и как его можно использовать для создания ваших приложений. А теперь вернись и сделай что-нибудь классное!

36
Share: