Start Archiv nach Kategorie "Webentwicklung"

Kategorie: Webentwicklung

[TypeScript] Projekt im Visual Studio Code mit React, Typescript und Vite erstellen

Template-Projekt im Projektverzeichnis anlegen

npm create vite@latest my-mini-app --template react-ts

Pakatabhängigkeiten prüfen und abhängige Pakete installieren

npm install

Peer-Dependencies installieren

npm install –legacy-peer-deps

Lokalen Testserver starten

npm run dev

Deployment-Preview starten

npm run preview

Paketabhängigkeiten prüfen

npm audit

Paketabhängigkeiten fixen

npm audit fix --force

Tests durchführen

npm run test –silent

Projekt in den Ordner /dist ausgeben/compilieren

npm run build

Projekt-Cache zurücksetzen

npm cache clean –force

React-Router installieren

npm install react-router-dom
npm install --save-dev @types/react-router-dom

Tailwind 4 installieren

Tailwind CSS v4 arbeitet komplett anders als Tailwind 3 – ohne tailwind.config.js. Stattdessen wird alles direkt in CSS konfiguriert.

npx tailwindcss init -p
npm install -D postcss

Datei: postcss.config.js anpassen

export default {
 plugins: {
 '@tailwindcss/postcss': {},
 },
}

Datei vite.config.ts editieren:

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

export default defineConfig({
 plugins: [
 react(),
 babel({ presets: [reactCompilerPreset()] })
 // tailwindcss() - ENTFERNT!
 ],
})

Datei /src/index.css editieren:

@import "tailwindcss";

Links

[SVG] Transparentes SVG-Icon

Um SVG-Icons transparent anzuzeigen, muss der Abschnitt rect angepasst werden. Wenn das rect keine Füllfarbe hat, behandelt der SVG‑Renderer das rect ohne "fill" als schwarz gefüllt, also nicht transparent.

Dadurch verdeckt es den Hintergrund. Durch das explizite Setzen von rect mit einem fill="none" wird das SVG-Icon vollständig transparent, nur der feste Inhalt (Beispiel-Symbol) bleibt sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <defs>
        <linearGradient id="grad-light" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#38bdf8"/>
            <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7dd3fc"/>
            <stop offset="100%" stop-color="#60a5fa"/>
        </linearGradient>
    </defs>

    <!-- Transparenter Hintergrund durch fill="none" -->
    <rect class="bg" width="64" height="64" rx="9" fill="none"/>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="45" font-family="sans-serif" font-weight="700" dy="0.087">&#x1f3a7;</text>
</svg>