Don’t jump to React before learning these JavaScript topics⚡…
We all want to try the good stuff as soon as we can (talking about react.js or any other JS framework) after we complete HTML, CSS, and JS but it’s very important to make some preparations beforehand such that the good stuff becomes better.
The JS we use with HTML and CSS is plain “Vanilla” JS, vanilla because it’s plain javascript without any libraries or frameworks.
Everyone likes chocolate (again talking about react.js) but even chocolate has vanilla as it’s base ingredient.
I learned the hard way that we need to have an understanding of some fundamental topics before moving to react.js or any frameworks, I will take you through the most important topics according to my experience which will make learning JS frameworks easier for you. Learn Vanilla JS first and then move to these topics.
1. Document Object Model (DOM)
The first thing to do is understand DOM, so DOM is basically a generated tree structure (generated by the browser) of objects, also you need to know how to manipulate the DOM using JavaScript, including how to select elements, modify element properties, and attach event listeners.
Here are some links that may help you understand DOM:
2. Promises
Promises are exactly what it sounds like, it’s a special object that has promised that it will return a value in the future. The producing code gets the result, it should resolve or reject the promise.
Promises are declared and used like this :
var promise = new Promise(function(resolve, reject) {
const x = "chocolate";
const y = "chocolate";
if(x === y) {
resolve();
} else {
reject();
}
});
promise.
then(function () {
console.log("They are the same picture");
}).
catch(function () {
console.log("No");
});Links for promises in JS :
3. Async / Await
Async/await is a syntax for writing asynchronous code, It allows you to write asynchronous code in a way that looks and feels like synchronous, blocking code, making it easier to read and write. The await keyword makes the function pause the execution and wait for a resolved promise before it continues.
Promise Example with Async and Await
const helperPromise = function () {
const promise = new Promise(function (resolve, reject) {
const x = "chocolate";
const y = "chocolate";
if (x === y) {
resolve("They are the same picture");
} else {
reject("No");
}
});
return promise;
};
async function demoPromise() {
try {
let message = await helperPromise();
console.log(message);
} catch (error) {
console.log("Error: " + error);
}
}
demoPromise();4. ES6+
ECMAScript 6 or ES6 is the standardized specification of JavaScript that was released in 2015 and introduced a number of new features and improvements to the language, some of the important features are :
- Arrow functions, which provide a concise syntax for defining functions
- Classes, which provide a more object-oriented way of defining objects and inheritance
- Modules, which provide a way to organize code into reusable units
- Promises, which provide a way to handle asynchronous operations and make it easier to work with asynchronous code
- Template literals, which allow you to embed expressions inside string literals.
I would recommend looking through all the subtopics on keeping them in mind because some of these are used almost everywhere in a framework like arrow functions, asynchronous programming, callback functions, etc.
5. Vanilla JS
If you need more resources to learn the basics and fundamentals, go to the GitHub repo below.
Remember guys, keep up the grind and become better than you were yesterday.
Hope you found this blog helpful, feel free to connect ⬇️
My other article :
Until next time …
