What is JSX?

• JSX stands for JavaScript XML, it allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React
• JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
• JSX is an extension of the JavaScript language based on ES6 and is translated into regular JavaScript at runtime.
• You are not required to use JSX

Example of using and not using JSX:

• Let’s compare the two code snippets, it’s easy to see that the code using JSX is simpler and easier to understand.

Some conventions in JSX

• Naming in JSX
  • tag name is always lowercase
  • React component names must be capitalized
  • use className and htmlFor instead of class and for
  • Attributes in tags must be written in camelCase (e.g. onClick, className, …)
• With JSX, you can write expressions inside curly braces {}

• To write HTML on multiple lines , enclose the HTML inside parentheses and always have a parent tag surround it all.

• But if you just want to have 2 p tags without a surrounding div tag, you can do it like this.

• Or

• Add class for tags in JSX.

• Add attributes for tags in JSX like in html.

• Add events for tags in JSX like in html.

Above is what I understand about JSX, if you have any comments, questions or additions, please comment to let me know!

Thanks for reading this far!!!