Create a React SPA

This guide will bootstrap a React application with Vite, with the following features:

• Built using Vite
• Typechecking with TypeScript
• Code formatting with Prettier

Create project

pnpm create vite --template react-swc-ts

Add Prettier

1. Install it from NPM

   pnpm i -D prettier
   

2. Create a .prettierrc.json file

   .prettierrc.json

   {}
   

3. Create a .prettierignore file

   .prettierignore

   node_modules
   build
   pnpm-lock.yaml
   

4. Add a format script in the package.json

   package.json

   {
       "scripts": {
           "format": "prettier --write ."
       }
   }
   

5. Run the format script to format existing code

   pnpm format
   

Next Steps

• Add library support to publish as a React library

---

Last update: August 12, 2023
Created: June 3, 2023