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

[![Contributors][contributors-shield]][https://github.com/falloutchonny/cra-template-antd-admin/graphs/contributors] [![Forks][forks-shield]][https://github.com/falloutchonny/cra-template-antd-admin/network/members] [![Stargazers][stars-shield]][https://github.com/falloutchonny/cra-template-antd-admin/stargazers] [![Issues][issues-shield]][https://github.com/falloutchonny/cra-template-antd-admin/issues] [![MIT License][license-shield]][https://github.com/falloutchonny/cra-template-antd-admin/license]

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

View Demo · Report Bug · Request Feature

![Product Name Screen Shot][product-screenshot]

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

This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

• ant design

  • a example page for basic CRUD actions.
  • basic layouts (these layouts do not contain any custom styles, you can easily adjust it to what you want.)

• styled-components

  • building custom components.
  • overriding antd component styles.

• tailwindcss - A utility-first CSS framework

  • building layouts freely.
  • highly cusotomizable.
  • purge enabled.

• react-router

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

• react-query - Fetch, cache and update data

• craco - 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.

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

• node
• npm or yarn

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.

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
    │   │   ├── 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

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

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

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

Chonny Chu - [email protected]

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

• Ant-Design
• Create-React-App