JSX

Question 1

What is JSX?

Answer 1

• JS is a special dialect of JS (not like HTML)
• Browsers don’t understand JSX code, we write JSX then run tools like babel that turn it into normal JS
• It is very similar in form and function to normal HTML

Question 2

What are the differences between JSX and HTML?

Answer 2

• Adding custom styling to an element uses different syntax
• Adding a class to an element uses different syntax
• JSX can reference JS variables

Question 3

How can you add custom styling to an element in JSX?

Question 4

Why cannot you use class property on JSX elements?

Answer 4

We should use className keyword instead of class, in order to avoid collision between JS class keyword and property that is put on JSX object that we return in React Components.

Question 5

How can you embed variables in jsx?

Answer 5

We can reference a javascript function or variable by putting it in a set of curly braces like below.

    {buttonText}

Note: It is not a JavaScript object, it is the syntax that JSX uses to refer to JavaScript variables

Objects are not valid React child and will produce an error.

Question 6

What are the JSX rules?

Answer 6

• return only single element
• div / section / article or Fragment
• use camelCase for html attribute
• className instead of class
• close every element
• formatting with ()