React Demos

It uses referenced template.

Scripts

npm start - Starts the development server.
npm test - Runs the test suite with Vitest. React Testing Library is included along with @testing-library/user-event.

See package.json for more scripts

Linting and Prettier

This project uses "standard" linting with the recommended for react and "prettier". This includes recommendations for rules of hooks and a11y.

It also includes warnings regarding encapsulating React hooks.

It also lints "testing-library" and "jest-dom".

VS Code Extensions and Settings

It also includes sensible VS Code defaults for settings and extensions.

For the settings, we are doing things like:

"css.validate": false, - TailwindCSS uses a lot of custom CSS syntax that VS Code doesn't understand, so we disable validation.
"editor.formatOnSave": true, - We want to format our code on save.
"editor.defaultFormatter": "esbenp.prettier-vscode", - We want to use Prettier to format our code.
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }, - We want to use ESLint to fix any linting errors on save.

You should install the recommended extensions when you open the project in VS Code to get the full benefit of these settings. .

Architecture

This project uses the following architecture heavily inspired by Tania Rascia's React Architecture.

src/ - All of our source code.
- components/ - All of our React components (.jsx). Global shared/reusable components, such as layout (wrappers, navigation), form components, buttons.
- hooks/ - All of our custom React hooks (.js).
- routes/ - All of our React routes (.jsx). Each route is a 'page'.
- services/ - All of our services (.js). Services are responsible for making API calls and returning data, for example (api.js). Or, maybe you have a service that is responsible for managing authentication (auth.js). Or, localStorage (storage.js). The stuff in here has consequences, that is, side effects.
- tests/ - All of our tests (.test.jsx).
- utils/ - All of our utility functions (.js). Utilities, helpers, constants, and the like. Unlike services, these are not responsible for side effects.

Absolute Imports

This project uses absolute imports for all of our files. This means that we can import files from any directory using the @ prefix instead of relative paths (e.g. import Button from '@/components/Button' instead of import Button from '../../components/Button').

This works for any of the directories in src/ as listed above. If you need to add more, see vite.config.js.

Dependency Graph

npm run dep-graph

This project includes "dependency-cruiser". You can generate a dependency graph by running npm run dep-graph. This will be in SVG format by default. You can change this in the package.json file.

Note: You must have Graphviz installed for this to work. You can install it using Homebrew on macOS with brew install graphviz.

Here's an example of what the dependency graph looks like:

License

MIT

Credits

This project was bootstrapped with create-vite.

Like it? Give it a ⭐️ on GitHub.