ReactJS - Использование React без JSX

Что такое JSX?

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

Почему использовать React без JSX?

Вы можете задаться вопросом: "Если JSX так распространен, почему бы нам не использовать React с ним?" Отличный вопрос! Есть несколько причин:

1. Изучение основных концепций: Понимание работы React без JSX может дать вам более глубокое понимание библиотеки.
2. Ограничения инструментов сборки: Некоторые среды сборки могут не поддерживать компиляцию JSX.
3. Личное предпочтение: Некоторые разработчики просто предпочитают писать чистый JavaScript.

Создание элементов с помощью React.createElement()

Сердце использования React без JSX - это функция React.createElement(). Эта функция - то, на что компилируется JSX, так что мы просто исключаем посредника!

Давайте начнем с простого примера:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

В этом примере мы создаем элемент h1 с классом 'greeting' и текстовым содержимым 'Hello, world!'. Давайте разберем аргументы:

1. Первый аргумент ('h1') указывает тип элемента, который мы хотим создать.
2. Второй аргумент ({className: 'greeting'}) - это объект, содержащий свойства элемента.
3. Третий аргумент ('Hello, world!') - это содержимое элемента.

Если бы мы написали это в JSX, это выглядело бы так:

const element = <h1 className="greeting">Hello, world!</h1>;

Видите, как короче получается с JSX? Но не волнуйтесь, с практикой создание элементов без JSX становится второй натурой!

Вложение элементов

Теперь давайте试试 что-то посложнее. Как насчет создания div с двумя дочерними элементами?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

Это создает структуру, эквивалентную:

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

Обратите внимание, как мы вкладываем вызовы createElement для создания дочерних элементов. Аргументы null - это места, где мы бы放置или свойства, если бы они были нужны.

Создание компонентов

Компоненты - это строительные блоки React приложений. Давайте создадим простой функциональный компонент без JSX:

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

Чтобы использовать этот компонент, мы делаем:

const element = React.createElement(Welcome, {name: 'Alice'});

Это эквивалентно JSX:

const element = <Welcome name="Alice" />;

Обработка событий

Обработка событий в React без JSX очень похожа на обработку с JSX. Давайте создадим кнопку, которая выводит сообщение в консоль при нажатии:

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

Здесь мы передаем функцию handleClick в качестве свойства onClick элементу按钮.

Условное рендеринг

Условный рендеринг без JSX более verbose, но полностью возможен:

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

Списки и ключи

Для рендеринга списков без JSX необходимо явно использовать Array.map():

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

Обратите внимание, как мы используем свойство key, что至关重要 для процесса reconciliation React.

Таблица методов

Вот таблица, резюмирующая ключевые методы, о которых мы говорили:

Метод	Описание	Пример
React.createElement()	Создает React элемент	React.createElement('div', null, 'Hello')
Array.map()	Преобразует элементы массива	numbers.map(n => React.createElement('li', null, n))
React.render()	Рендерит React элемент в DOM	ReactDOM.render(element, document.getElementById('root'))

Заключение

Хотя JSX определенно делает написание кода React более интуитивным и читаемым, понимание того, как использовать React без JSX, дает вам более глубокое представление о том, что происходит под капотом. Это как научиться водить механическую коробку передач перед автоматической - это дает вам больше контроля и понимания процесса.

помните, regardless of whether you use JSX or not, the core principles of React remain the same. Components, props, state, and the virtual DOM all work in the same way. JSX is just syntactic sugar that makes the coding process a bit sweeter!

Так что в следующий раз, когда вы будете отлаживать React приложение и увидите React.createElement() в скомпилированном коде, вы будете знать, что происходит. Удачи в программировании, и пусть ваши React элементы всегда рендерятся правильно!

Credits: Image by storyset