Understanding the engineering jargon in AI replies

After the AI changes code, it often replies with something like "Created a new component, passed the data in through props, and managed state with useState." You don't need to be able to write this, but you do need to understand it to judge whether the change is right.

How the code is organized

• Frontend Framework: groundwork like React and Vue that defines how components are written and how the page updates when data changes.
• Component: the building blocks a page is split into, like a button, a card, or a whole table.
• Props: data a parent component passes to a child component. The child reads it but doesn't change it.
• State: data a component keeps track of itself that changes as users interact, like whether a dialog is open. When it changes, the page updates with it.
• Hooks: functions in React that start with use, like useState, that give components abilities such as state.
• Component Library: a full set of ready-made buttons, forms, and dialogs someone else built. Install it and use it right away.
• TypeScript: JavaScript with type annotations. A "type error" usually means the data's shape doesn't match what was declared.

Pages and data

• Router: decides which URL shows which page. A Single Page Application (SPA) relies on it to switch pages without a full reload.
• Application Programming Interface (API): the entry point the frontend uses to get data from and send data to the backend. It defines the URL, the parameters, and the response format.
• JavaScript Object Notation (JSON): the most common format for API responses, with curly braces and key-value pairs.
• Cross-Origin Resource Sharing (CORS): browsers only allow requests to the same origin by default. Requesting another domain or port needs that server's permission, or you get a CORS error.

Getting the project running

• Package Manager: npm, pnpm, or yarn. It installs dependencies. When you're told to "run install first," this is what it's about.
• Dev Server: previews the project locally at localhost plus a port number. With Hot Module Replacement, the page updates right after you save code.
• Build packages source code into files the browser can run directly, and Deployment puts the build output on a server so other people can visit it at a URL.
• Environment Variable: config like API URLs and secret keys kept outside the code, with different values for each environment.

When something goes wrong

Press F12 to open Developer Tools, and copy the red error text from the Console and the failed request from Network to the AI exactly as they are. That's much more useful than saying "the page is broken." Each time you finish a working version, commit it with Git so you can always go back if something breaks.

The table is empty. Below are the exact Console error and this API's response from Network. Please analyze the cause first and tell me which files you plan to change. Wait for my OK before you start.