Skip to content

Latest commit

 

History

History
64 lines (58 loc) · 1.6 KB

README.md

File metadata and controls

64 lines (58 loc) · 1.6 KB

REACT-structure-template

For bigger projects

The Technology Stack

JS framework: React; Build tool: Webpack; UI style framework: Not included, can be chosen by demand; Router: react-router-dom; Style sheet type: Scss.

Project Structure

  • react-app-template

    • -public

    A folder we do not recommend to use, just keep it for a specific need of static resources.

    • -src
      • assets
        • images
        • styles All scss files location.
      • components
        • tests Unit tests folder, tests can be added later according to the schedule requirement.
        • common All the common components for the application.
        • utils Tools js files for helping development.
      • router Application router configurations.
      • views All page views files.
        • App.vue Application entry vue file.
      • index.tsx Application entry file.
      • webpack Application build tool customized configuration file.
        • webpack.common.js common configuration
        • webpack.dev.js dev environment configuration
        • webpack.prod.js production environment configuration
      • .env.development development environment variables
      • .eslintrc.cjs eslint configurations
      • package.json Application packages and version management file.

Recommended IDE Setup VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration See Webpack5 Configuration Reference.

Project Setup npm install Compile and Hot-Reload for Development npm run start Compile and Minify for Production npm run build Run Unit Tests npm run test