JSX/TSX

JSX/TSX is basically just HTML crammed into Javascript, this type of thinking leads to projects like Tailwind.css

Props

Props is short for “properties”. Props let you customize React components; they’re like custom HTML attributes; so to pass a JS object in JSX, you must wrap the object in another pair of curly braces: {{width: 200, height: 200}} because JS objects are also denoted with curly braces, so you can pass something other than a string as props, like an array or number: <Cat name={props.name} food={["fish", "kibble"]} age={2} />

you declare props like:

type ObjProps = { width: int, height: int, name: string, food: array, age: int };
const Obj = (props: ObjProps) => {...};