# Корректность верстки в 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`.

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

← →
↑