👩‍💻 JSX JSX — это синтаксическая надстройка над JavaScript, используемая в основном в библиотеках React для упрощенного описания структуры компонентов интерфейсов. JSX позволяет писать HTML-подобный код прямо внутри JavaScript, что делает код более читаемым и интуитивно понятным, особенно когда речь идет о создании сложных пользовательских интерфейсов. Основные отличия от обычного JavaScript 1. HTML-подобная структура: В JSX вы можете использовать привычные HTML-теги для описания разметки компонента. Это значительно облегчает понимание структуры UI-разметки даже для тех, кто раньше не работал с React. const element = <h1>Привет, мир!</h1>; 2. Динамические выражения: Внутри JSX можно вставлять динамическое содержимое через фигурные скобки {}, что делает возможным использование переменных, функций и любых выражений JavaScript. const name = 'Иван'; const element = <h1>Привет, {name}!</h1>; 3. Компоненты: В отличие от простого JavaScript, где нужно вручную создавать DOM-элементы и управлять ими, в JSX можно легко использовать компоненты React, делая код модульным и повторно используемым. 4. Стилизация: JSX поддерживает возможность стилизации элементов прямо в коде, используя объекты стилей, что также отличается от стандартного подхода CSS. const style = { color: 'blue', fontSize: '20px' }; const element = <h1 style={style}>Привет, мир!</h1>; Для чего нужен JSX? 1. Упрощение разработки UI: Использование JSX помогает сократить количество шаблонного кода, необходимого для создания пользовательского интерфейса, и сделать его более декларативным. 2. Читаемость и поддержка модульности: Код становится легче читать и поддерживать благодаря визуальной структуре, схожей с HTML. Компонентный подход позволяет разбивать интерфейс на независимые части. 3. Совместимость с JavaScript: Поскольку JSX компилируется в обычный JavaScript, его можно использовать совместно с любым другим JavaScript-кодом, включая функции, методы и библиотеки. Пример использования Рассмотрим простой компонент React, который выводит приветствие с именем пользователя: import React from 'react'; const HelloWorld = ({ name }) => { return ( <div> <h1>Привет, {name}!</h1> <p>Это пример использования JSX.</p> </div> ); }; export default HelloWorld; Здесь мы создали функциональный компонент HelloWorld, который принимает пропс name и возвращает JSX-код, представляющий структуру HTML-разметки. Этот компонент можно использовать в другом месте приложения следующим образом: import HelloWorld from './HelloWorld'; const App = () => { return ( <div> <HelloWorld name="Мир" /> </div> ); }; export default App; Рассмотрим как работают циклы в JSX. Вы не поверите, но самый частый способ это через .map Допустим, у нас есть массив пользователей: const users = [ { id: 1, name: 'Иван' }, { id: 2, name: 'Петр' }, { id: 3, name: 'Анна' } ]; Мы хотим отобразить этот список в виде списка <li> внутри элемента <ul>. Вот как это можно сделать с помощью JSX: import React from 'react'; const UserList = () => { return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; export default UserList; Разберем этот код подробнее: 1. Мы создаем компонент UserList, который возвращает элемент <ul>. 2. Внутри <ul> мы используем метод .map(), чтобы пройтись по каждому элементу массива users. 3. Каждый элемент массива преобразуется в элемент <li>, содержащий имя пользователя. 4. Ключевое слово key используется для уникальной идентификации каждого элемента списка. В данном случае мы используем id пользователя. Начиная с версии vue.js 3, так же имеет поддержку jsx. Однако разработчики фреймворка, рекомендуют использовать <template> подход, где html отделен от js и от css.