Введение в JSX: HTML, который поддерживает JavaScript
JSX - это способ написания HTML на JavaScript, но он скорее похож на написание JavaScript на HTML. Как язык шаблонов, он нравится одним и ненавистен другим. В этом разделе объясняется, как работает JSX и почему он важен.
Создание шаблонов с помощью JSX
JSX был представлен как язык шаблонов для очень популярной среды React. Он позволяет определять структуру представления приложения с помощью HTML-разметки, которая взаимодействует с JavaScript-контекстом приложения. Разработчики, как правило, либо любят его, либо ненавидят, поскольку эта простая идея идет вразрез с общепринятым мнением о разделении представления и поведения.
Игнорируя принципиальные споры вокруг JSX, мы можем сосредоточиться на вопросе, как использовать JSX, который является стандартом де-факто для реактивного шаблонирования и повлиял на другие шаблоны, такие как Vue и Svelte. Вот как выглядит базовый JSX в приложении React:
Если вы посмотрите на все, что находится в [0], вы увидите, что это просто HTML. Но он инкапсулирован в JavaScript: HTML - это возвращаемое значение функции App, которая является функциональным компонентом React; разметка JSX - это возвращаемое значение функции; а разметка JSX - это возвращаемое значение функции.import React from 'react'; export function App(props) { return ( <div className='App'> <h1>Greetings from InfoWorld</h1> <h2>This is some JSX</h2> </div> ); }
По сути, возвращаемое значение JSX сообщает движку рендеринга React о результатах работы компонента.
HTML внутри JavaScript
Раньше видеть разметку, встроенную в JavaScript, было странно, но теперь это обычное дело. На самом деле, очень полезно использовать разметку и JavaScript вместе. Например, допустим, вы хотите вставить переменную в разметку. Вы можете сделать следующее.
export function App(props) {
let [name, setName] = React.useState("User");
return (
<div className='App'>
<h1>Greetings from InfoWorld</h1>
<h2>Hello {name}</h2>
</div> );
}
Скобки в шаблоне JSX представляют собой выражения JSX. Они позволяют выполнять выражения JavaScript внутри разметки и получать доступ к переменным, поскольку JavaScript выполняется в более широком контексте окружающего кода.
Теперь вы можете увидеть силу, которая сделала JSX таким успешным: у вас есть вся функциональность JavaScript, импортированные библиотеки, такие как платформа React, и полный синтаксис HTML, который может ссылаться на них.
Обратите внимание, что JSX может использовать выражения, но это не полный JavaScript; JSX выводит результат выражения в представление в шаблоне. Вещи, которые не возвращают значение, такие как циклы, не будут работать. (Это отличается от других инструментов шаблонизации).
Циклы.
Есть много вещей, которые можно делать с помощью JSX, но одна из самых важных - это циклы. Предположим, например, что у вас есть много пород и вы хотите их отобразить. Вот как это можно сделать
Переберите все породы с помощью этой map-функции и выведите разметку для каждой из них: HTML/JSX в JavaScript, HTML/JSX в JavaScript, HTML/JSX в JavaScript.<div className='App'> <h1>Greetings from InfoWorld</h1> <h2></h2> <h3>{breeds.map((breed) => { return <li key={breed}>{breed}</li>; })}</h3> </div>
Например, объем кода можно сократить, опустив оператор return:
Помните, что для вывода коллекции в виде цикла можно использовать другие методы функции, такие как filteri и reduce. Это дает вам определенную власть при работе с циклами. Кроме того, вы всегда можете обратиться к JavaScript в самом компоненте, чтобы изменить переменные данных и при необходимости передать их в JSX. (Вы также можете настроить HTML-код в JavaScript и отобразить его непосредственно в JSX).<h3>{breeds.map((breed) => <li key={breed}>{breed}</li> )}</h3></code>
Условные предложения.
Еще одна важная функция - обработка условных потоков управления, таких как if/then/else. Например, перебирая породы собак, вы хотите проверить условия, например, существует ли поле breedOrigin.
<h3>{breeds.map((breed) =>
<li key={breed.name}>{
breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>Если задать переменной breeedsd значение пустого массива, JSX ничего не отобразит.
<div className='App'>
<h1>Greetings from InfoWorld</h1>
<h2></h2>
{ breeds.length > 0 && <>
<h3>{breeds.map((breed) => <li key={breed.name}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>
</>
}
</div>Фрагмент.
Вы заметите пустые теги элементов:
<>и </>. Это фрагменты React, поддерживаемые JSX. Мы могли бы использовать a, <div>но <>это более идиоматично. Кроме того, фрагменты позволяют обертывать многие элементы в JSX без создания несемантического элемента-обертки.События.
Следующая важная особенность JSX - обработка событий. Допустим, вы хотите, чтобы пользователь мог нажать на сорт и открыть страницу Википедии, посвященную этому сорту. Это можно сделать следующим образом
let [breeds, setBreeds] = React.useState([
{name:'Shih Tzu',breedInfo:'Pekanese and Lhasa Apso cross',link:'https://en.wikipedia.org/wiki/Shih_Tzu'},
{name:'Labradoodle', link:'https://en.wikipedia.org/wiki/Labradoodle'},
{name:'Vizla',breedInfo:'Hungarian breed'},
{name:'Catahoula'} ]); const handleBreedClick = (wikiLink) => {
window.open(wikiLink, '_blank'); }; return (
<div className='App'>
<h1>Greetings from InfoWorld</h1>
<h2></h2>
{ breeds.length > 0 && <>
<h3>
{breeds.map((breed) =>
<li key={breed.name} onClick={() => handleBreedClick(breed.link)}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}
</li>
)}
</h3>
</>
}
</div> );Здесь мы определяем функцию handleBreedClick, которая реагирует на событие. Это просто открывает вики-ссылку в новом окне. Чтобы отправить событие, используйте JSX-обработчик onClick: onClick={() => handleBreedClick(breed.link)} Это похоже на обычный обработчик событий HTML, но вместо строчных букв ( onclick ), а не в нижнем регистре ( onclick).
Вы также можете определить встроенные обработчики событий. Например, при нажатии откроется оповещение:
<li onClick={() => { alert(breed.name)}} />.В общем случае выражения JSX можно использовать в фигурных скобках для указания значений свойств (props) элементов HTML.
Стилизация.
Элементы JSX также поддерживают стилизацию CSS. Как и в случае с событиями, это может быть сделано по ссылке или в строке. Ниже приведен пример первого варианта.
Как и в случае с событиями, вы определяете переменную в JavaScript и ссылаетесь на нее в свойстве. В данном случае свойство styles используется для предоставления объекта JavaScript. Предполагается, что этот объект будет представлять собой набор ключей-значений, где ключи - это имена свойств CSS, а значения - строки значений CSS; в свойствах CSS используется camelCase, а не имена с точкой и заглавными буквами, как в CSS. (Например, background-colour становится backgroundColour.const listItemStyle = { cursor: 'pointer', margin: '10px 0', padding: '5px', backgroundColor: '#f5f5f5', border: '1px solid #ccc', borderRadius: '5px', }; // … same <li style={listItemStyle} ... </li>
Чтобы использовать встроенные стили, используйте формат двойной скобки. Это может показаться странным, но по сути это выглядит следующим образом
<li style={{backgroundColor:'#f5f5f5',padding:'5px'}} …>Обработка ошибок.
Естественный вопрос - как обрабатываются ошибки в JSX, но это более широкий вопрос, поскольку JSX является частью React; обработка ошибок в React и JSX, включая использование компонентов YerryBoundarycomponents для переноса сегментов ошибок, является Подробнее об этом можно прочитать здесь.
Мы изучили основы JSX. Изучение основ даст вам большую часть функциональности, необходимой для создания пользовательских интерфейсов, а прелесть JSX в том, что он просто расширяет две знакомые технологии - JavaScript и HTML - и объединяет их. Сочетание этих трех инструментов дает значительный синергетический эффект.
Как только JSX будет понят, его можно будет легко перенести на другие реактивные фреймворки, такие как Vue, Angular и Svelte, и их языки паттернов JSX - полезная база для сравнительного обучения и исследований.
Агенство Цифровых Решений - Go495.ru