Codynn React From Zero Methodology

Last updated: 4 August 2026

Build a working React application from scratch by understanding exactly why React exists, how components, props, state, and JSX fit together, and how to wire them into a real project using Vite.

// TL;DR

The Codynn React From Zero Methodology teaches you React by first showing the problem it solves — the manual-update problem in plain JavaScript — then rebuilding the same feature the React way. You learn how components (functions that return JSX), props, useState, and the render pipeline fit together, and how to scaffold a real project with Vite. Use it when you're learning React from scratch, deciding between React and plain JavaScript, scaffolding a new Vite app, or trying to understand why your components, props, or state aren't working the way you expect.

Framework

// When should you use the Codynn React From Zero methodology?

Use this skill whenever a user wants to learn React from zero, evaluate whether to use React vs plain JavaScript for a project, scaffold a new React app with Vite, or understand how components, props, state, and JSX interact in a real codebase.

// What do you need before you start learning React this way?

User's goal or project idearequired
What the user wants to build — e.g. a flashcard app, a counter, a dashboard
Prior experience levelrequired
How much HTML, JavaScript, and React the user already knows
Environment preference
VS Code, WebStorm, or other IDE the user is working in

// What are the core principles behind learning React from zero?

The Manual-Update Problem

Plain JavaScript forces you to manually reach into the DOM and update every element that displays a changing value. Every new element means more manual updates. React exists to eliminate this repetition — you declare what should be on screen and React handles the updating automatically.

Component = Function That Returns a Piece of the Screen

A component is always a JavaScript function. That function returns JSX — HTML-looking code — that describes what should appear on screen. The component's name must always start with a capital letter. Every visual unit in a React app is a component.

JSX = HTML-Looking Code Inside JavaScript

JSX is not HTML. It is HTML-looking syntax written inside JavaScript. Vite (the workshop) compiles JSX into real HTML that the browser understands. The advantage is you can inject live JavaScript directly into your markup using curly braces.

useState = How React Remembers Things

useState is the mechanism React uses to track values that will change. You get two things: the current value (e.g. count) and the only way to change it (e.g. setCount). You must use setCount to change count — direct mutation does not trigger a re-render.

Props = Arguments for Components

Props are like HTML attributes you pass when you place a component. They are similar to function arguments — the component receives them as a props object and uses props.propertyName to access them. Props let you reuse one component template with different data each time.

Root = Where Everything Goes

The entire React app renders into one div with id='root' in index.html. main.jsx selects that div, creates a React root, and calls root.render() to place components inside it. This single entry point replaces manually placing every element on the page.

Vite = The Workshop

Vite takes all your files, all your JSX, and all your packages and bundles them into something the browser can display. You do not need to understand its internals — you just need three commands to start it. In dev mode it live-reloads whenever you save a file.

Component Hierarchy

Components live inside other components. App is the top-level component that contains Header, Flashcard, and everything else. Main renders App. App manages its children. This nesting keeps main.jsx clean and lets App orchestrate the full page.

// How do you learn React from scratch step by step?

1
Demonstrate the Manual-Update Problem with plain JavaScript first
Build the target feature (e.g. a counter) in a plain .html file using document.getElementById, addEventListener, and textContent updates. Then add a second element that also needs to display the same value. Show that every new element requires another manual update in every event listener. This is the problem React solves — never skip this step.
2
Show the React equivalent side-by-side using CDN (no install)
Create a second .html file. Load React, ReactDOM, and Babel via CDN script tags. Add a div with id='root'. Write a script of type 'text/babel'. Pull useState out of React with: const { useState } = React. Create a component (capital letter function name), use useState inside it, return JSX with values and onClick handlers inline. Call ReactDOM.createRoot(document.getElementById('root')).render(<ComponentName />). Compare line counts and point out that adding a new display element in React requires zero changes to event listeners — just place the variable in curly braces.
3
Scaffold a real project with Vite
Install Node.js (LTS version). In terminal: npm create vite@latest, project name = your app name, select React framework, select JavaScript. Then cd into project folder, npm install, npm run dev. Open the localhost URL. Vite is now the workshop — it handles all JSX compilation and live-reloading.
4
Orient the user to the project file structure
Cover only what matters: node_modules (never touch — all library code lives here), public (static assets like images), src (where 99.9% of work happens), src/main.jsx (the entry point — creates root, calls render), src/App.jsx (the top-level component), index.html (contains the div id='root'). Ignore .gitignore, package-lock.json, vite.config.js for now. Always use package.json scripts to know how to run the app.
5
Clear App.jsx and write the first custom component from scratch
Delete all default content in App.jsx. Write: function App() { return (<div><h1>Your App Name</h1><p>Your tagline</p></div>); } export default App. Explain that export default is required — without it main.jsx cannot import it. Reload the page to confirm it renders. Then demonstrate: if you remove export default App, the page breaks.
6
Apply the four JSX rules to every component written
Rule 1 — A component must return a single wrapping element. If you have multiple siblings, wrap them in a div or use an empty JSX fragment (<> </>). Rule 2 — Use className not class (class is a reserved JavaScript keyword; Vite converts className to class at compile time). Rule 3 — Close every tag, including self-closing tags like <img />. Rule 4 — JavaScript goes in curly braces inside JSX: {variableName}, {2 * 4}, {name.toUpperCase()}. Enforce these rules on every component the user writes.
7
Create a new component in its own .jsx file and nest it inside App
Create src/Header.jsx. Write the function, return JSX, add export default Header. In App.jsx import Header from './Header.jsx'. Place <Header /> inside App's return JSX. Show the component hierarchy in browser DevTools: div#root > div (App) > header (Header). Emphasise: components nest inside other components; main.jsx stays clean and only ever renders App.
8
Build a data-driven component and pass props to it
Create a component (e.g. Flashcard.jsx) with hardcoded variables for its data (question, answer, category). Return JSX using those variables in curly braces. Export it. Import and use it three times inside App — notice all three show identical data. Then convert to props: in App, pass attributes on the component tag (<Flashcard question='What planet is red?' answer='Mars' category='Science' />). In the Flashcard function signature add props as the argument. Replace hardcoded variables with props.question, props.answer, props.category. Each card now shows different content from the same template.
9
Add interactivity with useState
Import useState at the top of the component file: import { useState } from 'react'. Declare state: const [count, setCount] = useState(0). count is the current value, setCount is the ONLY way to change it — never mutate count directly. Use count in JSX via curly braces. Add onClick handlers on buttons: onClick={() => setCount(count + 1)} and onClick={() => setCount(0)}. Show that every element displaying count updates automatically — no manual DOM manipulation needed.
10
Apply CSS using className and verify the full render pipeline
Add CSS in index.css or a component-level .css file. Assign className (not class) on JSX elements to match CSS selectors. Import the CSS file where needed. Confirm in DevTools that className in JSX compiles to class in the rendered HTML. Remind the user: the full pipeline is component (JSX) → export → import in App → App exported → imported in main.jsx → root.render() → index.html div#root → browser.

