Как создать сложный макет в приложении React Dashboard

Question

Я создаю интерфейс приложения Dashboard, используя WebStorm IDE и инфраструктуру React.

Поскольку я уже создал дизайн пользовательского интерфейса, я хочу продолжить создание макета.Сначала я хочу создать пустые прямоугольники, а затем вставить в них функции (не уверен, что это лучший рабочий процесс)

Но есть проблема в том, что макет немного сложнее, см. Рисунок:

Как мне поступить?

Стоит ли использовать вложенные теги div и вставлять их в функцию рендеринга?Или есть другое решение?

Answer 1

Стоит ли использовать вложенные теги div и вставлять их в функцию рендеринга?

Да, именно так и следует поступить.

Используйте css для их отображенияКак ты хочешь.Вы можете использовать интерфейсные библиотеки, например:

• UI материала
• React Bootstrap

Если вы хотите использовать начальную загрузку, вы можете взглянуть на , как отобразить систему координат .

Вы также можете следовать этому руководству с w3schools доузнать больше о flexbox и о том, как он работает только с css (без материала или начальной загрузки)