Next ❯

Modern JavaScript for React

  • This lesson refreshes modern JavaScript concepts such as ES6 syntax, arrow functions, destructuring, and modules to prepare learners for React.

  • Topic Overview

    Before learning React deeply, it is very important to understand modern JavaScript (ES6+), because React is built completely on JavaScript concepts.

    React code looks simple only when JavaScript basics are clear.

    let, const, var Differences

    JavaScript provides three ways to declare variables: var, let, and const.

     var

    • Function scoped

    • Can be redeclared

    • Causes bugs in large applications

var x = 10;
var x = 20;

  •  let

    • Block scoped

    • Cannot be redeclared

    • Value can be changed

let y = 10;
y = 20;

  •  const

    • Block scoped

    • Cannot be redeclared

    • Value cannot be changed

const z = 10;

  • Key Difference Table:

    Feature

    var

    let

    const

    Scope

    Function

    Block

    Block

    Redeclare

    Yes

    No

    No

    Reassign

    Yes

    Yes

    No

    React mostly uses const and let.

    Arrow Functions

    Arrow functions provide a shorter syntax for writing functions.

    Traditional Function:

function add(a, b) {
  return a + b;
}

  • Arrow Function:

const add = (a, b) => a + b;

  • Benefits:

    • Less cod

    • Cleaner syntax

    • Better readability

    Arrow functions are heavily used in React components.

    Template Literals

    Template literals allow embedding variables inside strings using backticks (`).

const name = "React";
console.log(`Welcome to ${name}`);

  • Benefits:

    • Easy string formatting

    • Clean code

    • No string concatenation

Next ❯