Web

wat components.json The cn() Helper globals.css & Theming Dark Mode Dependencies Explained CVA Example Blocks vs Components Quick Start Workflow Forms with TanStack + shadcn/ui Claude Code + MCP Tips Essential Commands Mental Model wat shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code. components.json Controls how CLI installs components, paths, and styling preferences. ...

React React No Frills Tools npm Prettier ESLint Vite Vite Proxy TypeScript Bleeding Edge and Alternative Tools JSX DOM control Styling Rendering Lists Handling Events Passing Parameters to Event Handlers Passing JSX as Props React Hooks useState useEffect Custom Hooks useContext Forms and User Input Push Cart to Server React Ecosystem TanStack Router Vite Setup routeTree.gen.ts Router Setup TanStack Query Resources React React is a JavaScript library for building component based interactive UI’s. ...

Modern CSS Fundamentals Baseline Progressive Enhancement Logical properties and values CSS Reset CSS Cascade Layers CSS Custom Properties (variables) Colors Typography Media queries and custom properties Structured custom properties Base styles Meaningful links Big picture design system Wrappers Modifiers Option 1: BEM approach Option 2: Data attributes Landmark regions Gems Resources Modern CSS Fundamentals Baseline Baseline features are ones that are supported by all the major browsers (Chrome, Edge, Safari, and Firefox). Both the MDN web docs and caniuse show when a feature has reached either the Newly available or Widely available threshold. ...

Once you start working with React in anger, there is a tipping point to be aware of where: the complexity of data flows piles up the same data is being rendered in multiple places the number of state changes blow out Being able to tackle these problems in a single place is where Redux fits in. Contents Contents The Problem Option 1 lift the state Option 2 react context Option 3 Redux A chat with redux Container vs Presentation Components The Redux Principles Actions The Store Immutability Reducers React-Redux React-Redux Provider React-Redux Connect mapStateToProps mapDispatchToProps Redux Setup Async and APIs Mock API API Client Wrappers Redux Middleware Redux Async Libraries Thunks Conditional mapStateToProps Polish (the finer things) Spinner component Status API and feedback Server side validation Client side validation Optimistic deletes Testing Redux Connected Components Action Creators Thunks Reducers Store The Problem Imagine a fairly deep component hierarchy, starting with your top level App component. Deep down the tree, there are two child components that need to access a common piece of data (e.g. customer data). How should these components access the data they require? ...