93 lines
1.7 KiB
Markdown
93 lines
1.7 KiB
Markdown
<h1> ASP Net Core, Nswag, SignalR, React, Syncfusion </h1>
|
|
|
|
- [Installation React with Vite and TypeScript](#installation-react-with-vite-and-typescript)
|
|
- [Routing](#routing)
|
|
- [Install react-router-dom](#install-react-router-dom)
|
|
- [Update App.tsx](#update-apptsx)
|
|
- [Update configuration files](#update-configuration-files)
|
|
- [Update css file](#update-css-file)
|
|
- [DaisyUI 5](#daisyui-5)
|
|
- [Install daisyUI](#install-daisyui)
|
|
- [Update css file](#update-css-file-1)
|
|
|
|
|
|
|
|
# Installation React with Vite and TypeScript
|
|
|
|
```bash
|
|
# Create a new project using the "react-ts" template
|
|
yarn create vite my-react-app --template react-ts
|
|
|
|
# Navigate to the project folder
|
|
cd my-react-app
|
|
|
|
# Install dependencies
|
|
yarn install
|
|
|
|
```
|
|
|
|
# Routing
|
|
|
|
## Install react-router-dom
|
|
```bash
|
|
yarn add react-router-dom
|
|
```
|
|
|
|
## Update App.tsx
|
|
```tsx
|
|
|
|
|
|
|
|
|
|
|
|
# Optional Tools
|
|
## tailwindcss
|
|
|
|
### Install tailwindcss
|
|
```bash
|
|
# Install tailwindcss
|
|
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
|
|
```
|
|
|
|
### Update configuration files
|
|
```typescript
|
|
# vite.config.ts
|
|
|
|
import { defineConfig } from 'vite'
|
|
import tailwindcss from '@tailwindcss/vite' // Add this line
|
|
export default defineConfig({
|
|
plugins: [
|
|
tailwindcss(), //Add this line
|
|
],
|
|
})
|
|
|
|
```
|
|
|
|
|
|
### Update css file
|
|
|
|
```css
|
|
/* eg. src/index.css */
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* Add your custom styles here */
|
|
```
|
|
|
|
|
|
## DaisyUI 5
|
|
|
|
### Install daisyUI
|
|
```bash
|
|
# Install daisyUI
|
|
yarn add -D daisyui@beta
|
|
```
|
|
### Update css file
|
|
|
|
```css
|
|
/* eg. src/index.css */
|
|
@import "tailwindcss"; /* Existing line */
|
|
@plugin "daisyui";
|
|
/* Add your custom styles here */
|
|
```
|