Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1



Книга Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1



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


Для визуализации данных существует множество платформ бизнес-аналитики (BI). В качестве примера можно привести Tableau, Power BI, QlikView и Looker. Однако они могут иметь ограничения и отличаться высокой стоимостью. Альтернативным подходом к использованию BI-инструментов является применение библиотек визуализации данных, таких как Nivo, при веб-разработке фронтенда.


В этом цикле из трех частей мы рассмотрим, как создавать дэшборды, отслеживающие производительность сайта, с помощью React, Tailwind CSS, Material UI и Nivo. Если вы разработчик, желающий усовершенствовать навыки визуализации данных, владелец бизнеса, стремящийся получить представление о данных, или просто человек, интересующийся миром React и визуализации данных, рекомендуем приступить к работе после прочтения серии этих статей.


Итак, начнем!




В первой части я покажу процесс создания динамичного и отзывчивого веб-приложения с использованием React, Tailwind CSS, Material UI и Nivo.


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


Введение в библиотеки


React—  это библиотека JavaScript с открытым исходным кодом. Она предназначена для создания пользовательских интерфейсов одностраничных приложений. Библиотека React популярна благодаря своей компонентной архитектуре и виртуальной модели DOM (Document Object Model)  —  in-memory-представлению реальной DOM, что позволяет эффективно обновлять и визуализировать изменения в пользовательском интерфейсе без манипуляций с реальной DOM. React по сей день является одной из самых распространенных библиотек для разработки фронтенда.


Material UI—  это язык дизайна, пользующийся популярностью при создании современных, визуально привлекательных веб-приложений, которые требуют минимум усилий по проектированию. Он позволяет разрабатывать модульные компоненты и тематические элементы, а также сконструирован специально для React, что упростит его интеграцию в проект. Мы будем использовать эту библиотеку для компонентов пользовательского интерфейса. Обратите внимание: в Material UI есть возможности тематической стилизации, но я намеренно решил использовать Tailwind CSS в этом проекте, чтобы продемонстрировать обе библиотеки.


Tailwind CSS  —  это CSS-фреймворк, ориентированный на утилиты. Он содержит классы, которые генерируют соответствующие стили. Это позволяет просто и быстро генерировать стили с помощью отзывчивых классов. Данная библиотека будет использована в проекте для стилизации приложения.


Nivo  —  это библиотека визуализации данных на JavaScript, предназначенная для построения настраиваемых компонентов визуализации данных. Она предоставляет ряд типов диаграмм, включая гистограммы, линейные диаграммы, диаграммы рассеяния и другие. О том, как использовать Nivo, мы расскажем в третьей части цикла, поэтому не забудьте сохранить эту статью в закладках!


Предварительные условия


Перед созданием React-проекта убедитесь, что на вашем компьютере установлен Node.js (не ниже версии 14.0.0) и npm (Node Package Manager). Npm используется для установки самой библиотеки React, а также дополнительных пакетов, необходимых при разработке.


Эти пакеты можно легко установить с помощью Homebrew, выполнив следующую команду: brew install node.


Инициирование веб-приложения React


Для начала воспользуемся командой create-react-app, чтобы инициировать React-проект. Этот инструмент содержит набор скриптов, упрощающих работу над новым React-проектом, и часто используется для создания одностраничных React-приложений. С помощью нижеуказанных команд создадим все необходимые файлы для React-приложения, переключим каталог, чтобы он указывал на вновь созданный путь, и запустим приложение.


npx create-react-app my-app
cd my-app
npm start

После выполнения приведенных выше команд в терминале должно появиться сообщение “Installing packages…” (“Установка пакетов…”).


Источник: https://create-react-app.dev/

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


Локальный браузер

Поздравляем! Вы создали React-приложение, содержащее шаблонный код. Теперь в редакторе кода вы должны увидеть локальную сборку проекта.


Установка Tailwind CSS


После запуска веб-приложения можно приступить к его настройке. Сначала установим Tailwind CSS, выполнив следующую команду:


npm install tailwindcss

Затем можем сгенерировать файл конфигурации Tailwind и добавить его в проект (при этом в корневом каталоге проекта будет создан файл tailwind.config.js):


