https://github.com/massoncorlette/ReactProjectStarterTemplate
Useful template to get up and running quickly, using npm library and liveserver readily available. Instructions in README.
https://github.com/massoncorlette/ReactProjectStarterTemplate
babel babel-plugin javascript starter-kit template webpack webpack5
Last synced: 10 months ago
JSON representation
Useful template to get up and running quickly, using npm library and liveserver readily available. Instructions in README.
- Host: GitHub
- URL: https://github.com/massoncorlette/ReactProjectStarterTemplate
- Owner: massoncorlette
- License: mit
- Created: 2024-10-22T01:37:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T03:21:53.000Z (over 1 year ago)
- Last Synced: 2024-10-27T12:46:14.064Z (over 1 year ago)
- Topics: babel, babel-plugin, javascript, starter-kit, template, webpack, webpack5
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React + Vite
Vite and Vitest setup now run:
npm install
npm run dev
npm react-router-dom
Two packages that come with react-router-dom:
1. Loaders fetch data before rendering. (link)
1. A big advantage of loaders is that they decouple data fetching from the component rendering, thus avoiding the waterfall problem.
2. Actions handle form submissions without needing extra state. (Prevents the need for useState in simple handling.)
For testing run:
npm install jsdom --save-dev (enable HTML for vitest testing)
npm install @testing-library/react @testing-library/jest-dom --save-dev (installs React testing library)
npm install @testing-library/user-event --save-dev (installs userEvent API to simulate user interaction)
More details on the installed libraries: https://www.theodinproject.com/lessons/node-path-react-new-introduction-to-react-testing#setting-up-a-react-testing-environment
npm test App.test.jsx (to run a test)
npx prettier --write . (command to auto fix format and spacing issues)
npx eslint . --fix (command to auto fix inaccurate syntax)
npx eslint . (command to just check errors)
Make sure to have React Extension in Browser: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en for debugging
Installed Vitest using: https://www.robinwieruch.de/vitest-react-testing-library/ (Assuming Vite is setup as well)
Vite → A super-fast build tool for modern web apps (replaces Webpack).
Vitest → A testing framework designed for Vite projects (alternative to Jest).
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh