React JSX

Tram Ho

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

Share the news now

Source : Viblo