JSX
-JavaScript XML (jsx) Extension to the Javascript language syntax.
- write xml - Like code for elements and Components.
-JSX tags have a tag name, attribute and children.
- jsx is not a neccessity to write React application.
JSX in React Component
- JSX by default supports only single line element configuration.
Example
<h2> Heading </h2> // Invalid JSX Code Block
<p> Paragraph </p> // Multi Line not allowed
- JSX element configuration can be defined in “( )” if it comprises
of multiple lines.
- Element must be a container to hold multiple lines.
<div> <span> <p> etc.
Example
const element = (
<div>
<h2> React.js </h2>
<p> Components in React.js </p>
</div>
);
ReactDOM.render( element, document.getElementById("container")
)- Adding additional container may affect the presentation in
HTML.
- Hence you have to use empty container.
<> Start
</> End
Example
jsx.js
const jsx = (
<>
<h2>React.js</h2>
<p>Components in React.js</p>
</>
);
ReactDOM.render( jsx, document.getElementById("container")
)
JSX Expressions
- JavaScript allows embedded expression in a string
representation by using “${ }”
`<div> ${ dynamicValue } </div>`
- JSX expression is embedded by using “{ }”
Example
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <h1>React is { 6 + 2 } times better with JSX</h1>;
ReactDOM.render(myelement, document.getElementById('root'));JSX will Not allow Void Element
- Void element usually will not have end tag.
Example <img>
- Every element in JSX must have and End tag. Or define as self
ending
<img> </img>
<img />
<img> //invalid