After laying the foundations of HTML, CSS, JavaScript; before switching to React, it may be good to review the following topics in JavaScript in order to start with solid foundations.
You can go to the mdn links below to look at the topics in detail.
1. Arrow Functions
Arrow functions enable concise and readable function syntax.
const add = (a, b) => a + b;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2.Object/Array Destructuring
A technique for quickly extracting values from arrays or objects.
const person = { name: "Alice", age: 30 };
const { name, age } = person;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
3.Rest/Spread Operator
Rest allows us to access elements of an array collectively. Spread, on the other hand, spreads the elements of an array or properties of an object.
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
4.ES-Modules
Utilizing the modern JavaScript module structure for linking and sharing between files.
// export.js
export const PI = 3.14;
// import.js
import { PI } from './export.js';5. Array Methods
Effective data manipulation using various array methods.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
6. Ternary Conditional Operators
const isEven = (num) => (num % 2 === 0) ? "Even" : "Odd";https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
7.Promises and async/await
function fetchData() {
return new Promise(resolve => {
setTimeout(() => resolve("Data has arrived!"), 2000);
});
}
async function getData() {
const data = await fetchData();
console.log(data);
}Happy Coding..😀