README.en.md

React template

简体中文 | English

🔗 Demo

• preview (PC) react-enterprise-template
• preview（mobile） react-template-mobile

👨🏻‍💻 Project Description

• mobile template: react-template-mobile

• React template, a more rich template than CRA.

• Development configuration documentation React18 + webpack5 + TypeScript4 + react-router-dom

• Project Creation Tutorial <Building a React Project Development Template from 0 to 1>

📱 Features

• 📦 Out of the box, no configuration required.
• 📝 Comprehensive comment explanations, low learning cost.
• 🚀 Fast startup and compilation.
• 🌱 Highly customizable, easy to expand.

🚀 Technology Stack

• React v19
• react-dom v19
• React Hook
• TypeScript v4
• webpack v5
• axios v1
• mobx v6
• mobx-react-lite v3
• react-router-dom v6

🎄 Upcoming Features:

• ① Styles ✅ config: 🔧 Add style file (css/less/sass/postCss) processing

• ② Code specification ✅ config: 🔧  Add Prettier/ESlint/StyleLint/EditorConfig code specification

• ③ Routing ✅ config: 🔧 Add routing management react-router-dom v6

• ④ Network request ✅ feat: ✨  Add network request Axios v1

• ⑤ Data sharing ✅ feature: ✨  Add state management MobX v6

• ⑥ React Hook Rules ✅ feat: ✨ Added check for React Hook rules

• ⑦ Encapsulated global SVG componen ✅ feat: ✨ Encapsulated global SVG component

• ⑧ Mobile adaptation ✅ feat: ✨ Add mobile adaptation solution: postcss px to viewport

• ⑨ Explanation of the differences in the use of Mobx ✅ feat: ✨ Add explanations and usage examples for makeObservable and makeAutoObservable

• ⑩ Mobx react lite optimization ✅ feat: ✨ Add the use and optimization of observer and observer in mobx react lite

• ⑪ Add UI design materials ✅ docs: 📝 Update development design reference documents

⌛️ Install project dependencies

• npm >= 6.14.x
• node >= 16.30.x

npm
$ npm install

yarn
$ yarn

🚀 Run the project

npm
$ npm run start

yarn
$ yarn dev

📦 Packaging and compilation

npm run build:qa  // Testing environment
npm run build:prod  // Production environment

🏷 Branch description

Branch	description
main	Main branch
deploy	demo deploy
dev	Development branch

Code submission specification

git <type>: <subject>
git commit -m "feat: Project initialization"

type 参考:

fix       🐛 Bug fix
feature   ✨ Introduce new features
docs      📝 Document writing changes
prune     🔥 Remove code or files
perf      ⚡ Performance-related optimizations
rocket    🚀 Deployment function
style     💄 Style modification
init      🎉 Initial submission
release   🔖 Release version
wip       🚧 Work in progress, and unstable submissions may occur
config    🔧 Modify configuration file
refactot  🔨 Refactoring (code changes that neither add new features nor fix bugs)
merge     🔀 Merge branches

📂 Directory Structure

    ├── .vscode
    │   └──setting.json                 # Configuration for vscode that takes precedence over global settings.json
    ├── doc                             # Development documentation
    ├── webpack                         # Packaging and compilation
    │   └──config                       # Webpack configuration
    │       ├── webpack.common.js       # Base configuration
    │       ├── webpack.dev.js          # Development environment configuration
    │       └──webpack.prod.js          # Production environment configuration
    ├── pubilc
    │   ├──favicon.ico                  # HTML icon
    │   └──index.html                   # HTML entry template
    ├── src
    |   ├── api                         # Interface configuration
    |   ├── assets                      # Static resources
    │   ├── components                  # Common components of the project
    │   ├── http                        # Unified encapsulation of requests
    │   ├── httpinterface               # TypeScript type definition
    │   ├── constData                   # Constant list within the system
    │   ├── router                      # Unified routing entry
    │   ├── store                       # Data sharing
    │   ├── styles                      # Global style
    │   ├── utils                       # Utility library
    │   ├── view                        # Pages
    │   ├── App.tsx                     # Main interface
    │   └──index.tsx                    # Entry file
    ├── .babelrc.js                     # Babel configuration
    ├── .editorconfig                   # Maintaining consistent coding style across editors
    ├── .env.json                       # Environment variable configuration
    ├── .eslintignore                   # Files ignored by ESLint
    ├── .eslintrc.js                    # ESLint configuration
    ├── .gitignore                      # Files ignored by git submission
    ├── .npmrc
    ├── .prettierignore                 # Files ignored by prettierc
    ├── .prettierrc                     # Prettierc configuration
    ├── .stylelintrc.js                 # Code style configuration
    ├── LICENSE                         # Open source license
    ├── package-lock.json               # npm package lock management
    ├── package.json                    # Dependency management
    ├── README.md                       # Project description
    ├── tsconfig.json                   # TypeScript configuration file
    └── yarn.lock                       # Yarn package lock management

📚 Development reference

• Development reference

🤝 How to Contribute

• 📬 If you have any questions, please open an issue or leave a message
• 🧙‍♀️ Welcome all contributors, come to Issus or submit Pull Requests to become a contributor

⭐️ Stargazers

💡 Open Source License

The code and documentation of this project are released under the MIT License open source license.