Beginner6 min readShare
Was this chapter helpful?
Share
You don't need to write code — but understanding what your AI generated helps you describe changes better and catch mistakes.
You don't need to memorize any of this. This guide helps you recognize patterns so you can point at specific parts of the code and tell AI what to change.
.tsx / .jsxReact components
The building blocks of your site. Each file is usually one piece of your UI — a button, a page, a card.
.ts / .jsLogic & utilities
Helper functions, API routes, data processing. No visual elements — just logic.
.cssStyles
Colors, spacing, fonts, animations. Controls how things look.
.jsonData & config
Settings files (package.json), data files, or API responses. Human-readable key-value pairs.
.envSecrets
API keys, database URLs, and other values that should never be shared publicly.
page.tsxA page/route
In Next.js, each page.tsx file becomes a URL. src/app/about/page.tsx → yoursite.com/about
Every React component follows the same pattern. Here's what each part does:
import ... from ...Imports
Pulls in tools, components, or icons from other files. Like a shopping list of ingredients before cooking.
export default function PageName()The component
This is the main function. Everything inside it defines what shows up on screen. The name usually matches the file.
const [value, setValue] = useState(...)State (memory)
A value that can change over time — like whether a menu is open, what the user typed, or which tab is selected.
return ( <div>...</div> )The output
Everything inside the return is what actually appears on the page. It looks like HTML but it's called JSX.
className="text-lg font-bold"Styling
Tailwind CSS classes that control appearance. 'text-lg' = larger text, 'font-bold' = bold, 'bg-purple' = purple background.
onClick={() => ...}Event handler
What happens when someone clicks, hovers, or types. The code inside runs when the event fires.
{items.map((item) => ...)}Loop / list
Repeats something for each item in a list. Like 'for each product, show a card.'
{isOpen && <Modal />}Conditional render
Show something only when a condition is true. 'If the menu is open, show the menu.'
Tailwind classes are like shorthand instructions. Once you learn the pattern, you can read any component's styling:
text-lgLarger text
font-boldBold text
text-mutedGray/muted color
bg-purplePurple background
p-4Padding on all sides
mt-6Margin on top
rounded-xlRounded corners
flexItems in a row
grid grid-cols-22-column grid
hidden sm:blockHidden on mobile
hover:bg-purplePurple on hover
w-fullFull width
You don't need to understand the code — just recognize the pattern and use the right words when talking to your AI tool:
useState
Tell AI: "The [thing] state isn't updating correctly"
e.g. 'The cart count state isn't updating when I add items'
map()
Tell AI: "Change how each [item] is displayed in the list"
e.g. 'Change how each product is displayed in the product list'
className
Tell AI: "Change the styling of this [element]"
e.g. 'Make this button bigger and change it to blue'
onClick
Tell AI: "Change what happens when you click this [button]"
e.g. 'When I click Submit, it should also clear the form'
fetch()
Tell AI: "The data isn't loading from the API"
e.g. 'The user list isn't loading — it just shows a blank page'
if/else or &&
Tell AI: "Change when this [element] shows or hides"
e.g. 'Only show the Delete button if the user is an admin'
Focus on the return() section — that's what shows on screen. Ignore imports and complex logic.
Want to change a word that appears on your site? Search for it in your code. That's the file to tell AI about.
Paste any code and say 'explain what this does in simple terms.' AI is an excellent code translator.
Strings in quotes are usually text that shows on screen. Find the text you want to change, and you've found the right file.
No. You can build entire apps without writing code manually. But learning to recognize common patterns helps you describe changes more accurately to your AI tool. Think of it like learning to read a menu in another language — you don't need to be a chef, but knowing what 'pollo' means helps you order chicken.
Copy the confusing part and paste it into your AI tool with the prompt: 'Explain what this code does in simple terms.' AI is an excellent code translator. You don't need to figure it out yourself — just ask.
Focus on the return() section of React components — that's what actually shows up on screen. Look for text in quotes (that's visible text on your site), className (that's styling), and onClick or onChange (that's interactive behavior). You can safely ignore imports and complex logic at the top of files.
Explain this code
"Explain what this code does in simple, non-technical terms. What does it show on screen? What happens when users interact with it? [paste your code here]"
Find and change text
"I want to change the heading that says '[old text]' to '[new text]'. Which file is it in and what do I need to change?"
Understand the project structure
"Give me a simple overview of my project structure. What does each folder and important file do? Explain it like I've never coded before."