React Boilerplate

React Boilerplate - qeleb

React Boilerplate

---

Getting Started

⚠️ Using Yarn Package Manager is recommended over npm.

1. (Optional) Install the VS Code extensions listed in .vscode/extensions.json

2. Use yarn to install dependencies

3. Use yarn dev to start development server

---

Commands

Install & Start

1. ⬇️ yarn - install dependencies
2. 🧑‍💻 yarn dev - start local development server
3. 🖥 yarn preview - start local production server

Build

1. 🔨 yarn build - build for production & output to dist/ with Vite (Esbuild)

Test

1. 🧪 yarn test - run unit tests & generate coverage report in coverage/
2. 🧾 yarn test:ui - open unit test UI

Lint

1. 🧹 yarn lint - lint files in src/
2. 🧼 yarn lint:fix - lint files in src/ & fix automatically

---

Files

• coverage/ - Unit test coverage
• dist/ - Code output
• public/ - Static files
• src/ - Project source code
  • __tests__/ - Unit test files
  • assets/ - assets
  • components/ - UI components
  • pages/ - Pages
  • App.tsx - Parent component
  • global.d.ts - Global TypeScript type declarations
  • index.tsx - React entry point

---

Workspace

Runtime, Editor, & plugins

____	Required	____	Recommended
	Node 18 or later is recommended		Error Lens for showing warnings & error messages inline exactly where they happen
	VS Code for launch configs, recommended extensions, style guidelines, file associations, & more.		Console Ninja for in-editor console output
	Eslint for linting files according to the custom rule set		Thunder Client for testing API calls
	Prettier for formatting code		Vitest displays tests in VS Code

Additionally, Todo Tree is great for seeing an overview of the TODO's & NOTE's in the project.

Linting

Linting is provided by ESLint with a custom configurations & the following plugins:

• typescript-eslint
• eslint-plugin-prettier
• eslint-plugin-regexp
• eslint-plugin-vitest

---