hot terms javascript and react

cold-terms-warm-terms-javascript-and-react.md

This document is
an effort to get people up to speed where they feel confident about react and javascript

I am putting together an organized list of what I grab for when solving various problems.
"what I know cold", and these are just the things that currently come to mind it can be updated later.

There are also "warm items", that I know to google and reach for when encountering a situation
an example of that would be an IIFE - immediately invoked function expression.

Fundamentals, Javascript Logic.

for loop -> has mutations, lets you finish early with break and continue. Can be nested with little consequences.
logic that solves off by 1 issue due to being an enumaerable ->
for each -> mutation of variables outside is common.
map -> returns a new array with updated values instead of mutating the data. usually outside mutation does not happen.
filter -> returns a new array
reduce -> warning: use for very specific situations... sum is a good example.
Object.keys
Object.Entries
how to do dynamically access an object using ['keyname']

How promises evolved (an imperfect recollection):

great article on this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
promise all ->
promiseallSettled
callbacks were how we waited for things to finish previously.
nested callback hell
promises came out
.then
async await
it felt like .then came out a few weeks before async await but they may have come out at the same time.

async await is typically preferred but easier to screw up than.then chaining.

checking undefined
var1 && var1.key1
var1 && var1['key1']
then we got:
var1?.key1

never use null (or have a very good reason which you probably wont.)
just change null from the database to undefined.

Lets talk about dates

dateTime libraries and how to do dates:
when you save tell the db what timezone you saved using the timezone string.
submit times as utc.

client has there own timezone.
the store or office may be in a different timezone than the client.

you may need to present both. but if you decide to use the office locations time
it should always be visible somewhere that says current time in application.

databases should be time agnostic. it does not matter what region they are in they should have utc values.

dates are first a backend concern. Ask what contract they want to setup to keep the data accurate?
Find out if there is legacy code regarding dates that is bad and cant be changed for various reasons. Find ways to isolate that logic "known bad logic". In this situation setup an "old contract" passthrough for the network requests and a "new contract" passthrough for the network requests.

What is React

React was meant to be a simple way to manipulate the dom.

Circling back to nested callback functions:

// Nested callback functions example.
Promise.resolve()
.then(x => {
  const timeout = setTimeout(() => {
    setTimeout(() => {
      console.log('not yet finished')
      setTimeout(() => {
       console.log('all finished')
      }, 100)
    }, 100)
  }, 100)
  return timeout
}
.then(x => {}); // note, .then does nothing for setTimeouts. Set timeout does not return a promise.

A typescript guide,

1. learn the primitive types ... number, string, etc.
2. Unions and Intersections https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
3. Pick, Omit, Partial https://dev.to/glebirovich/5-typescript-utility-types-that-will-make-your-life-easier-i44
4. Typescript how to extract nested type:
   https://stackoverflow.com/questions/56779149/typescript-how-to-extract-nested-type
5. Learn ? - also ? is not the same as | undefined - but don't focus on this too much.
6. The "Top Level Type" is the most important type.
   Try to use the type the library gives you for free and get everything inferred from that point onward.
   If you get the Top Level Type wrong you will find that you are typing everything at a micro level and overtyping.

Regarding typescript for people new to the language anything more than this will probably be too much early on.