React
Introducing JSX
Content
1. Why JSX?
2. What JSX?
3. Embedding Expressions in JSX
4. JSX is an Expression
5. Specifying Attributes with JSX
6. JSX Represents Objects
7. Specifying Children with JSX
8. HTML to JSX
1. Why JSX?
▪ React embraces the fact that rendering logic is inherently
coupled with other UI logic:
– how events are handled.
– how the state changes over time.
– how the data is prepared for display.
▪ Instead of artificially separating technologies by putting
markup and logic in separate files, React separates concerns
with loosely coupled units called “components” that contain
both.
▪ React doesn’t require using JSX, but most people find it
helpful as a visual aid when working with UI inside the
JavaScript code. It also allows React to show more useful
error and warning messages.
2. What JSX?
▪ Special dialect of JS (its no HTML)
▪ Browsers don’t understand JSX code! We write JSX then run
tools to convert it into normal JS
▪ Very similar in form and function to HTML with a couple
differences
▪ JSX vs HTML
– Adding custom styling to an element uses different syntax
– Adding a class to an element uses different syntax
– JSX can reference JS variables
3. Embedding Expressions in JSX
4. JSX is an Expression
After compilation, JSX expressions become regular JavaScript
function calls and evaluate to JavaScript objects. This means
that you can use JSX inside of if statements and for loops,
assign it to variables, accept it as arguments, and return it from
functions.
5. Specifying Attributes with JSX
You may use quotes to specify string literals as attributes or
curly braces to embed a JavaScript expression in an attribute.
Note: Don’t put quotes around curly braces when embedding a
JavaScript expression in an attribute.
6. JSX Represents Objects
Babel compiles JSX down to React.createElement() calls
7. Specifying Children with JSX
8. HTML to JSX
▪ HTML
▪ JSX
Differences In Attributes
▪ All DOM properties and attributes (including event handlers)
should be lower camelCased. Ex: tabIndex, onClick,
readOnly, …
▪ The exception is aria-* and data-* attributes, which should be
lowercased. Ex: aria-label, data-id, …
▪ checked, defaultChecked: for controlled and uncontrolled
component.
▪ value, defaultValue: for controlled and uncontrolled
component.
▪ className class in HTML
▪ htmlFor for in HTML
▪ onChange:
Realtime change (in HTML, fire when data changed)
▪ selected:
If you want to mark an <option> as selected, reference the
value attribute of that option in the value of its <select>
instead. Check out “The select Tag” for detailed
instructions.
▪ style
The style attribute accepts a JavaScript object with lower
camelCased properties rather than a CSS string. Ex:
backgroundColor, fontWeight, …
▪ Tag validation
Validate opening & closing tag. Ex: <input type=“text” />
Exercise: HTML to JSX
THE END
