Awesome

Usage

To clone and use this template type the following commands:

npx degit chrisuser/vite-complete-react-app my-app

cd my-app

Then, based on your package manager:

npm

npm install

npm run dev

yarn

yarn

yarn dev

[!TIP] Remember to update the project name inside the package.json file.

⚗️ Technologies list

• TypeScript
• Sass
• Redux Toolkit
• Router
• Axios
• Moment
• ESlint & Prettier

[!TIP] After cloning the repo you can delete all the previous text for a cleaner README.

This is a blank README file that you can customize at your needs.
Describe your project, how it works and how to contribute to it.

🚀 Available Scripts

In the project directory, you can run:

⚡️ start

npm start

or

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

🧪 test

npm test

or

yarn test

Launches the test runner in the interactive watch mode.

🦾 build

npm build

or

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

🧶 lint

npm lint

or

yarn lint

Creates a .eslintcache file in which ESLint cache is stored. Running this command can dramatically improve ESLint's running time by ensuring that only changed files are linted.

🎯 format

npm format

or

yarn format

Checks if your files are formatted. This command will output a human-friendly message and a list of unformatted files, if any.

🧬 Project structure

This is the structure of the files in the project:

    │
    ├── public                  # public files (favicon, .htaccess, manifest, ...)
    ├── src                     # source files
    │   ├── __tests__           # all test files
    │   ├── components
    │   ├── pages
    │   ├── resources           # images, constants and other static resources
    │   ├── store               # Redux store
    │   │   ├── actions         # store's actions
    │   │   └── reducers        # store's reducers
    │   ├── styles
    │   ├── types               # data interfaces
    │   ├── utility             # utilities functions and custom components
    │   ├── App.tsx
    │   ├── index.tsx
    │   ├── RootComponent.tsx   # React component with all the routes
    │   ├── serviceWorker.ts
    │   ├── setupTests.ts
    │   └── vite-env.d.ts
    ├── .env
    ├── .eslintignore
    ├── .eslintrc.js
    ├── .gitignore
    ├── .prettierrc
    ├── index.html
    ├── jest.config.cjs
    ├── package.json
    ├── README.md
    ├── tsconfig.json
    └── vite.config.json

📖 Learn More

You can learn more in the Vite documentation.

To learn React, check out the React documentation.