windmill dashboard react

Четыре 100 баллов и PWA готово. Просто подключите свои данные.

Посмотрите это вживую

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

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

? Функции

• ? Полностью доступный (разработан с использованием программ чтения с экрана)
• ? Включена темная тема (загружайте даже разные изображения в зависимости от темы)
• ? Несколько (пользовательских) компонентов
• ⚡ Разделение кода
• CSS попутного ветра
• Пользовательский интерфейс React для ветряной мельницы
• Реагирующий маршрутизатор
• Героиконы
• Chart.js
• PWA обеспечивает удобство работы в автономном режиме и на уровне приложений

Документы

Общие компоненты

Windmill Dashboard React построен на основе пользовательского интерфейса Windmill React. Там вы найдете документацию для каждого небольшого компонента.

Маршрутизация

Маршруты в Windmill Dashboard разделены на две категории: боковая панель (routes/sidebar.js) и общие (routes/index.js).

Маршруты боковой панели

Это маршруты, которые будут отображаться на боковой панели. Они ожидают трех свойств:

• path : пункт назначения;
• name : имя, которое будет отображаться;
• icon : значок, иллюстрирующий элемент.

Элементам, которые используются в качестве раскрывающихся списков, например, параметру «Страницы», не нужен path , но ожидается массив объектов routes с path и name :

 // sidebar.js
{
  path : '/app/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/create-account' ,
      name : 'Create account' ,
    } , 

Общие (маршрутизаторские) маршруты

Это внутренние (частные) маршруты. Они будут отображаться внутри приложения с использованием containers/Layout по умолчанию.

Если вы хотите добавить маршрут, скажем, к целевой странице, вам следует добавить его в маршрутизатор App (src/App.js, точно так же, как маршрутизируются Login , CreateAccount и другие страницы.

Как добавить новую страницу в роутер?

1. Создайте свою страницу внутри src/pages , скажем MyPage.js ;
2. Добавьте его в глобальный маршрутизатор ( src/routes/index.js )

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

Затем добавьте его в массив routes :

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

3. Если вы хотите сделать эту страницу доступной с боковой панели, у вас есть следующие варианты:

• добавьте его в массив корневых routes

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

• добавьте его как вариант в раскрывающемся списке

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

Если вы спрашиваете, откуда берется это /app , то именно из этой строки внутри src/App.js отображается приложение:

 < Route path = "/app" component = { Layout } />

---

Этот проект был запущен с помощью приложения Create React.

Доступные скрипты

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

npm start

Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.

Страница перезагрузится, если вы внесете изменения.
Вы также увидите любые ошибки в консоли.

npm test

Запускает тест-раннер в режиме интерактивного просмотра.
Дополнительную информацию смотрите в разделе о запуске тестов.

npm run build

Собирает приложение для производства в папке build .
Он правильно объединяет React в производственном режиме и оптимизирует сборку для достижения наилучшей производительности.

Сборка минимизирована, а имена файлов включают хеши.
Ваше приложение готово к развертыванию!

Дополнительные сведения см. в разделе о развертывании.

npm run eject

Примечание: это односторонняя операция. После того, как вы eject , вы не сможете вернуться!

Если вас не устраивает инструмент сборки и варианты конфигурации, вы можете eject в любое время. Эта команда удалит единственную зависимость сборки из вашего проекта.

Вместо этого он скопирует все файлы конфигурации и транзитивные зависимости (webpack, Babel, ESLint и т. д.) прямо в ваш проект, чтобы вы имели полный контроль над ними. Все команды, кроме eject по-прежнему будут работать, но они будут указывать на скопированные сценарии, чтобы вы могли их настроить. На данный момент вы сами по себе.

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

Узнать больше

Подробную информацию можно найти в документации по созданию приложения React.

Чтобы изучить React, ознакомьтесь с документацией React.

Разделение кода

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/code-splitting.

Анализ размера пакета

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size.

Создание прогрессивного веб-приложения

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app.

Расширенная конфигурация

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/advanced-configuration.

Развертывание

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/deployment.

npm run build не может минимизировать

Этот раздел переехал сюда: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify.