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. eg: const element =

  hello

  ;
• 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