Корректность верстки в React
Верстка в 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>
text
</div>;
}
Сделайте внутри дива список ul, содержащий
в себе 10 тегов li.
Сделайте внутри дива таблицу с тремя рядами и тремя колонками.