JavaScript for React

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

Emmanuel BRUNO

emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2025-10-15

🎯 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

If You Know PHP, You’re Ahead!

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!