cra-template-antd-admin

The antd+TS, tailwindcss, styled-components, react-router, react-query template for Create React App

一款使用 antd 拉好基本佈局、並整合好 router, styled-components, tailwindcss, prettier commit hook 和 craco 設定的 CRA 樣板，讓你跳過拉佈局、設定路由、 babel 和 webpack 的路徑別名等等步驟，可以快速開始一個以 antd 作為基礎功能和 UI 的專案

cra-template-antd-admin

An awesome cra template to jumpstart your projects!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Folder Structure
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

This is a Create React App template that integrates many tools and libs, it can let you start the development work directly and quickly without trivial steps to set up your project.

Built with

• ant design

  • basic layouts (do not include any custom styles, you can easily adjust it to what you want.)
  • this template provides a page for basic CRUD actions sample.

• craco for extend webpack config provided by create-react-app without eject

  • absolute import path with @ prefix, such as:

    • @pages/Home
    • @hooks/useModal
    • @components/Layout

  • webpack-bundle-analyzer - generate a interactive zoomable treemap to reivew your bundle.

    • usage: ANALYZE=true craco build

  • babel-plugin-import - only boundle the styles and components of antd that used by the app.

  • babel-plugin-styled-components

    • purge unused styles
    • support css props in native html tag.

• prettier

  • pre-commit hook with husky, lint-staged, this can re-format your files that are marked as “staged” via git add before you commit.

• tailwindcss

  • building layouts freely.
  • purge enabled.

• styled-components

  • building custom components.
  • overriding antd component styles.

• react-router

  • The route setting has been written in lib/routes, which is provided to Sider, App or any other components.

• react-query - Fetch, cache and update data

Getting Started

To use this template, add --template antd-admin when creating a new app.

Prerequisites

• node
• npm or yarn

Installation

npx create-react-app my-app --template antd-admin

# or

yarn create react-app my-app --template antd-admin

It will create a directory called my-app inside the current folder.

Folder Structure

Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── img
│   │   ├── 403.svg
│   │   ├── 404.svg
│   │   ├── 500.svg
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── components
    │   ├── common
    │   │   ├── Layout.tsx			- basic page layout
    │   │   ├── Loading.tsx			- loading indicator
    │   │   └── Modal.tsx			- global modal
    │   ├── icons			    	- custom/extend icons
    │   │   ├── Add.tsx
    │   │   └── Edit.tsx
    │   ├── ui                      - should be atomic and pure, like Button, Select, Tabs
    │   │   ├── Header.tsx			- the navbar of app
    │   │   └── Sider.tsx			- the left sider of app
    │   ├── ErrorBoundary.tsx 		- handling react errors
    │   └── Exception.tsx    		- feed back the 404/403/500 results
    ├── hooks
    │   ├── useModal.ts				- react hook for simplify the interaction with Modal
    │   └── useTableRowSelection.ts - react hook for simplify the interaction with Table
    ├── lib
    │   ├── queryClient.ts			- create a query client for react-query provider
    │   ├── routes.ts				- global route setting
    │   ├── types.ts				- types about data fetching
    │   └── useQuery.ts				- react-query's useQuery wrapper
    ├── pages
    │   ├── Home					- basic table list, CRUD example page
    ├── utils
    │   ├── env.ts					- app config such as `api url`, `app basename`
    │   ├── form.ts					- antd form helpers
    │   ├── history.ts				- global history
    │   ├── request.ts				- simple custom fetch wrapper
    │   └── webHelper.ts			- util functions
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── serviceWorker.js
    └── setupTests.js

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Chonny Chu - [e-mail]

Project Link - https://github.com/FallOutChonny/cra-template-antd-admin

Acknowledgements

• Ant-Design
• Create-React-App