?? ??? ??: ?? JavaScript ? React ??

?????? ??

1. ????

????? ??? ???? ? ??? ???? ?? ? ?? ??? ?? ??? ? ?? ???? JavaScript? ???????. ?, ???? ??? ???? ?? ??? ??? ??? ? ????. ??? ???? ?? ??? ???????. var? ??? ??? ?? ?????? undefound? ????? ??, let ? const? ??????? ????? ???? ?? ?? ????? "??? ???" ??? ?????. ?? ??? ??? ???????. ?, ??? ???? ?? ??? ? ????.

?:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

?? ??? ???????:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. ??

???? ??? ?? ?? ??? ??? ??? ?? ??? ?? ???? ???? JavaScript? ?????. ?? ?? ??? ?? ??? ??? "??"? ? ????. ???? ?? ??? ???, ?? ?? ?? JavaScript?? ?? ?? ??? ?????. ??? ?? ?? ??? ???? ?? ??? ?? ??? ??? ??? ??? ?????.

?:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. ??

??? ??? ??? ? ?? ?? ?? ?? ???? ?????. ?? ?? ?? ???? ??? ??? ? ????? ???? ? ???? "?? ??"? ????. Promise? ?? ?, ???, ???? ? ?? ?? ? ??? ? ????. ??? ????? ???? ??? ? ?? ???. Promise? ?? ???? ????? ??? ?? ??? ? ?? ????.

?:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. ?? ??

?? ??? ?? ??? ?? ??? ?? ?? ??? ??? ??? ??? ???? ?????. ? ?? ??? ??? ??????? ?? ??? ?? ??? ???? ??? ??? ??? ??? ? ?? ?????. Currying? ???? ?? ???, ???? ? ???? ?????.

?:

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

const add5 = add(5);
console.log(add5(3)); // 8

5. ?? ????

?? ????? JavaScript ??? ???? ??? ?????. ???? ?? ??? ???? ? ?? ??, ?? ? ??? ?????. ?? ?????? ? ?? ??? ????.

• ?? ?? ????: ????? ?? ??? ? ?????. ?? ??? ??? ??? ??? ? ????? ?????.
• ?? ?? ????: ??? ??? ??? ???? ?? ?? ??? ????? ?????.
• ?? ?? ????: ?? ???? ??? eval()? ??? ? ?????. ?? ????? ?? ??? ?? ???? ??? ??? ??? ?????.

?:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6. ??, ??, ???

?? ?? ? this? ?? ????? ???? ?????.

• Call: ??? this ????? ????? ??? ??? ???? ??? ?????.
• ??: ??? ????? ??? ??? ?????.
• ???: ?? ???? ?? ?? this ????? ??? ?? ??? ? ??? ?????.

?:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7. ???? ??? ?? ???

???? ????? ??? ? ?? ???? ??? ???? ?? ?????. ?? ?? ?? ????? ??? ???? Array.map, Promise ?? Object.sign? ?? ?? JavaScript ??? ??? ? ????. ???? ???? ???? ?? ?? ???? ??? ??? ??? ???? ?? ??? ???? ?????.

?: Array.prototype.map ???:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

?? ??

1. ??

??? ?? DOM? ????? DOM? ?????? React? ???????. React? diffing ????? ???? ??? ???? ???? ?? ???? ???? ????? ????. ??? props? ???? React? ??? ?? DOM? ???? ?? DOM? ???? ??? ??? ???????.

2. ??

??? ??? ?? ??? ???? ??? ?? ????? ??? ? ??? ?? ? ?? ?? ???? ?? ??? ??? ? ?? ??? ?????. ??? ?? ??? ?? useState? ???? ?? useEffect? ?????. ??? React ??? ?? ???? ??? ??? ?? ??? ?? ???? ????.

?:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3. ???? ??? ????

??? ?? ??? ?? ?? ? ?? ?? ???? ???? ES6 ??????. ??? ?? ??? UI? ????? ??? ?????. ??? ????? ??? ?? ??? ??? ??? ??? ?? ??? ??? ? ????. ??? ?? ??? ???? ? ?? ?? ??? ?????.

??? ????? ?:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4. ????

??????? ???? ????? ????? ???? ?? ???? ?? ??? ?????. React?? ??????? props? ??? ??? ?? ?? ??? ?? ?????? ?????. ?? ?? ??? ?? ??? ????? ?? ???? ?? ??? ?? ?????.

?:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5. ?? ??(HOC)

HOC? ??? ?? ??? ???? ???? ?? ?? ??? ??? ??? ???? React? ??? ?????. HOC? ????? ?? ???, ?? ??, ???? ??? ?? ?? ??? ?????.

?:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6. ??

React ??? ????? ???? ???? ??, ???? ?? ??, React.memo ?? useMemo? ??? ??? ???? ?? ??? ?????. ???? ?? ??? ???? ?? React Profiler? ?? ??? ?????.

7. ??? ???

React Router? React ???????? ??? ???? ?? ????????. ?? ?? ???? ??? ???? URL? ???? ?? ??? ???? ???? ? ????. ???? ?? ??, ?? ???? ? ?? ??? ?????.

?:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8. ??

React? ???? ?? ???? ???? ?? ???? ?? ???? ?? ???? ??? ?????. ?? ?? ??, Redux ?? localStorage? ?? ?????? ???? ??? ? ????. ??? ?? ??? ?? ??? ??? ??? ??????.

9. ??

React ??????? ????? ???? ??? ??? ?? ? ????, HTTPS? ????, XSS ??? ???? ?? ??? JavaScript? ??? ???. ??? ?? ?????? ??? HTTP ??? ???? ? ??? ???. ?? ? ??? ???? ????? ???.

10. ?? ??

??? ?? ??? ??? ? ????.

• ?? ??? ?? ?? ???.
• ???? ?? ????? ?????.
• ?? ??? ?? React.lazy? ?????.
• ??? ? ?? ???.
• ?? ??? ???? ????? ?????.

11. ??? ??

??? ? ?? ???? ??? ??? ???? ?? ? ??? ??? ?????. React??? ??? ???, ??? ?? ??? ????? ???? ??? ???? ??? ????. ?? ??? ?? useEffect? ???? ??? ??? ???? ??? ??? ??? ? ????.

?? ?? ?? ?? ??? ????:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

?????, ???? ???? ??????? ????? ?? ?????? JavaScript? React? ?? ??? ??? ?? ?????. ??? ??? ? ??? ??? ??? ?? ??? ??? ??? ?? ?? ??? ? ??? ???? ???. ??? ??, React? ?? ?? ???, ?? ?? ?? ?? ? ??? ??? ?? ?? ??? ???? ???? ??? ???? ? ????. ???? ????, ????, ??? ?????. ???? ???? ????? ????? ??? ??? ?? ??? ?? ?????.

? ??? ???? ?? ??? JavaScript ? React ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!