Introducing JSX

Question 1

What is JSX?

Answer 1

A syntax extension to JavaScript to be used with React to describe what the UI should look like. Example:

Question 2

JSX helps create loosely coupled units called ______?

Answer 2

Components

Question 3

What can you put inside the curly braces in JSX?

Answer 3

You can put any valid JavaScript expression inside the curly braces in JSX.

Question 4

When JSX is split over multiple lines should it be wrapped in parenthesis?

Answer 4

Yes, to avoid the pitfalls of automatic semicolon insertion. https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi

Question 5

True or False - After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

Answer 5

True! 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.

Question 6

Should you use quotes or curly braces for string values in JSX?

Answer 6

You should use quotes for string values and curly braces for expressions.

Question 7

Is the following safe?

Answer 7

Yes! By default, React DOM escapes any values embedded in JSX before rendering them. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

Question 8

What does Babel compile JSX down to?

Answer 8

React.createElement() calls. These are identical:

Question 9

React.creatElement() creates “React elements” that are in the end just like everything else in JavaScript, an ______?

Answer 9

Object! React reads these objects and uses them to construct the DOM and keep it up to date.

Question 10

What property naming convention is used in JSX instead of HTML attribute names?

Answer 10

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase. For example, class becomes className in JSX, and tabindex becomes tabIndex.