JavaScript for React

Essential Foundations for Modern Web Development (AI-Assisted Learning)

javascript
react preparation
async programming
AI-Assisted Development
Lecture
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2025-10-15

Résumé

Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.

🎯 Today’s Mission

Our Goal: Get You Ready for React

Not: Make you JavaScript experts
But: Give you just enough to start building with AI assistance

Philosophy: Learn what you need NOW. Deep dives come later when you’re actually using them.

Translation: We’re teaching you to drive, not to build a car! 🚗

📋 Your Journey

Part 1: JavaScript Essentials

  • Variables & functions
  • Objects & arrays
  • Template literals
  • Just enough to generate code

Part 2: Async Basics

  • Why async matters
  • async/await pattern
  • Fetch API basics
  • Just enough for React data

Part 3: React Motivation

  • Why vanilla JS gets painful
  • React preview
  • Next session preparation

Optional Reading:

  • Advanced DOM manipulation
  • localStorage patterns
  • Complex async patterns
  • See (webdev_02_L_02C_JavaScriptAdvanced)[webdev_02_L_02C_JavaScriptAdvanced.html]

🤖 Session 2 = Still AI-First!

Remember from Session 1: The AI-First Approach

You are the senior developer 🎯
AI is your junior assistant 🤖

  • AI generates code
  • You verify it’s correct
  • You understand the patterns
  • You fix AI’s mistakes

Today: Every code example generated with AI. You’ll learn to verify, not memorize!

Evolution of Web Architecture

Understanding where we came from helps us appreciate modern full-stack development.

Three Key Eras:

  1. Static Web (1990s)
    HTML + CSS served directly

  2. Dynamic Web (2000s)
    Server-side languages + databases + basic JS

  3. Full-Stack JS (2010s+)
    JavaScript everywhere + APIs

Why This Matters:

  • Each era solved real problems
  • Modern stack inherits lessons from all three
  • Understanding the evolution helps you make better architectural decisions

Era 1: Static Website

graph LR
    Client["<b>🖥️ Browser</b><br/>(Client)<br/><br/>Displays<br/>HTML + CSS"]
    Server["<b>📦 Web Server</b><br/>Apache / Nginx<br/><br/>Serves files"]
    Files["<b>📄 Static Files</b><br/><br/>• index.html<br/>• style.css<br/>• logo.png"]
    
    Client ==>|"<b>① Request</b><br/>GET /index.html"| Server
    Server ==>|"② Read"| Files
    Files ==>|"③ Content"| Server
    Server ==>|"<b>④ Response</b><br/>200 OK"| Client
    
    style Client fill:#4A90E2,stroke:#2E5C8A,stroke-width:3px,color:#fff
    style Server fill:#F5A623,stroke:#C17D11,stroke-width:3px,color:#fff
    style Files fill:#7ED321,stroke:#5FA119,stroke-width:3px,color:#fff

Characteristics:

✅ Advantages:

  • Simple & fast
  • Easy to cache
  • Low server load
  • Secure (no code execution)

❌ Limitations:

  • No user-specific content
  • No interactivity
  • Manual updates

Use Cases:

  • Documentation sites, Landing pages, Portfolios

Era 2: Dynamic Web

graph TB
    subgraph ClientSide["<b>🖥️ CLIENT SIDE</b>"]
        Browser["<b>Browser</b><br/><br/>Renders HTML + CSS<br/>Runs JavaScript"]
        HTML["HTML<br/>(page structure)"]
        CSS["CSS<br/>(styling)"]
        JS["<b>JavaScript</b><br/>(validation,<br/>animations)"]
        Browser --> HTML
        Browser --> CSS
        Browser --> JS
    end
    
    subgraph ServerSide["<b>🖥️ SERVER SIDE</b>"]
        WebServer["<b>Web Server</b><br/>Apache + mod_php"]
        PHP["<b>PHP Engine</b><br/><br/>• Read sessions<br/>• Query database<br/>• Generate HTML"]
        Templates["Templates<br/>(PHP files)"]
        PHP --> Templates
    end
    
    subgraph DataLayer["<b>💾 DATA LAYER</b>"]
        DB[("<b>MySQL</b><br/>Database<br/><br/>Users, Products,<br/>Orders")]
    end
    
    Browser ==>|"<b>① Request Page</b><br/>GET /products.php?id=123"| WebServer
    WebServer ==>|"② Execute PHP"| PHP
    PHP ==>|"<b>③ SQL Query</b><br/>SELECT * FROM products"| DB
    DB ==>|"④ Return rows"| PHP
    PHP ==>|"⑤ Generate HTML"| WebServer
    WebServer ==>|"<b>⑥ Send Response</b><br/>Full HTML page"| Browser
    JS -.->|"⑦ Enhance UX"| Browser
    
    style ClientSide fill:#E8F4F8,stroke:#4A90E2,stroke-width:4px
    style ServerSide fill:#FFF4E6,stroke:#F5A623,stroke-width:4px
    style DataLayer fill:#FFE6E6,stroke:#E85D75,stroke-width:4px
    style Browser fill:#4A90E2,stroke:#2E5C8A,stroke-width:2px,color:#fff
    style WebServer fill:#F5A623,stroke:#C17D11,stroke-width:2px,color:#fff
    style PHP fill:#F5A623,stroke:#C17D11,stroke-width:2px,color:#fff
    style DB fill:#E85D75,stroke:#B93A52,stroke-width:2px,color:#fff

