Free React Dashboard - 재료 대시보드 디자인

안녕하세요 코더 여러분,

이 문서는 적극적으로 지원되고 버전이 지정되는 많은 무료 제품으로 전 세계의 많은 개발자를 돕는 회사인 Creative-Tim이 MIT 라이선스에 따라 출시한 오픈 소스React Dashboard를 제시합니다. Google의 Material Design에서 영감을 얻은 이 React Dashboard는 공식 제품 페이지 또는 Github에서 직접 다운로드할 수 있으며 허용 라이선스를 기반으로 파일을 취미 및 상업용 제품에 무제한 사용할 수 있습니다. 읽어 주셔서 감사합니다!

고맙습니다! AppSeed - App Generator에서 제공하는 콘텐츠입니다.

React Dashboard Material - 상품 페이지

React Dashboard Material PRO - 더 많은 페이지, 구성 요소

인기 있는 Dev.to 기사 무료 제공

리액트란?

초보자를 위한 간단한 참고 사항인 React은 사용자 인터페이스를 .. 빠르게 구축하기 위한 Javascript 라이브러리입니다. 잘 알려진 이 JS 라이브러리는 개발자가 "재사용 가능한 UI 구성요소"라고 하는 작고 고립된 코드 조각으로 복잡한 UI를 구성할 수 있도록 도와줍니다. 이 코드는 시간이 지남에 따라 변경되는 데이터를 제공합니다. React를 시작하려면 아래 리소스에 자유롭게 액세스하세요.

React - 공식 프로젝트 사이트

Intro to React - 초보자를 위한 유용한 자습서

ReactJS - Quick Guide , TutorialsPoint에서 발행

React 대시보드 - 머티리얼 디자인

UI 공급업체 참고 사항 - Material Dashboard React는 Google의 Material Design에서 영감을 받은 신선하고 새로운 디자인의 무료 Material-UI Admin입니다. 우리는 사용하기 쉽고 아름다운 구성 요소 세트를 통해 재료 개념에 대한 우리의 견해를 소개하게 되어 매우 기쁩니다. Material Dashboard React는 인기 있는 Material-UI v4.1.0 프레임워크를 기반으로 구축되었습니다.

Material Dashboard React는 빛, 표면 및 움직임을 사용합니다. 일반적인 레이아웃은 깊이와 순서가 분명하도록 여러 개의 서로 다른 레이어를 따라가는 종이 시트와 유사합니다. 내비게이션은 주로 왼쪽 사이드바에 있고 콘텐츠는 기본 패널 내부의 오른쪽에 있습니다.

Material Dashboard React에는 사이드바와 카드 헤더(파란색, 녹색, 주황색, 빨간색, 보라색) 모두에 대한 5가지 색상 필터 선택 항목과 사이드바에 배경 이미지가 있는 옵션이 있습니다.

React Material - 컴파일 소스

로컬에서 프로젝트를 컴파일하고 시작하려면 NodeJS가 필요하고 선택적으로 공개 저장소에서 소스 코드를 다운로드하기 위한 GIT가 필요합니다: Material Dashboard React . NodeJs를 설치하는 것은 매우 쉽습니다. 공식NodejS website에 액세스하여 OS에 맞는 설치 프로그램을 다운로드하고 실행하십시오.

Compile the React Codebase

$ # Get the code
$ git clone https://github.com/creativetimofficial/material-dashboard-react.git
$ cd material-dashboard-react
$
$ # Install modules
$ yarn
$
$ # Start the app (development mode)
$ yarn start

모든 것이 순조롭게 진행된다면 이 React 템플릿이 브라우저에서 실행되고 있어야 합니다.




코드베이스 구조를 더 잘 이해하기 위해 관련 파일 및 디렉토리가 있는 ASCII 차트 아래에 놓겠습니다.

material-dashboard-react
.
├── README.md
├── bower.json
├── gulpfile.js
├── package.json
├── documentation
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── routes.js
    ├── assets
    │   ├── css
    │   │   └── material-dashboard-react.css
    │   ├── img
    │   │   └── faces
    │   └── jss
    │       ├── material-dashboard-react
    │       │   ├── components
    │       │   ├── layouts
    │       │   └── views
    │       └── material-dashboard-react.js
    ├── components
    │   ├── Card
    │   │   ├── Card.js
    │   │   ├── CardAvatar.js
    │   │   ├── CardBody.js
    │   │   ├── CardFooter.js
    │   │   ├── CardHeader.js
    │   │   └── CardIcon.js
    │   ├── CustomButtons
    │   ├── CustomInput
    │   ├── CustomTabs
    │   ├── Footer
    │   ├── Grid
    │   │   ├── GridContainer.js
    │   │   └── GridItem.js
    │   ├── Navbars
    │   │   ├── AdminNavbarLinks.js
    │   │   ├── Navbar.js
    │   │   └── RTLNavbarLinks.js
    │   ├── Sidebar
    │   │   └── Sidebar.js
    │   ├── Table
    │   │   └── Table.js
    │   ├── Tasks
    │   │   └── Tasks.js
    │   └── Typography
    │       ├── Danger.js
    │       ├── Info.js
    │       ├── Muted.js
    │       ├── Primary.js
    │       ├── Quote.js
    │       ├── Success.js
    │       └── Warning.js
    ├── layouts
    │   ├── Admin.js
    │   └── RTL.js
    └── views
        ├── Dashboard
        ├── Icons
        ├── Maps
        ├── Notifications
        ├── RTLPage
        ├── TableList
        ├── Typography
        └── UserProfile

React 대시보드 자료 - 페이지

RTL Support - Quite useful for projects that require Arabic Support

Google Maps Page

User Profile Page

Thanks for reading! For more resources, please access:

Creative-Tim

에서 제공하는 기타React Templates

블로그 기사

가 포함된 선별된 목록