React$Prepare-JSX

const message = 'Hello JSX'
// className, style{{}}; htmlFor
// old: <div> </div>, new (18): <> </>, <React.Fragment></React.Fragment>
// special character: if as varaible ==> needn't HTML entities
// whitespace: new line => no space
// true => 'true', falsy => '' but 0 => '0'
// self-closing elements
const VDOM = (
  <>
    <div>{message}</div>
    <div className="coral">className</div>
    <div style={{ backgroundColor: 'salmon' }}>style object</div>
    <input type="text" />
  </>
)

Branching in JSX

- && (0: a.length ==> a.length > 0)
- ?:
- Assign to varialbes (javascript variables / JSX / components)
- Early return
- Object Mapping: obj[pro] || obj[defaultPro]

Links

ReactJSX

JSXFacebook