Era 2: Characteristics

✅ Advantages:

  • User-specific content
  • Database-driven
  • User authentication
  • Dynamic updates
  • Rich applications

⚠️ Limitations:

  • Full page reloads
  • Limited interactivity
  • Server-side rendering only
  • Tight coupling

JavaScript’s Role:

  • Form validation (client-side)
  • Simple animations
  • AJAX for partial updates (jQuery era)
  • Not for core logic

Popular Stack:

  • LAMP: Linux + Apache + MySQL + PHP
  • WAMP: Windows + Apache + MySQL + PHP
  • Also: ASP.NET, Ruby on Rails, Django

Era: ~2000-2015 (still widely used!)

Era 3: Full-Stack JavaScript

flowchart LR
    subgraph Frontend["<b>🌐 FRONTEND</b><br/>(Browser)"]
        direction TB
        React["<b>⚛️ React</b><br/>Components<br/>Virtual DOM"]
        State["<b>State</b><br/>useState<br/>useEffect"]
        Fetch["<b>Fetch API</b><br/>async/await"]
        
        React --> State --> Fetch
    end
    
    subgraph Backend["<b>🖥️ BACKEND</b><br/>(Server)"]
        direction TB
        Express["<b>Express</b><br/>REST API<br/>Routes"]
        Auth["<b>Auth</b><br/>JWT/Sessions"]
        Logic["<b>Logic</b><br/>Business Rules"]
        
        Express --> Auth --> Logic
    end
    
    subgraph Data["<b>💾 DATA</b>"]
        direction TB
        DB[("<b>Database</b><br/>PostgreSQL")]
        Cache[("<b>Cache</b><br/>Redis")]
        
        Logic -.-> Cache
        Cache -.-> DB
    end
    
    React -->|"① User Action"| State
    Fetch -->|"② HTTP Request"| Express
    Logic -->|"③ Query"| DB
    DB -->|"④ Results"| Logic
    Express -->|"⑤ JSON Response"| Fetch
    State -->|"⑥ Re-render"| React
    
    style Frontend fill:#E1F5FF,stroke:#4A90E2,stroke-width:4px
    style Backend fill:#FFF4E1,stroke:#F5A623,stroke-width:4px
    style Data fill:#FFE1E1,stroke:#E85D75,stroke-width:4px
    
    style React fill:#61DAFB,stroke:#2E5C8A,stroke-width:2px,color:#000
    style State fill:#61DAFB,stroke:#2E5C8A,stroke-width:2px,color:#000
    style Fetch fill:#61DAFB,stroke:#2E5C8A,stroke-width:2px,color:#000
    style Express fill:#F5A623,stroke:#C17D11,stroke-width:2px,color:#fff
    style Auth fill:#F5A623,stroke:#C17D11,stroke-width:2px,color:#fff
    style Logic fill:#F5A623,stroke:#C17D11,stroke-width:2px,color:#fff
    style DB fill:#E85D75,stroke:#B93A52,stroke-width:2px,color:#fff
    style Cache fill:#E85D75,stroke:#B93A52,stroke-width:2px,color:#fff

Why Full-Stack JavaScript?

✅ Advantages:

  • Single Language: JavaScript everywhere
  • JSON Native: Seamless data exchange
  • Rich Interactivity: No page reloads (SPA)
  • Real-time: WebSockets, Server-Sent Events
  • Modern Tooling: npm, Vite, excellent AI support
  • Component Thinking: Reusable patterns
  • Large Ecosystem: Millions of npm packages

⚠️ Trade-offs:

  • Initial Load: Larger bundle sizes
  • SEO: Requires SSR/SSG (Next.js)
  • Type Safety: Add TypeScript for scale
  • Complexity: More moving parts

Our Learning Stack: - Frontend: React + Vite - Backend: Node.js + Express
- Database: PostgreSQL - Practice 3-6: We’ll build this!

Part 1: JavaScript Essentials

Learning Objectives (Part 1)

By the end of this section, you’ll be able to:

  • ✅ Use const and let correctly (never var)
  • ✅ Write arrow functions (modern syntax)
  • ✅ Work with objects and arrays
  • ✅ Use template literals for strings
  • ✅ Generate all of this with AI and verify it works

