w3labkr / react-ninja

React Ninja is a starter template for React typescript based on shadcn/ui

react-ninja

React Ninja is a starter template for React typescript based on shadcn/ui.

Directory Structure

.
└── src/
    ├── assets/
    ├── components/
    │   └── ui/
    ├── config/
    ├── context/
    ├── hooks/
    ├── lib/
    │   └── firebase/
    ├── pages/
    ├── styles/
    ├── App.tsx
    └── main.tsx

Getting Started with Vite

npm create vite@latest . -- --template react-ts

Support for TypeScript's path mapping in Vite

npm install --save-dev vite-tsconfig-paths

Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, Stylelint and more.

npm install --save-dev vite-plugin-checker
``

Declarative routing for React

```shell
npm install react-router-dom localforage match-sorter sort-by

Set the current Node.js version.

node -v > .nvmrc

Runs the app in the development mode.

npm run dev

Configuration

Serving the Same Build from Different Paths: package.json

{
    "homepage": ".",
}

After cleaning the directories, cache and install the dependency packages: packages.json:

{
    "scripts": {
        "clean:dir": "rm -rf node_modules",
        "clean:cache": "npm cache clean --force",
        "clean": "npm run clean:dir && npm run clean:cache",
        "reinstall": "npm run clean && npm install"
    },
}

npm run reinstall
npm run --force reinstall

Tailwind CSS

Install Tailwind CSS

npm install --save-dev tailwindcss postcss autoprefixer
npx tailwindcss init -p

Using 'clsx' or 'classnames' with 'tailwind-merge'

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

src/lib/utils.ts:

import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));

Shadcn UI

Beautifully designed components that you can copy and paste into your apps.

npx shadcn-ui@latest init

Add icon library

npm install lucide-react @radix-ui/react-icons

Adding dark mode

npm install next-themes

Use the add command to add components and dependencies to your project.

npx shadcn-ui@latest add
npx shadcn-ui@latest add [component]

Schema Validation

React Hooks for form state management and validation (Web + React Native).

npm install react-hook-form 
npm install zod @hookform/resolvers

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks
npm install --save-dev eslint-plugin-import eslint-import-resolver-typescript
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin 
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
npm install --save-dev eslint-plugin-tailwindcss prettier-plugin-tailwindcss

Deployment

npx serve -s dist
npx serve -l 8000 -s dist