Skip to content

react-setup.md

Latest commit

 

History

History
44 lines (30 loc) · 1.12 KB

react-setup.md

File metadata and controls

44 lines (30 loc) · 1.12 KB

React and shadcn/ui Configuration

This project uses React with shadcn/ui for interface components, specifically checkboxes in the Diagram section.

Installation

  1. Install Node.js dependencies:
npm install

Development

For development with hot-reload:

npm run dev

This will launch Vite in development mode. Note that you may need to configure a proxy or modify Flask configuration to serve React files in development.

Production Build

Before launching Flask, you must build React components:

npm run build

This will generate compiled files in static/react/.

Structure

  • src/ : React/TypeScript source code
  • src/components/ui/ : shadcn/ui components (checkbox, label, etc.)
  • src/components/ : Custom React components
  • static/react/ : Compiled files (generated by build)
  • tailwind.config.js : Tailwind CSS configuration (used by shadcn/ui)
  • components.json : shadcn/ui configuration

Notes

  • Tailwind CSS is now managed via npm (not CDN)
  • Styles are defined in src/index.css
  • React components communicate with vanilla JS via window.mountDiagramCheckboxes