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