Frequently Asked Questions About Codynn React From Zero Methodology
23 answers covering everything from basics to advanced usage.
// Basics
What is a component in React?
A component is a JavaScript function that returns a piece of the screen written as JSX. Its name always starts with a capital letter. Every visual unit in a React app is a component, and components can be nested inside other components and reused anywhere.
What is the manual-update problem that React solves?
It's the core limitation of plain JavaScript for UIs: every element that displays a changing value must be manually selected with getElementById and updated inside every event listener. Adding more display locations multiplies the manual work. React was built to eliminate this — you declare state once and every display spot updates automatically.
What does the div with id='root' do?
The div#root in index.html is the single container where the entire React app renders. main.jsx selects it, creates a React root, and calls root.render() to place the top-level App component inside it. This single entry point replaces manually placing every element on the page.
What is export default and why does it matter?
`export default ComponentName` is the line at the bottom of a component file that makes it available for import elsewhere. Without it, any import of that component fails silently — the component renders nothing and no clear error explains why. It's the single most common reason a beginner's component doesn't appear.
// How To
How do I scaffold a new React project with Vite?
Install Node.js LTS, then in your terminal run `npm create vite@latest`, enter your project name, select React, and select JavaScript. Then `cd` into the folder, run `npm install` to download dependencies, and `npm run dev` to start the dev server. Open the localhost URL it prints — Vite now handles all JSX compilation and live-reloading.
How do I pass different data to the same component?
Use props. Add attributes on the component tag like `<Flashcard question='What planet is red?' answer='Mars' />`, add `props` as the function's argument, and replace hardcoded values with props.question and props.answer. Now the same template renders different content each time you place it.
How do I add a button that changes a value on the screen?
Declare state with `const [count, setCount] = useState(0)`, display count in JSX with curly braces, and add an onClick handler like `onClick={() => setCount(count + 1)}` on the button. React re-renders every element showing count automatically — no manual DOM updates needed.
How do I render a component many times from a data array?
Map over your data array in App.jsx and return a component for each item: `data.map(item => <Card key={item.id} title={item.title} description={item.description} />)`. The component is written once; props supply the variation. Adding a new card means adding one object to the array — zero changes to the component itself. Always include a unique key.
How do I apply CSS to a React component?
Add CSS in index.css or a component-level .css file, then assign `className` (not class) on your JSX elements to match your CSS selectors, and import the CSS file where needed. In DevTools you'll see className compiles to class in the rendered HTML.
// Troubleshooting
Why does my page break when I remove export default App?
Because main.jsx imports App and calls root.render(<App />). Without `export default App`, that import fails and nothing renders. The full pipeline is: component → export default → imported in App → App exported → imported in main.jsx → root.render() → div#root in index.html → browser. Break any link and rendering silently stops.
Why am I getting 'adjacent JSX elements must be wrapped' error?
You returned multiple sibling elements without a single wrapping element. A component must return one wrapping element — wrap your siblings in a div, or use an empty JSX fragment `<> </>` if you don't want an extra div in the DOM. This is Rule 1 of JSX.
Why isn't my count updating when I set it directly?
Because directly mutating a useState value like `count = count + 1` does not trigger a re-render. React only re-renders when you call the setter function, so use `setCount(count + 1)`. The setter is the only sanctioned way to change state and refresh the screen.
Why is my class attribute not working in JSX?
Because `class` is a reserved keyword in JavaScript, and JSX lives inside JavaScript. Use `className` instead — Vite compiles className back to class in the final HTML. If your styles aren't applying, this is a common cause.
Why is React treating my component as a plain HTML tag?
Your component name probably starts with a lowercase letter. React treats lowercase tags as native HTML elements and capitalized tags as components. Rename your function and its usage to start with a capital letter, like `Header` and `<Header />`.
// Comparisons
How does learning React by seeing the problem first compare to jumping straight into syntax?
Starting with the manual-update problem gives you a reason for every React concept, so useState and components feel like solutions rather than arbitrary rules. Jumping straight into syntax teaches you what to type but not why, which makes debugging and design decisions harder later. The Codynn approach builds intuition first, then syntax.
How does useState compare to just using a normal variable?
A normal variable changes value but doesn't tell React to update the screen. useState wraps a value so that calling its setter both updates the value and re-renders every part of the UI using it. If you need the screen to reflect a change, you need state, not a plain variable.
How does the CDN setup compare to the Vite setup?
The CDN setup loads React, ReactDOM, and Babel via script tags with no install — great for a quick side-by-side demo against plain JavaScript. Vite is a full build tool that compiles JSX, bundles packages, and live-reloads. CDN is only for demos; real applications need Vite plus Node.js.
How do props compare to function arguments?
Props are essentially function arguments for components. You pass them on the component tag like attributes, and the component receives them bundled into a single props object accessed via props.propertyName. The mental model is identical to passing arguments to a function — the component is a function, and props are its inputs.
// Advanced
What is the component hierarchy and why does it matter?
Components live inside other components. App is the top-level component that contains Header, Flashcard, and everything else; main.jsx only ever renders App. This nesting keeps main.jsx clean and lets App orchestrate the full page. Understanding the hierarchy is key to tracing why something renders where it does.
What files in a Vite project should I actually touch?
You do 99.9% of work in src — mainly src/main.jsx (the entry point) and src/App.jsx (the top-level component). Never touch node_modules (all library code). Use public for static assets like images, and index.html contains the div#root. Ignore .gitignore, package-lock.json, and vite.config.js while learning.
What is a JSX fragment and when should I use one?
A JSX fragment is an empty wrapper `<> </>` used when a component needs to return multiple sibling elements but you don't want to add an extra div to the DOM. It satisfies the single-wrapping-element rule without cluttering your HTML structure with unnecessary containers.
When should I break a piece of UI into its own component?
Break out a component when a visual unit is reusable, or when App.jsx is getting cluttered. Move it to its own .jsx file, add export default, import it into App, and place it as a tag. This keeps App as an orchestrator and lets you reuse the piece with different props elsewhere.
What does Babel do in the CDN demo?
Babel is a translator that converts JSX into JavaScript the browser understands. In the CDN setup you load it via a script tag and mark your script type as 'text/babel'. In a real Vite project you never touch Babel — Vite handles JSX compilation automatically.