All The JavaScript You Need To Know For React (More JS To Know)

DOM

• The DOM (Document Object Model) is a representation of a web page that JavaScript can interact with
• It’s a tree-like structure where each node corresponds to a part of the page written in HTML
• JavaScript is used to add interactivity to a website by manipulating the DOM
• Direct DOM manipulation can be inefficient and hard to manage, which is why React was created

---

Import Export Notation

• The import export notation is a quick and simple concept to understand
• It’s used in React and JavaScript to import and export modules or files
• The notation is simpler than previous versions of JavaScript

const axios = require("axios");
import axios from 'axios'; //REACT
 
module.exports = { anObject };
export {anObject} //REACT

---

Ternary Operators and Conditionals

• Ternary operators are used to condense if statements into one line
• They are widely used and present in many languages
• They can be used to set values based on conditions and are essential in React

let myAge = 17;
let isOfAge = false;
 
if (myAge > 18){
	isOfAge = true;
}else{
	isOfAge = fasle; 
}
 
myAge >18 ? true:fasle //TERNARY

let color = "Green"
let isCorrect = false
 
color = isCorrect ? "Green":"Red"; //TERNARY 
color = isCorrect && "Green";

---

Optional Chaining

• Optional chaining is a simple but useful concept
• It’s used to prevent errors when accessing fields in objects that may not exist
• It’s essential in React to prevent breaking the app when dealing with data

const fetchData = async () => {
	const data = await fetch("imaginaryapi.com");
	const name = data.person?.name;
};

NOTE

Sometime the app will try to access fields in objects before those fields actually exists. We might try to access this person.name before data is fetching. because of that we can tell JavaScript that only try to access specific key from an object ONLY IF THE KEY EXISTS : person?.name

---

Template Literals

NOTE

You can insert JavaScript inside Strings using backticks :“

const fetchData = async (animalName) => {
	const data = await fetch(`imaginaryapi.com/searchTerm=$animalName`);
	const name = data.person?.name;
};

---

Resources

All The JavaScript You Need To Know For React

Youtube Video Link

Udemy - The Ultimate React Course 2024 React, Next.js, Redux & More