Remember: You don’t need to memorize syntax. You need to recognize correct patterns!

💡 For PHP Developers: Quick Context

Concept PHP JavaScript
Variables $name = "Alice"; const name = "Alice";
Arrays [1, 2, 3] [1, 2, 3] (same!)
Functions function greet($n) {...} function greet(n) {...}
Control if, for, while Same syntax!

Key differences to watch:

  • ❌ No $ prefix
  • ❌ No -> operator (use .)
  • 🆕 Async programming (new paradigm)

Good news: 70% of your backend knowledge transfers! Focus on the 30% that’s different.

Variables: const vs let

✅ Modern JavaScript

// Use const for values that don't change
const name = "Alice";
const age = 25;
const user = {name: "Bob"};

// Use let only when reassigning
let counter = 0;
counter = counter + 1; // OK

// Never use var (outdated!)

Rule: Default to const, use let only when needed

❌ Common Mistakes

// ❌ Using var (old, confusing)
var name = "Alice";

// ❌ Using let when const works
let PI = 3.14; // Never changes!

// ❌ Trying to reassign const
const count = 0;
count = 1; // ERROR!

AI often generates var - this is your first verification!

🤖 AI Demo: Variables

Let’s Generate Some Code!

Prompt to AI:

Create a JavaScript object representing a product with 
name, price, and inStock properties. Use const.

Expected AI Output:

const product = {
  name: "Laptop",
  price: 999,
  inStock: true
};

Your Verification:

  • ✅ Uses const? (Good!)
  • ✅ Object syntax correct? (Looks good!)
  • ✅ Makes sense? (Yes!)

Everyone try this now in your console! (F12 → Console)

Functions: Traditional vs Arrow

Traditional Function

function greet(name) {
  return "Hello " + name;
}

function calculateTotal(price, tax) {
  return price + (price * tax);
}

// Good for: Main functions, methods

Arrow Function (Modern)

const greet = (name) => {
  return `Hello ${name}`;
};

// Or shorter (implicit return):
const greet = name => `Hello ${name}`;

const calculateTotal = (price, tax) => 
  price + (price * tax);

// Good for: Callbacks, map/filter

When to use which? Arrow functions for short operations, traditional for complex logic.

Template Literals: Better Strings

❌ Old Way (Don’t Use)

const name = "Alice";
const age = 25;

// String concatenation (ugly!)
const message = "Hello " + name + 
  ", you are " + age + " years old";

console.log(message);

Problems:

  • Hard to read
  • Easy to forget spaces
  • Can’t span lines easily

✅ Modern Way (Use This!)

const name = "Alice";
const age = 25;

// Template literals (beautiful!)
const message = `Hello ${name}, 
  you are ${age} years old`;

console.log(message);

Benefits:

  • Easy to read
  • Expressions inside ${}
  • Multi-line strings
  • React JSX uses similar syntax!

Objects & Arrays: The Basics

// Object: Key-value pairs (like PHP associative arrays)
const user = {
  name: "Alice",
  age: 25,
  email: "alice@example.com"
};

// Access with dot notation
console.log(user.name); // "Alice"
console.log(user.age);  // 25

// Arrays: Ordered lists
const products = [
  {name: "Laptop", price: 999},
  {name: "Mouse", price: 25},
  {name: "Keyboard", price: 75}
];

// Access by index
console.log(products[0].name); // "Laptop"
console.log(products.length);  // 3

For PHP developers: Objects = associative arrays, but use . not [ ]

Array Methods: map & filter

map: Transform Each Item

const prices = [10, 20, 30];

// Add tax to each price
const withTax = prices.map(price => 
  price * 1.2
);

console.log(withTax);
// [12, 24, 36]

Use when: You need to transform every item

filter: Select Items

const products = [
  {name: "Laptop", price: 999},
  {name: "Mouse", price: 25},
  {name: "Keyboard", price: 75}
];

// Only expensive items
const expensive = products.filter(
  p => p.price > 50
);

console.log(expensive);
// [{name: "Laptop", ...}, 
//  {name: "Keyboard", ...}]

Use when: You need to select some items

React uses these CONSTANTLY! Get comfortable with the pattern.

🎯 Practice: JavaScript Essentials

Challenge: Generate & Verify

Use AI to create:

  1. An array of 3 products (name, price, category)
  2. A function that filters products by minimum price
  3. A function that adds 20% tax to all prices

Your CRISP Prompt:

Create a JavaScript array of 3 products with name, price, 
and category. Then create two functions:
1. filterByPrice(products, minPrice) - returns products >= minPrice
2. addTax(products, taxRate) - returns products with tax added to price

Use modern JavaScript (const, arrow functions, map/filter).

