windmill dashboard react

4개의 100점과 PWA가 준비되어 있습니다. 데이터를 연결하기만 하면 됩니다.

실시간으로 확인하세요

이것은 템플릿이 아닙니다. 이것은 React를 기반으로 구축된 완전한 애플리케이션으로, 모든 작은 세부 사항이 처리되므로 데이터를 가져와서 공급하기만 하면 됩니다.

접근성은 내 프로젝트의 최우선 사항이며 여러분의 프로젝트에도 있어야 한다고 생각합니다. 그래서 이것은 실제 스크린 리더를 듣고 개발되었으며 포커스 트랩 및 키보드 탐색은 어디에서나 사용할 수 있습니다.

? 특징

• ? 쉽게 접근할 수 있음(스크린 리더를 사용하여 개발됨)
• ? 어두운 테마 활성화(테마에 따라 다른 이미지도 로드)
• ? 다중(사용자 정의) 구성 요소
• ⚡ 코드 분할
• 순풍 CSS
• 풍차 반응 UI
• 반응 라우터
• 영웅 아이콘
• 차트.js
• 오프라인 우선 및 앱과 같은 경험을 제공하는 PWA

문서

일반 구성요소

Windmill Dashboard React는 Windmill React UI를 기반으로 구축되었습니다. 거기에서 모든 작은 구성요소에 대한 문서를 찾을 수 있습니다.

라우팅

Windmill Dashboard의 경로는 사이드바(routes/sidebar.js)와 일반(routes/index.js)의 두 가지 범주로 구분됩니다.

사이드바 경로

사이드바에 표시되는 경로입니다. 그들은 세 가지 속성을 기대합니다.

• path : 목적지;
• name : 표시할 이름입니다.
• icon : 항목을 설명하는 아이콘

페이지 옵션과 같이 드롭다운으로 사용되는 항목에는 path 필요하지 않지만 path 와 name 있는 객체의 routes 배열이 필요합니다.

 // 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 App으로 부트스트랩되었습니다.

사용 가능한 스크립트

프로젝트 디렉터리에서 다음을 실행할 수 있습니다.

npm start

개발 모드에서 앱을 실행합니다.
http://localhost:3000을 열어 브라우저에서 확인하세요.

수정하면 페이지가 다시 로드됩니다.
콘솔에도 린트 오류가 표시됩니다.

npm test

대화형 감시 모드에서 테스트 실행기를 시작합니다.
자세한 내용은 테스트 실행 섹션을 참조하세요.

npm run build

build 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.

빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!

자세한 내용은 배포에 대한 섹션을 참조하세요.

npm run eject

참고: 이는 단방향 작업입니다. 한번 eject 되돌릴 수 없습니다!

빌드 도구 및 구성 선택 사항이 만족스럽지 않으면 언제든지 eject 수 있습니다. 이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.

대신, 모든 구성 파일과 전이적 종속성(webpack, Babel, ESLint 등)을 프로젝트에 바로 복사하므로 이를 완전히 제어할 수 있습니다. eject 제외한 모든 명령은 계속 작동하지만 복사된 스크립트를 가리키므로 조정할 수 있습니다. 이 시점에서 당신은 스스로입니다.

eject 사용할 필요는 없습니다. 엄선된 기능 세트는 소규모 및 중간 배포에 적합하므로 이 기능을 사용해야 한다는 의무감을 느껴서는 안 됩니다. 그러나 우리는 이 도구를 사용할 준비가 되었을 때 사용자 정의할 수 없다면 유용하지 않다는 것을 알고 있습니다.

자세히 알아보기

Create React App 설명서에서 자세히 알아볼 수 있습니다.

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