React JS с нуля: JSX — простое введение

Введение

В JavaScript можно выводить HTML-строки, но ранее вы создавали строки и выводили их как текст. JSX позволяет напрямую писать HTML-код внутри JavaScript, и он корректно обрабатывается благодаря технологии JSX – JavaScript XML. JSX позволяет писать HTML-структуру непосредственно в JavaScript-коде.

JSX: Простота и удобство

Для демонстрации разницы и удобства JSX, перепишем HTML-структуру без использования JSX. Например, для вывода элемента <input> с JSX достаточно написать: <input>.

Без JSX, для вывода того же элемента и добавления атрибутов (опций), необходим следующий код:

React.createElement('input', { placeholder: 'Help text' });

React.createElement создаёт элемент, а второй аргумент – объект с атрибутами (например, placeholder). Можно добавить больше атрибутов (например, blue) через запятую.

Для обработки событий (например, onClick и onMouseEnter) внутри объекта атрибутов указывается функция:

React.createElement('input', { 
    placeholder: 'Help text', 
    onClick: () => console.log('Click'),
    onMouseEnter: () => console.log('Mouse over') 
});

Обратите внимание на стиль имён обработчиков событий в JSX: каждое последующее слово начинается с заглавной буквы (например, onClick). Хотя запись в нижнем регистре (onclick) тоже сработает, рекомендуется использовать camelCase.

Код выведет поле <input> с placeholder, а в консоли отобразятся сообщения при нажатии и наведении курсора. Создание HTML-тега без JSX – более сложный процесс.

JSX: Переписываем код с использованием JSX

Перепишем предыдущий код с использованием JSX:

<input placeholder="Help text" />

Обратите внимание на более компактный и читаемый код. Вместо React.createElement мы пишем непосредственно HTML-код. Обработчики событий также проще добавляются.

Значения атрибутов можно хранить в переменных:

const element = 'input';
const label = 'Help text';
<input type={element} placeholder={label} />

Добавим обработчики событий, используя функции:

const inputClick = () => console.log('Click');
const mouseOver = () => console.log('Mouse over');

<input 
    placeholder="Help text" 
    onClick={inputClick} 
    onMouseEnter={mouseOver} 
/>

Внутри JSX, для встраивания JavaScript-кода (условия, циклы, переменные) используются фигурные скобки {}. Например:

const helpText = 'Help text!';
<p>{helpText}</p>
<p>{1 + 5}</p>
<p>{helpText === 'Help text!' ? 'Yes' : 'No'}</p>

Для указания классов используйте className, а не class, так как class является зарезервированным словом в React.

Установка React

Вместо подключения React через <script>-теги, рекомендуется использовать npm – пакетный менеджер Node.js. Установите Node.js (LTS-версию с официального сайта). После установки, npm будет доступен в командной строке.

Для установки React и React DOM используйте команды:

npm install react
npm install react-dom

Это добавит файлы package.json и node_modules в ваш проект. package.json содержит информацию о зависимостях, а node_modules – сами библиотеки.

Более удобный способ – использовать npx create-react-app:

npx create-react-app .

Это создаст новый React-проект в текущей директории.

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