Verify:

  • ✅ Uses const/let (no var)
  • ✅ Arrow functions for callbacks
  • ✅ map/filter used correctly

Key Takeaways: JavaScript Essentials

  1. const by default, let when needed - Never var!
  2. Arrow functions for callbacks - Traditional for main functions
  3. Template literals for strings - Use backticks `${}`
  4. Objects with dot notation - Like PHP but . not ->
  5. map transforms, filter selects - React will use these constantly
  6. AI generates, you verify - Check for modern syntax!

Are you ready for async? Let’s learn to fetch data! 🚀

Part 2: Async Basics

Why Async? The Restaurant Analogy 🍽️

❌ Synchronous (PHP-style)

1. Take order from table 1
   → WAIT for kitchen →
2. Deliver food to table 1
   → WAIT for them to finish →
3. Take order from table 2
   → WAIT for kitchen →
4. Deliver food to table 2

Problem: One customer at a time!
Restaurant: Empty while waiting
Code: Frozen UI while fetching data

✅ Asynchronous (JavaScript)

1. Take order table 1 → kitchen
2. Take order table 2 → kitchen
3. Take order table 3 → kitchen
   (while kitchen cooks)
4. Deliver food as ready
5. Keep taking new orders

Benefit: Serve many customers!
Restaurant: Always busy
Code: Responsive UI while loading

Async/Await: Making Async Look Sync

The Pattern You’ll Use Everywhere 
async function fetchData() {
  try {
    // 1. Mark function as async
    // 2. Use await to pause until promise resolves
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    
    console.log(data);
    return data;
  } catch (error) {
    // 3. Handle errors
    console.error('Something went wrong:', error);
  }
}

Three parts:

  1. async keyword on function
  2. await keyword before promises
  3. try/catch for errors

This is ALL you need to know about async for now!

Fetch API: Getting Data from Servers

The Pattern

async function getUsers() {
  try {
    const response = await fetch(
      'https://api.example.com/users'
    );
    
    const users = await response.json();
    
    console.log(users);
    return users;
    
  } catch (error) {
    console.error('Error:', error);
  }
}

Common Mistakes

// ❌ Forgot async
function getUsers() {
  await fetch(url); // ERROR!
}

// ❌ Forgot await
async function getUsers() {
  const response = fetch(url);
  // response is Promise, not data!
}

// ❌ Forgot .json()
async function getUsers() {
  const response = await fetch(url);
  console.log(response);
  // Just response object, not data!
}

🤖 AI Demo: Fetch Data

Let’s Fetch Real Data!

Prompt to AI:

Create an async function that fetches users from 
https://jsonplaceholder.typicode.com/users
and returns only their names as an array.
Use async/await and proper error handling.

Expected Pattern:

async function getUserNames() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    const names = users.map(user => user.name);
    return names;
  } catch (error) {
    console.error('Error fetching users:', error);
    return [];
  }
}

Everyone test this in your console now!

Error Handling: The Right Way

async function fetchProducts() {
  try {
    const response = await fetch('https://api.example.com/products');
    
    // Check if request was successful
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const products = await response.json();
    return products;
    
  } catch (error) {
    console.error('Failed to fetch products:', error);
    
    // Return empty array or default value
    return [];
  }
}

Pro tip: Always check response.ok before parsing JSON!

What We’re NOT Teaching (Yet)

❌ Skipping For Now

  • Callbacks (outdated pattern)
  • Promise .then() syntax (confusing)
  • Promise constructor
  • Promise.all(), Promise.race()
  • POST/PUT/DELETE requests
  • Request headers & authentication
  • Advanced error handling patterns

✅ Why Skip?

You don’t need them yet!

  • React data fetching: Just GET with fetch
  • Advanced patterns: Learn in Express session
  • Headers/auth: Learn when building APIs
  • Promise.all: Learn when needed

Philosophy: Just-in-time learning

Next session (Express): We’ll cover POST, headers, authentication, parallel requests, etc.

Key Takeaways: Async Basics

  1. Async = non-blocking - Other code runs while waiting
  2. async/await pattern - Makes async look synchronous
  3. fetch(url) - Gets data from APIs
  4. await response.json() - Parses JSON response
  5. try/catch - Handles errors
  6. Check response.ok - Verify success before parsing
  7. This is enough for React! - Deep dive in Express session

Ready for React motivation? Let’s see why we need it! 🎨

Part 3: Why React now?

  • The Vanilla JavaScript Challenge

Session 2 Summary: You now know enough JavaScript to:

  • ✅ Create variables and functions
  • ✅ Work with objects and arrays
  • ✅ Fetch data from APIs with async/await
  • ✅ Generate code with AI assistance

But: Building complex UIs with vanilla JavaScript becomes painful, event with AI help.

That’s where React comes in : It solves these problems elegantly!

Réutilisation