Class 26 Component Based UI [React] - mwilkin-401-advanced-javascript/bend-javascript-401d2 GitHub Wiki

JSX is a preprocessor step that adds XML syntax to JavaScript. i) React can be used without JSX, but JSX makes React a lot more elegant and a nice visual aid. ii) JSX tags have a tag name, attributes, and children. iii) JSX also allows React to show more useful error and warning messages.

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. i) JSX can be used inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions ii) Either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

JSX Prevents Injection Attacks, so it is safe to embed user input.

Applications built with just React usually have a single root DOM node.

React elements are immutable. i) Once an element is created, its children or attributes can’t change.

JSX Represents Objects i) The objects are called “React elements.” ii) React reads these objects and uses them to construct the DOM and keep it up to date.

React separates concerns with loosely coupled units called “components”.