Введение в язык JSX в React

Язык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде, без кавычек.

Теги можно возвращать через return:

function App() {
	return <div>
		text
	</div>;
}

Теги можно записывать в переменные или константы:

function App() {
	const  elem = <div>text</div>;
	return elem;
}

Давайте посмотрим, какие особенности имеет JSX.

Закрытость тегов

Все теги в JSX должны быть закрыты, в том числе теги, которые не требуют пары, например, input или br.

Следующий пример кода выдаст ошибку, так как инпут не закрыт:

function App() {
	return <div>
		<input>
	</div>;
}

Закроем его с помощью обратного слеша:

function App() {
	return <div>
		<input />
	</div>;
}

Корректность верстки

Верстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга. Например, если в теге ul разместить абзац, это приведет к ошибке.

Помимо более-менее очевидных недопустимых вложенностей, есть также и неожиданные: таблицы.

В таблицах мы привыкли сразу в тег table вкладывать теги tr, вот так:

function App() {
	return <table>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
	</table>;
}

Такой код в React приведет к выводу предупреждения в консоли, так как tr должны быть вложены либо в тег tbody, либо в thead, либо в tfoot.

Давайте исправим проблему, сделав нашу таблицу корректной:

function App() {
	return <table>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</tbody>
	</table>;
}

Атрибуты

В теги можно добавлять атрибуты:

function App() {
	return <div id="elem">
		text
	</div>;
}

Некоторые атрибуты представляют собой исключения: вместо атрибута class следует писать атрибут className, а вместо атрибута for следует писать атрибут htmlFor:

function App() {
	return <div className="block">
		<label htmlFor="elem">text</label>
		<input id="elem" />
	</div>;
}

Практические задачи

Функция в вашем основном компоненте сейчас должна выглядеть следующим образом:

function App() {
	return <div>
		text
	</div>;
}

Поменяйте текст внутри дива. Посмотрите на изменения, произошедшие в браузере.

Добавьте в див несколько абзацев.

Добавьте в див несколько инпутов, разделенных тегами br.

Сделайте внутри дива список ul, содержащий в себе 10 тегов li.

Сделайте внутри дива таблицу с тремя рядами и тремя колонками.

Сделайте внутри дива три абзаца с различными CSS классами.