Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ws-rush/reactive
https://github.com/ws-rush/reactive
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ws-rush/reactive
- Owner: ws-rush
- Created: 2023-09-11T11:24:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T11:18:21.000Z (10 months ago)
- Last Synced: 2024-04-22T12:03:23.553Z (10 months ago)
- Language: TypeScript
- Size: 1.23 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - Reactive - `React` starter template with `Remix` file-based routing convention for `react-router`, `UnoCSS`, `LinguiJs`, `zustand`, and ton of features. (Get Started / Templates)
- awesome-vite - Reactive - `React` starter template with `Remix` file-based routing convention for `react-router`, `UnoCSS`, `LinguiJs`, `zustand`, and ton of features. (Get Started / Templates)
README
Mocking up web app with Reactive
> linguijs have issue with `t` macro, use `` micro as much as possible instead, until [issue](https://github.com/lingui/js-lingui/issues/1933) solverd
## Features
- ⚡️ [React 19](https://react.dev/), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - born with fastness
- 🗂 [File based routing with layouts support](https://github.com/ws-rush/unplugin-remix-router)
- 📦 [Components auto importing](./app/components)
- 🐻 [State Management via zustand](https://github.com/pmndrs/zustand)
- 🎨 [Tailwindcss](https://tailwindcss.com/) - A utility-first CSS framework packed with classes
- 😃 [Use icons from any icon sets with components](https://github.com/unplugin/unplugin-icons)
- 🔤 [Self-hosted fonts](https://fontsource.org/fonts/red-hat-text/install).
- 🌍 [I18n ready](https://lingui.dev/)
- 📥 [APIs auto importing](https://github.com/unjs/unimport)
- 🗒 [Markdown Support](https://github.com/hmsk/vite-plugin-markdown?tab=readme-ov-file)
- 🏷️ [Manage meta tsgs](https://react.dev/blog/2024/04/25/react-19#support-for-metadata-tags)
- 🖼 [Transform and Optmize images](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite)
- 🦾 TypeScript, of course
- 🐶 Git hooks with [husky](https://typicode.github.io/husky)
- ⚙️ Unit Testing with [Vitest](https://github.com/vitest-dev/vitest)
- ☁️ Deploy on Netlify, zero-config
- 🔗 [Top Level Await](https://www.npmjs.com/package/vite-plugin-top-level-await) out of box
- 🔎 Inspect code with - [Vite Inspect](https://github.com/antfu/vite-plugin-inspect), visit it at `/__inspect`. also open components in editor with [Alt + Right-Click](https://github.com/ArnaudBarre/vite-plugin-react-click-to-component), and use [Tailwind CSS Devtools](https://chromewebstore.google.com/detail/tailwind-css-devtools/pgamkpjkbfldnmemhcbekimfdnjcgkco) for tailwind inspecting
- 📝 Mocking Server API with [json-server](https://github.com/yracnet/vite-plugin-json-server/tree/main)
> for component preview add [Preview.js](https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs) to vscode
## Try it now!
> Reactive requires Node >=14.18
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/wusaby-rush/reactive/generate).
### Clone to local
If you prefer to do it manually with the cleaner git history
```bash
npx degit wusaby-rush/reactive my-reactive-app
cd my-reactive-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```
## Checklist
When you use this template, try follow the checklist to update your info properly
- [ ] Remove the `.github` folder
- [ ] Clean up the READMEs and remove routes
- [ ] Remove tests and write your own
And, enjoy :)
## Usage
### Development
Just run and visit http://localhost:5173
```bash
pnpm dev
```
### Build
To build the App, run
```bash
pnpm build
```
And you will see the generated file in `dist` that ready to be served.
### Deploy on Netlify
Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along the way, and your App will be live in a minute.
### Docker Production Build
First, build the vitesse image by opening the terminal in the project's root directory.
```bash
docker buildx build . -t reactive:latest
```
Run the image and specify port mapping with the `-p` flag.
```bash
docker run --rm -it -p 8080:80 reactive:latest
```
## Why
Configure apps is a headeach, I loved vitesse template for vue, so I decided do one for react.
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list