What is a Callback? And what is callback hell?
Function passed as argument to another function which is invoked (called back) after a certain task is complete.
Callback hell happens when you have nested callbacks that become hard to read and maintain.
Happens when asynchronous tasks depend on each other in a way that requires deeply nested callbacks
Promises
Resemble callbacks. Defer processing to some later point whilst other code is executed, then react when we get the event that the promise has completed.
When you call a promise-based asynchronous function, it returns a Promise instance. Only two things can happen to that promise: it can be fulfilled (success) or rejected (failure).
let promise = new Promise((resolve, reject) => {…..});
When result obtained either the resolve or reject callbacks will be called.
.then takes two funcitons
.catch used for error detection
.all - if all promises successful
.any - if any
.race - if the very first one
Document interface
represents entire webpage (DOM - document Object Model). It provides methods to change HTML and CSS dynamically.
Can get elements by tag, class and id. Can also use document.querySelector().
Event handling
User or browser interactions that JS can detect and respond to.
e.g. Clicking button, typing in field, hovering, resizing window.
Using event listeners is recommended
JQuery
Obsolete but was popular when different browsers handled JS inconsistently
React
Open-source JS library for building UI components. Declarative and component based.
Declarative
- makes code predictable and easier to debug as it auto updates DOM to match components state
Component-based
- can build encapsulated components that manage own state
- Components composed to make complex UIs
- Each component can be reused meaning more manageable code.
- can be used for web, mobile and desktop apps.
Components
Modular and reusable units that form whole UI.
It is a function/class that optionally accepts input and returns a React element, defining how a specific part of UI should be displayed
JSXML used by react
JSX
React uses JSX to represent markup. Allows you to write HTML-like code inside JS making it easy to create and visualise UI components
RULES
- return single root element
- close all tags
- use camelCase for attributes
Can embed any JS into JSX by wrapping it in {}
State
JS variable managed by react to store components dynamic state.
State persists across re-renders. When state changes, react auto re-renders to reflect this.
const [state, setState] = useState(initialValue)
Props
A way to pass data from parent to child component. Makes components reusable and dynamic and allows components to communicate.
Read-only. Props to react is like attributes in html.
