👩‍💻 JSX

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

Основные отличия от обычного JavaScript

1. HTML-подобная структура: В JSX вы можете использовать привычные HTML-теги для описания разметки компонента. Это значительно облегчает понимание структуры UI-разметки даже для тех, кто раньше не работал с React.

;

2. Динамические выражения: Внутри JSX можно вставлять динамическое содержимое через фигурные скобки {}, что делает возможным использование переменных, функций и любых выражений JavaScript.

`const name = 'Иван'; const element = Привет, {name}! ===============

;

3. Компоненты: В отличие от простого JavaScript, где нужно вручную создавать DOM-элементы и управлять ими, в JSX можно легко использовать компоненты React, делая код модульным и повторно используемым.

4. Стилизация: JSX поддерживает возможность стилизации элементов прямо в коде, используя объекты стилей, что также отличается от стандартного подхода CSS.

`const style = { color: 'blue', fontSize: '20px' }; const element = Привет, мир! ============

;

Для чего нужен JSX?

1. Упрощение разработки UI: Использование JSX помогает сократить количество шаблонного кода, необходимого для создания пользовательского интерфейса, и сделать его более декларативным.

2. Читаемость и поддержка модульности: Код становится легче читать и поддерживать благодаря визуальной структуре, схожей с HTML. Компонентный подход позволяет разбивать интерфейс на независимые части.

3. Совместимость с JavaScript: Поскольку JSX компилируется в обычный JavaScript, его можно использовать совместно с любым другим JavaScript-кодом, включая функции, методы и библиотеки.

Пример использования

Рассмотрим простой компонент React, который выводит приветствие с именем пользователя: `import React from 'react';

const HelloWorld = ({ name }) => { return (

Это пример использования JSX.

); };

export default HelloWorld;

Здесь мы создали функциональный компонент HelloWorld, который принимает пропс name и возвращает JSX-код, представляющий структуру HTML-разметки. Этот компонент можно использовать в другом месте приложения следующим образом: `import HelloWorld from './HelloWorld';

const App = () => { return (

); };

export default App;

Рассмотрим как работают циклы в JSX. Вы не поверите, но самый частый способ это через .map

Допустим, у нас есть массив пользователей: `const users = [ { id: 1, name: 'Иван' }, { id: 2, name: 'Петр' }, { id: 3, name: 'Анна' } ];

Мы хотим отобразить этот список в виде списка - внутри элемента . Вот как это можно сделать с помощью JSX: `import React from 'react';

const UserList = () => {
 return (


     {users.map(user => (
     + {user.name}

     ))}
 );
};

export default UserList;


Разберем этот код подробнее:

1. Мы создаем компонент UserList, который возвращает элемент 
    .
    2. Внутри 
         мы используем метод .map(), чтобы пройтись по каждому элементу массива users.
        3. Каждый элемент массива преобразуется в элемент - , содержащий имя пользователя.
        4. Ключевое слово key используется для уникальной идентификации каждого элемента списка. В данном случае мы используем id пользователя.

        Начиная с версии vue.js 3, так же имеет поддержку [jsx](https://vuejs.org/guide/extras/render-function.html#jsx-tsx). Однако разработчики фреймворка, рекомендуют использовать  подход, где html отделен от js и от css.```````