create-react-tailwind-app-router
Version:
A starter template package for React applications with React Router, Tailwind CSS, and Prettier using Vite. Supports both JavaScript and TypeScript templates.
292 lines (221 loc) • 7.49 kB
Markdown
A modern, production-ready React application template with the latest tools and best practices.
- ⚡ **Vite 7.1+** - Lightning fast build tool with instant HMR
- ⚛️ **React 19** - Latest React with concurrent features and modern hooks
- 🧭 **React Router 6.27+** - Declarative client-side routing with nested routes
- 🎨 **Tailwind CSS 4.1+** - Utility-first CSS framework with Vite plugin
- ✨ **Prettier 3.3+** - Automatic code formatting with opinionated defaults
- 📦 **ESLint 9.33+** - Advanced code linting with React-specific rules
- 🔧 **SWC Compiler** - Super-fast JavaScript/TypeScript compiler for faster builds
- � **Well-organized structure** - Scalable folder structure following React best practices
```bash
npm install
```
Start the development server:
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
```
src/
├── assets/
│ ├── images/
│ ├── icons/
│ └── README.md
├── components/
│ ├── layout/
│ │ ├── Navbar.jsx
│ │ └── index.jsx
│ ├── ui/
│ │ └── index.jsx
│ └── index.js
├── constants/
│ └── index.js
├── context/
│ └── AppContext.jsx
├── hooks/
│ └── index.js
├── pages/
│ ├── Home.jsx
│ ├── About.jsx
│ └── Contact.jsx
├── services/
│ └── api.js
├── types/
│ └── index.js
├── utils/
│ └── helpers.js
├── App.jsx
├── main.jsx
└── index.css
```
```jsx
// Import components from the centralized index
import { Button, Card, LoadingSpinner } from '@/components/ui'
import { Container, Section } from '@/components/layout'
function MyPage() {
return (
<Container>
<Section>
<Card>
<Button variant="primary" size="lg">
Click me
</Button>
<LoadingSpinner size="md" />
</Card>
</Section>
</Container>
)
}
```
```jsx
import { useLocalStorage, useDebounce } from '@/hooks'
function MyComponent() {
const [user, setUser] = useLocalStorage('user', null)
const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 300)
// Use the hooks in your component logic
}
```
```jsx
import { ROUTES, API_BASE_URL } from '@/constants'
import { formatDate, capitalize } from '@/utils/helpers'
// Use constants for consistent values
const navigation = [
{ path: ROUTES.HOME, label: 'Home' },
{ path: ROUTES.ABOUT, label: 'About' },
]
// Use utilities for common operations
const formattedDate = formatDate(new Date())
const title = capitalize('hello world')
```
```jsx
import { useApp } from '@/context/AppContext'
function MyComponent() {
const { state, actions } = useApp()
return (
<div>
<p>User: {state.user?.name}</p>
<button onClick={() => actions.setTheme('dark')}>
Switch to Dark Theme
</button>
</div>
)
}
```
```jsx
import { userService } from '@/services/api'
function UserList() {
const [users, setUsers] = useState([])
useEffect(() => {
const fetchUsers = async () => {
try {
const data = await userService.getUsers()
setUsers(data)
} catch (error) {
console.error('Failed to fetch users:', error)
}
}
fetchUsers()
}, [])
return (
<div>
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
)
}
```
1. **UI Components**: Add reusable components to `src/components/ui/`
2. **Layout Components**: Add layout-related components to `src/components/layout/`
3. **Page Components**: Add page components to `src/pages/`
4. **Export**: Always export from the appropriate index file
1. Create the component in `src/pages/`
2. Add the route in `src/App.jsx`
3. Update navigation in `src/components/layout/Navbar.jsx`
4. Add route constant in `src/constants/index.js`
1. Create hook functions in `src/hooks/index.js`
2. Follow the naming convention: `use*`
3. Add JSDoc documentation for parameters and return values
1. Copy `.env.example` to `.env.local`
2. Update with your configuration values
3. Prefix all variables with `VITE_`
- Use functional components with hooks
- Prefer named exports over default exports for utilities
- Use JSDoc comments for better IDE support
- Follow the existing file naming conventions
```bash
npm run build
```
```bash
npm run preview
```
Format your code with Prettier:
```bash
npm run format
```
Check code formatting:
```bash
npm run format:check
```
Lint your code:
```bash
npm run lint
```
Fix linting issues:
```bash
npm run lint:fix
```
```
src/
├── components/
│ └── Navbar.jsx
├── pages/
│ ├── Home.jsx
│ ├── About.jsx
│ └── Contact.jsx
├── App.jsx
├── main.jsx
└── index.css
```
This template uses Prettier for code formatting. You can customize the formatting rules by editing `.prettierrc`:
```json
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
```
1. Create a new component in `src/pages/`
2. Add the route in `src/App.jsx`
3. Update the navigation in `src/components/Navbar.jsx`
This template uses Tailwind CSS. You can customize the design system by editing `tailwind.config.js`.
MIT