-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7e0eed1
commit f3c7084
Showing
1 changed file
with
233 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,244 @@ | ||
| # cra-template-typescript | ||
| # cra-template-antd-admin | ||
|
|
||
| This is the official TypeScript template for [Create React App](https://github.com/facebook/create-react-app). | ||
| The antd+TS, tailwindcss, styled-components, react-router, react-query template for [Create React App](https://create-react-app.dev/) | ||
|
|
||
| To use this template, add `--template typescript` when creating a new app. | ||
| <!-- | ||
| *** Thanks for checking out the Best-README-Template. If you have a suggestion | ||
| *** that would make this better, please fork the repo and create a pull request | ||
| *** or simply open an issue with the tag "enhancement". | ||
| *** Thanks again! Now go create something AMAZING! :D | ||
| --> | ||
|
|
||
| For example: | ||
| <!-- PROJECT SHIELDS --> | ||
| <!-- | ||
| *** I'm using markdown "reference style" links for readability. | ||
| *** Reference links are enclosed in brackets [ ] instead of parentheses ( ). | ||
| *** See the bottom of this document for the declaration of the reference variables | ||
| *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. | ||
| *** https://www.markdownguide.org/basic-syntax/#reference-style-links | ||
| --> | ||
|
|
||
| [![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] | ||
|
|
||
| <!-- PROJECT LOGO --> | ||
| <br /> | ||
| <p align="center"> | ||
| <a href="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/FalloutChonny/cra-template-antd-admin"> | ||
| <img src="images/logo.png" alt="Logo" width="80" height="80"> | ||
| </a> | ||
|
|
||
| <h3 align="center">cra-template-antd-admin</h3> | ||
|
|
||
| <p align="center"> | ||
| An awesome README template to jumpstart your projects! | ||
| <br /> | ||
| <a href="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/FalloutChonny/cra-template-antd-admin"><strong>Explore the docs »</strong></a> | ||
| <br /> | ||
| <br /> | ||
| <a href="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/othneildrew/Best-README-Template">View Demo</a> | ||
| · | ||
| <a href="https://github.com/FalloutChonny/cra-template-antd-admin/issues">Report Bug</a> | ||
| · | ||
| <a href="https://github.com/FalloutChonny/cra-template-antd-admin/issues">Request Feature</a> | ||
| </p> | ||
| </p> | ||
|
|
||
| <!-- TABLE OF CONTENTS --> | ||
| <details open="open"> | ||
| <summary>Table of Contents</summary> | ||
| <ol> | ||
| <li> | ||
| <a href="#about-the-project">About The Project</a> | ||
| <ul> | ||
| <li><a href="#built-with">Built With</a></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="#getting-started">Getting Started</a> | ||
| <ul> | ||
| <li><a href="#prerequisites">Prerequisites</a></li> | ||
| <li><a href="#installation">Installation</a></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="#folder-structure">Folder Structure</a> | ||
| </li> | ||
| <li><a href="#roadmap">Roadmap</a></li> | ||
| <li><a href="#contributing">Contributing</a></li> | ||
| <li><a href="#license">License</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| <li><a href="#acknowledgements">Acknowledgements</a></li> | ||
| </ol> | ||
| </details> | ||
|
|
||
| <!-- ABOUT THE PROJECT --> | ||
|
|
||
| ## About The Project | ||
|
|
||
| [![Product Name Screen Shot][product-screenshot]](https://example.com) | ||
|
|
||
| This is a [Create React App](https://create-react-app.dev/) 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. | ||
|
|
||
|
|
||
| <!-- BUILT WITH --> | ||
| ### Built with | ||
|
|
||
| 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](https://github.com/ant-design/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](https://styled-components.com/) | ||
| * building custom components. | ||
| * overriding antd component styles. | ||
|
|
||
| * [tailwindcss](https://tailwindcss.com/) - A utility-first CSS framework | ||
| * building layouts freely. | ||
| * highly cusotomizable. | ||
| * purge enabled. | ||
|
|
||
| * [react-router](https://reactrouter.com/) | ||
| * The global route setting has been written in lib/routes, which is provided to Sider and App components. | ||
|
|
||
| * [react-query](https://react-query.tanstack.com/) - Fetch, cache and update data | ||
|
|
||
| * [craco](https://github.com/gsoft-inc/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. | ||
|
|
||
|
|
||
|
|
||
| <!-- GETTING STARTED --> | ||
|
|
||
| ## Getting Started | ||
|
|
||
| To use this template, add --template antd-admin when creating a new app. | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - [node](https://nodejs.org/en/) | ||
| - [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) | ||
|
|
||
| ### Installation | ||
|
|
||
| ```sh | ||
| npx create-react-app my-app --template typescript | ||
| npx create-react-app my-app --template antd-admin | ||
|
|
||
| # or | ||
|
|
||
| yarn create react-app my-app --template typescript | ||
| yarn create react-app my-app --template antd-admin | ||
| ``` | ||
|
|
||
| For more information, please refer to: | ||
| It will create a directory called my-app inside the current folder. | ||
|
|
||
| <!-- FOLDER STRUCTURE --> | ||
|
|
||
| ## 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 | ||
| │ │ ├── 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 --> | ||
|
|
||
| ## Roadmap | ||
|
|
||
| See the [open issues](https://github.com/FallOutChonny/cra-template-antd-admin/issues) for a list of proposed features (and known issues). | ||
|
|
||
| <!-- CONTRIBUTING --> | ||
|
|
||
| ## 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 --> | ||
|
|
||
| ## License | ||
|
|
||
| Distributed under the MIT License. See `LICENSE` for more information. | ||
|
|
||
| <!-- CONTACT --> | ||
|
|
||
| ## Contact | ||
|
|
||
| Chonny Chu - [email protected] | ||
|
|
||
| Project Link: [https://github.com/FallOutChonny/cra-template-antd-admin](https://github.com/FallOutChonny/cra-template-antd-admin) | ||
|
|
||
| <!-- ACKNOWLEDGEMENTS --> | ||
|
|
||
| ## Acknowledgements | ||
|
|
||
| - [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app. | ||
| - [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App. | ||
| - [Ant-Design](https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge) | ||
| - [Create-React-App](https://github.com/othneildrew/Best-README-Template/graphs/contributors) |