Explanation of JSX Code Snippet
- Inserting Multiline HTML Code : While inserting the HTML code in a JSX element , if the HTML code is multi-liner then put the HTML code inside a parenthesis. You can clearly see in the following example that the HTML code inside the ‘jsxElement’ is enclosed with a parenthesis.
- One top level element : If there are multiple elements in the HTML code snippet then they must be wrapped with a parent element. In our example we have wrapped our <h1> and the <p> element with a <div> element.
- ‘className’ attribute replacing ‘class’ : The conventional ‘class’ attribute of HTML is similar to the ‘class’ keyword of JavaScript. So to avoid any collision the HTML ‘class’ attribute is renamed to ‘className’. The ‘className’ attribute replaces the ‘class’ attribute and does the same work as the ‘class’ attribute.
- Elements must be closed : While writing HTML it is not necessary to close all the tags, at least the system will not throw any error if some tags are not closed. But in case of JSX you cannot leave an element without closing all the tags. It will throw an error .
Explain basic code snippet of JSX
In this article, we are going to learn about the basic code snippets of react JSX. The full form of the word JSX is JavaScript-XML. This is an extension of the syntax of the JavaScript language. JSX allows us to implement the HTML code snippets into React directly with very few changes in the syntax.