npx tailwindcss init -p

Для того чтобы импортировать CSS-стили Tailwind в проект, необходимо добавить нижеуказанные операторы в основной CSS-файл проекта. Мы можем создать новый CSS-файл или добавить эти строки в существующий. В случае нашего приложения откроем файл src/index.css и заменим текущий CSS-код на следующий:


@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

После выполнения этих шагов можно применять утилитарные классы Tailwind CSS непосредственно к HTML-элементам.


Установка Material UI


Далее установим Material UI (MUI) для компонентов. Это можно сделать, выполнив следующее:


npm install @mui/material @mui/icons @emotion/react @emotion/styled

После установки импортируем необходимые компоненты в приложение. В этом проекте будем использовать компоненты drawer и list для разработки боковой панели навигации.


Создание скелета приложения


Теперь мы готовы к обновлению приложения! Первое, что нужно сделать,  —  это удалить весь ненужный код. В рамках данного туториала мы пропустим эту часть, но я рекомендую сделать такую очистку самостоятельно, чтобы попрактиковаться.


Реализацию постраничной навигации с помощью динамической маршрутизации будем проводить посредством библиотеки react-router-dom. Для этого необходимо установить следующее:


npm install react-router-dom

Далее обновим файл App.js. Мы создадим компонент динамической навигации, содержащий три отдельные страницы: Home, About и Insights. Страницы Home и About пока оставим пустыми, а страницу Insights заполним в третьей части цикла.


Вот какие задачи будет выполнять код.



  • Импорт всех необходимых модулей и компонентов.

  • Определение 3 функциональных компонентов, представляющих каждую страницу в приложении. Каждый компонент будет содержать заголовок.

  • Создание функции App в качестве главного компонента.

  • Создание с помощью хука useState переменной состояния drawerOpen и функции setDrawerOpen для управления состоянием бокового меню.

  • Создание функции toggleDrawer, принимающей в качестве параметра булево значение open для открытия и закрытия бокового меню и проверяющей такие события клавиатуры, как “tab” и “shift”, для соответствующей навигации по веб-приложению.

  • Работа с различными маршрутами (или страницами) с помощью BrowserRouter, Route, Routes и Link.

  • Создание боковой панели навигации с помощью компонента MUI Drawer. Изначально она установлена в закрытом состоянии и может быть открыта/закрыта кликом по иконке-гамбургеру. Компоненты List и ListItem используются для определения каждой страницы и навигации между страницами.

  • Создание кнопки навигации с символом ☰, расположенным в левом верхнем углу. При нажатии на этот символ открывается боковая панель.

  • Определение маршрутов для каждой страницы в компоненте Routes.


Замените существующий код в App.js на этот:


import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";

const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Insights = () => (
<div>
<h2>Insights</h2>
</div>
);

function App() {
const [drawerOpen, setDrawerOpen] = useState(false);

const toggleDrawer = (open) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}

setDrawerOpen(open);
};

return (
<Router>
<div>
<Drawer
anchor="left"
open={drawerOpen}
onClose={toggleDrawer(false)}
PaperProps={{ style: { width: "15%" } }}
>
<List>
<ListItem button key="home">
<Link to="/" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="Home" />
</Link>
</ListItem>
<ListItem button key="about">
<Link to="/about" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="About" />
</Link>
</ListItem>
<ListItem button key="insights">
<Link to="/insights" onClick={() => setDrawerOpen(false)}>
<ListItemText primary="Insights" />
</Link>
</ListItem>
</List>
</Drawer>

<nav>
<button onClick={toggleDrawer(true)} style={{ cursor: "pointer" }}>

</button>
</nav>

<Routes>
<Route path="/about" element={<About />} />
<Route path="/insights" element={<Insights />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}

export default App;

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


Локальный браузер: страница Home (домашняя)

Локальный браузер: навигация



Заключение


Поздравляем с созданием React-приложения! Теперь, после построения скелета страницы, можно перейти к процессу стилизации. Читайте об этом в следующей части цикла.



31   0  

Comments

    Ничего не найдено.