I walk through deploying a Vite/React app on GitHub Pages using the branch-based setup. I cover pointing Pages at a /docs directory, setting Vite’s base path to the repo name, building and copying the output to /docs, and an optional vite.config change to build directly into it...
This is a write-up of an exercise from Mosh’s React 18 course: building a small expense-tracking app in React and TypeScript, with Zod used for form validation. I cover component breakdown decisions, persisting expenses to local storage, tradeoffs in TypeScript type definitions, and refactoring repeated table markup into reusable components...
I compare approaches to styling React components, including global stylesheets, inline style objects, CSS and component libraries, per-component CSS files, CSS modules, and styled-components. I demonstrate each on a simple card component, noting trade-offs such as name clashes, hover effects, and unused CSS accumulating over time. I find styled-components the most elegant but lean toward per-component CSS files to avoid extra dependencies...
My To Do app gets rebuilt in React, continuing a series that has already covered vanilla JavaScript and htmx versions backed by the same REST API. I cover React’s core ideas—components, declarative UI, and the virtual DOM—along with Vite build tooling, and walk through the app’s components, useState-based state management, and passing data via props. React’s tooling complexity and 150K of shipped JavaScript make it overkill at this scale, but I plan further React work, possibly with TypeScript...
While trying to clear an npm audit vulnerability in my React app’s nth-check dependency, I investigate confusing version mismatches between package-lock.json and npm list, and find that hand-editing the lock file doesn’t survive an install. A GitHub issue on create-react-app explains the flag is effectively a false positive for a dev-only dependency and can be safely ignored, with a workaround for CI builds. My takeaways include a clearer understanding of package.json versus package-lock.json and the value of searching for the exact error first...
A failed attempt to replace my React component’s inline-styled div with plain HTML and CSS leads to the realization that JSX is JavaScript code that mutates the virtual DOM, not HTML. I question why React uses the faux-HTML syntax instead of a pure JavaScript DOM API. An update notes that a video revealed the HTML-like syntax was an intentional selling point of React, and that similar ideas have already been tried and abandoned...
