Что такое JSX?

Что такое JSX?

Теперь, когда мы знаем, что такое React, давайте рассмотрим несколько терминов и понятий, которые будут появляться на протяжении всей остальной серии.

В нашей предыдущей статье мы рассмотрели, что такое React (https://facebook.github.io/react/) является и обсуждается на высоком уровне, как это работает. В этой статье мы рассмотрим одну часть экосистемы React: ES6 и JSX.

JSX/ES5/ES6 ЧТО ЭТО??!

В любом поиске в Интернете, ищущем материал React, без сомнения, вы уже столкнулись с терминами JSX, ES5 и ES6. Эти аббревиатуры могут быстро запутаться.

ES5 (ES означает ECMAScript) - это в основном "обычный JavaScript."5-е обновление JavaScript, ES5 был завершен в 2009 году. Он был поддержан всеми основными браузерами в течение нескольких лет. Поэтому, если вы написали или видели какой-либо JavaScript в недавнем прошлом, скорее всего, это был ES5.

ES6-это новая версия JavaScript, которая добавляет некоторые приятные синтаксические и функциональные дополнения. Он был завершен в 2015 году. ES6 почти полностью поддерживается (http://kangax.github.io/compat-table/es6/) всеми основными браузерами. Но пройдет некоторое время, прежде чем старые версии веб-браузеров будут постепенно выведены из употребления. Например, Internet Explorer 11 не поддерживает ES6, но имеет около 12% доли рынка браузеров

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

1. Мы должны транспилировать наш код, чтобы более широкий круг браузеров понимал наш JavaScript. Это означает преобразование ES6 JavaScript в ES5 JavaScript

2. Мы должны включить прокладку или полифилл, который обеспечивает дополнительную функциональность, добавленную в ES6, которую браузер может или не может иметь.

Мы увидим, как мы делаем это немного позже в серии.

Большая часть кода, который мы напишем в этой серии, будет легко переведена на ES5. В тех случаях, когда мы используем ES6, мы сначала представим эту функцию, а затем пройдемся по ней.

Как мы увидим, все наши компоненты React имеют функцию рендеринга,

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

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

			
				class HelloWorld extends React.Component {
					render() {
						return (
							<h1 className='large'>Hello World</h1>
						);
					}
				}
			
		

Функция render () в компоненте HelloWorld выглядит так, как будто она возвращает HTML, но на самом деле это JSX. JSX переводится на обычный JavaScript во время выполнения. Этот компонент, после перевода, выглядит так

				
					class HelloWorld extends React.Component {
						render() {
							return (
								React.createElement('h1',{className: 'large'},'Hello World')
							);
						}
					}
				
			

Хотя JSX выглядит как HTML, на самом деле это просто более короткий способ написать реакцию. объявление createElement (). Когда компонент выполняет визуализацию, он выводит дерево элементов React или виртуальное представление элементов HTML, которые выводит этот компонент. Тогда реагировать будет определить, какие изменения внести в фактический дом на основе этого реагировать представление элемента. В случае компонента HelloWorld HTML, который реагирует на запись в DOM, будет выглядеть следующим образом:

			
				<h1 class='large>Hello World</h1>
			
		

Поскольку JSX-это JavaScript, мы не можем использовать зарезервированные слова JavaScript. Это включает в себя такие слова, как class и for.

React дает нам атрибут className. Мы используем его в HelloWorld, чтобы установить большой класс на нашем теге hl. Существует несколько других атрибутов, таких как атрибут for на метке, который React переводит в htmlFor, поскольку for также является зарезервированным словом. Мы посмотрим на них, когда начнем их использовать.

Если мы хотим написать чистый JavaScript вместо того, чтобы полагаться на компилятор JSX, мы можем просто написать React. createElement() функция и не беспокоиться о слое абстракции. Но нам нравится JSX. Он особенно удобочитаем со сложными компонентами. Рассмотрим следующий JSX:

			
				<div>
				 <img src="profile.jpg" alt="Profile photo" />
				 <h1>Welcome back Ari</h1>
				</div>
			
		

JavaScript, доставленный в браузер, будет выглядеть следующим образом:

				
					React.createElement("div", null,
					React.createElement("img", {src: "profile.jpg", alt: "Profilephoto"}),
					React.createElement("h1", null, "Welcome back Ari"));
				
			

Опять же, хотя вы можете пропустить JSX и написать его напрямую, синтаксис JSX хорошо подходит для представления вложенных элементов HTML.