JSX is syntax extension for JavaScript to write HTML-like markup inside a JavaScript file.
Return a single root element - Can only return one single root element from JSX. Since in JavaScript you can only return 1 value, and JSX is returned from the function, hence it can only return one single root.
Close all Tags - Tags must be closed !
camelCase all most of the things! - Since JSX becomes JavaScript Objects, and the attributes will become the keys, the rules of the keys apply to the attributes. And it cannot use reserved keywords like class hence we use className andstroke-width as strokeWidth
Curly Braces in JSX - In JSX you can use curly braces to a window of JavaScript into the markup. It can be only used in two places.
As inner text of a tag <h1>{heading}<h1/>
As value of tag attributes <h1 style={{backgroundColor: 'black'}}>This is Heading<h1/>
State Management
State is component’s memory
useState is hook, which allows react to remember the state between the renders
state should be only mutated using setters, and state mutation triggers re-renders.