// What are real examples of applying the React from zero methodology?

A user wants to build a quiz app where multiple questions display on screen and a score increments as correct answers are clicked.

First show the manual JavaScript version: each score display element requires its own getElementById reference and manual textContent update inside every click handler. Then rebuild in React: create a QuizCard component with props for question and options. Use useState for score. Place onClick on each answer button calling setScore(score + 1). Render five QuizCard components with different props — all five update automatically when score changes because they reference the state variable directly via curly braces.

A user wants to understand why their component isn't showing on the page despite writing correct JSX.

Walk the render pipeline checklist: (1) Does the component function have export default ComponentName at the bottom? (2) Is it imported in App.jsx with the correct path? (3) Is it placed as a JSX tag inside App's return? (4) Does App.jsx have export default App? (5) Does main.jsx import App and call root.render(<App />)? (6) Does index.html have a div with id='root'? Any missing step in this chain silently prevents rendering.

A user wants to reuse a card component 50 times with different content.

Create one Card component that accepts props (title, description, imageUrl). In App.jsx map over a data array and render <Card key={item.id} title={item.title} description={item.description} /> for each item. The component is written once; props supply the variation. Adding a new card requires only adding an object to the data array — zero changes to the component itself.

// What mistakes should you avoid when learning React?

Forgetting export default ComponentName — the component renders nothing and no error clearly says why.
Using class instead of className in JSX — JSX is inside JavaScript where class is a reserved keyword; always use className.
Mutating state directly (e.g. count = count + 1) instead of using the setter function (setCount(count + 1)) — direct mutation does not trigger a re-render.
Returning multiple sibling elements without a single wrapping element or JSX fragment — causes 'adjacent JSX elements must be wrapped' error.
Forgetting to close self-closing tags like <img /> or <input /> — JSX requires every tag to be explicitly closed.
Placing raw JavaScript expressions outside curly braces in JSX — JavaScript only executes inside {} in JSX; outside it is treated as literal text.
Manually editing or placing components directly inside index.html div#root instead of routing through main.jsx — defeats the entire purpose of React's component model.
Starting a component name with a lowercase letter — React treats lowercase tags as native HTML elements, not components.
Placing logic that updates multiple DOM elements manually when state changes — if you find yourself writing multiple textContent updates, that is the signal to use useState instead.
Using CDN setup for a real application — CDN is only for quick demos; real applications require the Vite + Node.js setup.

// What key React terms should you know?

