chrisuser/vite-react-component

Vite template to create a component library from scratch

Vite react component

Usage

To clone and use this template type the following commands:

npx degit chrisuser/vite-react-component my-component

cd my-component

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 and to change the /REPO_NAME/ string inside the vite.config.ts one.

🚀 Available Scripts

In the project directory, you can run:

⚡️ start

npm run dev

or

yarn dev

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

🦾 build

npm run 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 run 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.

🧬 Project structure

This is the structure of the files in the project:

    │
    ├── .github                 # github workflows/actions
    ├── lib                     # component files
    ├── src                     # source files
    │   ├── App.css
    │   ├── App.tsx
    │   ├── main.tsx
    │   └── vite-env.d.ts
    ├── .eslintrc.js
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── README.md
    ├── tsconfig-build-docs.json
    ├── tsconfig-build.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.json        # main vite configurations
    └── yarn.lock

📖 Learn More

This template was created by following this guide by Andreas Riedmüller.

You can learn more in the Vite documentation.

To learn React, check out the React documentation.

Contribution

If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.
Remeber to follow the Contributing Guidelines.