From 7f728b821ef47abdf2e433ee1342dccb871c36f8 Mon Sep 17 00:00:00 2001 From: Frederic Beckmann Date: Sun, 9 Feb 2025 13:04:36 +0100 Subject: [PATCH] Update README to include installation instructions for React with Vite and TypeScript, and optional tools like TailwindCSS and DaisyUI --- README.md | 111 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 72 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 8775933..01ea1c2 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,92 @@ -# ASPReactDemo +

ASP Net Core, Nswag, SignalR, React, Syncfusion

-Eine Demo für: --ASP Net Core --Nswag --SignalR --React --Syncfusion +- [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 Yarn + +# Installation React with Vite and TypeScript ```bash -yarn create react-app react-client --template typescript +# Create a new project using the "react-ts" template +yarn create vite my-react-app --template react-ts -cd react-client +# Navigate to the project folder +cd my-react-app -yarn build +# Install dependencies +yarn install -yarn start ``` -## Installation tailwindcss -### Install and Init +# Routing +## Install react-router-dom ```bash -yarn add tailwindcss postcss autoprefixer +yarn add react-router-dom +``` -npx tailwindcss init -p +## 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 + ], +}) ``` -### Configure the tailwind.config.js File - -Update the tailwind.config.js file to specify the paths to all of your template files. Replace the default content with the following (if not already present): - -```javascript -module.exports = { - purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], - darkMode: false, // or 'media' or 'class' - theme: { - extend: {}, - }, - variants: { - extend: {}, - }, - plugins: [], -} -``` - -### Add Tailwind directives to your CSS: +### Update css file ```css -@tailwind base; -@tailwind components; -@tailwind utilities; +/* 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 */ ```