Introduction of React JSX.
What is a JSX?
JSX stands for JavaScript XML.
- JSX used in React to easily write HTML and Javascript together.
- This funny tag syntax is neither a String nor HTML.
- It's called JSX, and it is a React XML.
- JSX might seem awkward at first, but you get used to it pretty fast.
- React keeps both HTML and Javascript code in same file.
- We can use the prev JSX code in React Like this.
Expressions in JSX
- With JSX you can write expressions inside curly braces ().
- The expression can be a React variable, or property, or any other valid JavaScript expression.
Top Level Element
- In JSX, The HTML code must be wrapped in ONE top level element.
- So if you like to write two paragraphs, you must put them inside a parent element, like a div element.
- Alternatively, you can use a "fragment" to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.
- A fragment looks like an empty HTML tag: <></>.
Elements Must be Closed:
- JSX follows XML rules, and therefore HTML elements must be properly closed.
- Close empty elements with />
Attribute class = className
- Is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.
- JSX solved this by using className instead.
Like, Share and Subscribe #DevTools99 for more useful videos, tools info and #tutorials . Thank you!
