LearnProgramming Course 3: Frameworks

This lecture follows /course/frameworks.

Every case can be compared in four styles:

Style Main idea
Vanilla Manually update the DOM
React State and JSX
Vue Reactive refs and templates
Svelte Reactive state in components

ch18 — DOM and Events

The DOM is the browser’s object representation of the page. An event listener runs code when the user does something.

const message = document.getElementById("message")

document.getElementById("button").addEventListener("click", () => {
  message.textContent = "The button was clicked!"
})

The LearnProgramming website compares this same interaction in Vanilla JavaScript, React, Vue, and Svelte.

ch19 — Counter: Vanilla JavaScript

<h2 id="display">Count: 0</h2>
<button id="btn">Click me</button>

<script>
  let count = 0
  const display = document.getElementById('display')

  document.getElementById('btn').addEventListener('click', () => {
    count++
    display.textContent = 'Count: ' + count
  })
</script>

Vanilla JavaScript requires us to change the page explicitly.

Counter: Same Case, Different Frameworks

Framework State Event
React useState(0) onClick
Vue ref(0) @click
Svelte $state(0) onclick

All four versions solve the same problem: display state and update it after a click.

ch20 — List Rendering

const items = ['Apple', 'Banana', 'Cherry', 'Durian']
Style Render a list
Vanilla forEach + createElement
React .map() returning JSX
Vue v-for
Svelte {#each}

The data stays the same. Only the rendering syntax changes.

List Rendering: Vanilla Example

<ul id="list"></ul>

<script>
  const items = ['Apple', 'Banana', 'Cherry']
  const list = document.getElementById('list')

  items.forEach(item => {
    const li = document.createElement('li')
    li.textContent = item
    list.appendChild(li)
  })
</script>

This connects the earlier map and array lessons to a visible interface.

ch21 — Reactivity

Reactivity keeps the interface synchronized with data.

state changes → displayed values update

The LearnProgramming example contains:

Reactivity: What Changes?

Vanilla Frameworks
Change the variable Change the state
Manually update every DOM node UI updates from state
Compute derived values yourself Declare derived/computed values

Frameworks reduce repeated manual DOM work; they do not remove the need to understand data and events.

ch22 — Conditional Rendering

Show different content when state changes.

if (loggedIn) {
  status.textContent = 'Welcome back!'
} else {
  status.textContent = 'Please log in.'
}

The website compares this case with React conditionals, Vue v-if, and Svelte {#if}.

Framework Case Summary

Counter → list rendering → reactivity → conditional UI