examples react

• examples
• requirements
• quickstart

examples

example	description
test-app	basic skeleton spa
zustand react singleton service	zustand services
react pitfalls	common pitfalls
load svg url	load svg from url with fill customization

requirements

• nodejs

just untar into ~/opt then symlink, ie

cd~/opt
ln -s node-v22.17.1-linux-x64 node

and add path to your ~/.bashrc

echo'export PATH=$PATH:~/opt/node/bin'>>~/.bashrc

quickstart

to create a react app

pnpm create vite@latest test-app -- --template react-ts

to debug then

cd test-app
pnpm i
code .

from terminal of vscode

pnpm run dev

from vscode run/debug create a launch.json file and select WebApp (Chrome) then Chrome (Launch)

a file like following will be created

{ "version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
} ]
}

edit the url to the one as npm run dev reports, ie

"url": "http://localhost:5173",

now hit F5 to attach the debugger

go to the App.tsx and place a breakpoint (F9) to the button onclick