Component: A JavaScript function that returns a piece of the screen (JSX). Its name always starts with a capital letter. Components can be nested inside other components and reused anywhere in the app.
JSX: HTML-looking code written inside JavaScript. It is not real HTML — Vite compiles it into real HTML for the browser. The key advantage: you can inject live JavaScript anywhere inside it using curly braces.
useState: How React remembers things. Returns an array of two items: the current value and the setter function. The setter function is the ONLY way to change the value and trigger a re-render.
setCount (setter function): The only way to change a useState value. Calling it updates the value and automatically re-renders every part of the screen that uses that value.
Props: Arguments passed to a component, similar to HTML attributes. Written on the component tag in JSX (e.g. question='...'). Received inside the component as the props argument and accessed via props.propertyName.
Root: The single div with id='root' in index.html. It is the container where the entire React app gets rendered. Everything in the app ultimately lives inside this one element.
Vite: The workshop. A build tool that takes all your JSX files and packages, compiles them, and serves them to the browser. In dev mode it live-reloads on every file save. Started with three terminal commands.
CDN (Content Delivery Network): A web address that loads pre-built code (like React) into a page without installing anything. Used only for quick demos — not for real applications.
Babel: A translator used in the CDN demo setup that converts JSX into JavaScript the browser understands. In a Vite project, Vite handles this automatically.
npm (Node Package Manager): Downloads code that other developers have written so you do not have to rebuild everything yourself. Comes bundled with Node.js.
JSX Fragment: An empty wrapper tag (<> </>) used when you need to return multiple sibling elements from a component but do not want to add an extra div to the DOM.
className: The JSX equivalent of the HTML class attribute. Must be used instead of class inside JSX because class is a reserved keyword in JavaScript. Vite compiles it back to class in the final HTML.
export default: The line at the bottom of a component file that makes the component available for import in other files. Without it, any import of that component will fail silently.
main.jsx: The entry point of a React application. It selects the div#root element, creates a React root, and calls root.render() to place the top-level App component onto the page.
The Manual-Update Problem: The core limitation of plain JavaScript for UIs: every element that displays a changing value must be manually selected and updated in every event listener. Adding more display locations multiplies the manual work. React was built to solve this.

// FREQUENTLY ASKED QUESTIONS

What is the Codynn React From Zero methodology?

It's a beginner-focused way to learn React that starts by demonstrating the problem React solves — manually updating the DOM in plain JavaScript — then rebuilds the same feature using components, props, and useState. You learn how JSX, the render pipeline, and Vite fit together, so React's design finally makes sense instead of feeling like arbitrary rules.

What is JSX and how is it different from HTML?

JSX is HTML-looking code written inside JavaScript — it is not real HTML. Vite compiles it into HTML the browser understands. Its main advantage is you can inject live JavaScript anywhere using curly braces, like {count} or {name.toUpperCase()}. Key differences: use className instead of class, close every tag, and return a single wrapping element.

How do I create my first React component?

Write a JavaScript function whose name starts with a capital letter and returns JSX, then add `export default ComponentName` at the bottom. Import it in App.jsx and place it as a tag like `<Header />` inside App's return. The capital letter matters — lowercase names are treated as native HTML elements, not components.

How do I use useState in React?

Import it with `import { useState } from 'react'`, then declare state like `const [count, setCount] = useState(0)`. `count` is the current value and `setCount` is the only way to change it. Use count in JSX with curly braces, and update it via setCount(count + 1). Never mutate count directly — that won't trigger a re-render.

How does React compare to plain JavaScript for building UIs?

In plain JavaScript you must select every element displaying a changing value and update it manually inside each event listener — adding more display spots multiplies the work. React eliminates this: you declare a state value once, reference it in curly braces wherever needed, and every spot updates automatically when you call the setter. React trades a small setup cost for massive reduction in repetitive DOM code.

When should I use React instead of plain JavaScript?

Use React when your UI has values that change and appear in multiple places, or when you want reusable components. The signal is: if you're writing multiple manual textContent updates when one value changes, that's when useState and components pay off. For a single static page with no interactivity, plain JavaScript is fine and simpler.

What is Vite and why do I need it?

Vite is the build tool — the 'workshop' — that takes your JSX files and packages, compiles them, and serves them to the browser. It also live-reloads on every file save in dev mode. You don't need to understand its internals; you scaffold a project with `npm create vite@latest` and run it with `npm install` then `npm run dev`.

What are props in React?

Props are arguments you pass to a component, similar to HTML attributes. You write them on the component tag like `<Flashcard question='...' answer='...' />`, and the component receives them as a props object accessed via props.propertyName. Props let you reuse one component template with different data each time, so you write the card once and supply variation from outside.

Why isn't my React component showing up on the page?

Most often you forgot `export default ComponentName` at the bottom of the file — this fails silently with no clear error. Walk the render pipeline: the component needs export default, must be imported in App.jsx with the correct path, placed as a JSX tag inside App's return, App itself needs export default, and main.jsx must render App into the div#root in index.html.

What results can I expect after learning React this way?

You'll be able to scaffold a real Vite project, build reusable components with props, add interactivity with useState, and debug rendering issues by tracing the pipeline. More importantly, you'll understand why React exists, so its rules feel logical rather than memorized. You'll be able to reuse a component 50 times by mapping over a data array instead of copying markup.

Should I use the CDN setup or Vite for a React project?

Use the CDN setup (React, ReactDOM, and Babel via script tags) only for quick demos to compare against plain JavaScript. For any real application, use Vite with Node.js — it handles JSX compilation, bundling, and live-reloading properly. The CDN approach loads Babel in the browser and isn't built for production apps.

// GET THIS SKILL — FREE