JavaScript Refresher | JavaScript and React
MindCraft Frontend Web Dev - Master React JS Lecture 3
Course by: MindCraft

Before continuing our journey in React, let’s recall some basic concepts of JavaScript.

JavaScript Overview:

JavaScript is a versatile language that allows client-side scripting to create dynamic web pages. It was designed to make web pages interactive and can also be used as a backend language with the help of Node.js.

Adding JavaScript to HTML:

Using <script> Tag:
<script>

    // Your JavaScript code here

</script>

External File:
<script src="js/tut2.js"></script>

Variables in JavaScript:

• var

• let

• const

console.log():

Used to print variables or text to the console.

console.log("Hello, World!");

Arithmetic Operators:

Used to perform arithmetic functions like addition, subtraction, multiplication, etc.

Data Types in JavaScript:

• Primitive: Undefined, Null, Number, String, Boolean, Symbol.

• Reference: Arrays, Objects.

Functions in JavaScript:

Reusable blocks of code that can be called anytime in the program.

function hello() {

    console.log("Hey! I am Harry.");

}

hello(); // Outputs: Hey! I am Harry.

Objects in JavaScript:

Can hold multiple values, arrays, functions, etc.

let obja = {

    r: 34,

    m: 64,

    func: function myfunc(number) {

        console.log("The number is " + number);

    }

};

console.log(obja.m); // Outputs: 64

obja.func(45); // Outputs: The number is 45

Events in JavaScript:

Changes in the state of an object triggered by user interaction.

document.addEventListener("click", function click() {

    console.log("clicked");

    let conf = confirm("Are you Sure?");

    console.log(conf);

});

Strings in JavaScript:

Strings store text within double or single quotes.

let myString = "Harry is a good boy";

String Methods:

• length

• indexOf

• lastIndexOf

• slice

• replace

Arrays in JavaScript:

Store multiple values in a single variable.

let arr = [1, 2, 3, "Harry"];

Array Methods:

• length

• forEach

• unshift

• pop

• push

• toString

Loops:

Execute a block of code repeatedly until a specified condition is met.

• For loop

• Do while loop

• While loop

Conditionals:

Execute code based on certain conditions.

• if

• else

• else if

• switch case

break and continue:

• continue: Skips the current iteration and moves to the next one.

• break: Terminates the loop.

Strict Mode:

Enforces stricter parsing and error handling in your JavaScript code.

"use strict";

Arrow Functions:

Simplifies function syntax and handles the this keyword differently.

let myFunc = (number) => {

    console.log(this);

};

myFunc(); // Outputs: [object Window]

Callback Functions:

Functions that are executed after another function has finished.

setTimeout(() => {

    console.log("Hooray");

}, 3000);

console.log("This is a script.");

Outputs:

This is a script.

Hooray

Asynchronous Non-blocking IO Model:

JavaScript uses this model to handle operations efficiently without blocking the execution of subsequent code.

To access the JavaScript cheat sheet, click here.

In the upcoming videos, we will cover many concepts of React with some amazing projects that will help you understand React completely.

Thank you for being with me throughout the tutorial. In the next tutorial, we will learn about JSX. Till then, keep learning and keep coding.