Component Based UI (React)

React Overview

• React is a JS library
• It acts somewhat like a string and HTML combined... sort of.
• React embraces the fact that rendering logic is inherently coupled with other UI logic; such as how events are handled, how the state changes over time, and how the data is prepared for display.
• React does not separate things by putting markup and logic in separate files and instead it separates concerns with "components" that have both markup and logic in them.

JSX Overview

• React does not require JSX, but it's useful.
• JSX represents objects
• JSX is a syntax extension to JS and is used with React to describe what the UI should look like.
• JSX produces React "elements".
• We can put any valid JS expression in curly braces using JSX.
• Split JSX over multiple lines for readability and wrap them in parentheses (avoids auto semicolon insertion I guess?).
• JSX can be used inside of if statements and for loops, assigned to variables, accepted as an argument, and returned from functions.
• We can close empty tags with />.
• One of the best parts of JSX is it can prevent injection attacks. It does this because React DOM escapes any values embedded in JSX before rendering. Thus you can't inject anything that is not written into the application.
• Babel compiles JSX down to React.createElement() calls, which are called React elements.
• React elements are like descriptions of what you want to see on the screen. React reads the objects and uses them to construct the DOM and keep it up to date.

Rendering Elements

• An element describes what we want to see on the screen.
• React elements are plain objects, and cheap to make (resource wise).
• Elements != components. Elements are what components are made of.
• React applications usually only have a single root DOM node.
• React elements are immutable and you can't change its children or attributes once created.
• React only updates what is necessary. It does this by having the React DOM compare the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the state we wanted.