React JSX
React JSX
JavaScript XML or JSX is an XML or HTML like JavaScript syntax extension used by ReactJS. Processed into JavaScript calls of React Framework, it extends the ES6. This allows the HTML-like text to co-exist with JavaScript react code. This syntax is also used by the preprocessors with the purpose of converting the HTML-like syntax into standard JavaScript objects.
Nested Elements:
Nested Elements in JSX are needed to wrap with one container element.
Example: div as a container element.
App.JSX:
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1>HELLO</h1> <h3>WORLD</h3> </div> ); } } export default App; |
Output:
HELLO WORLD |
Explanation: Here the container element div contains two nested elements within it.
JSX Attributes:
JSX uses camelcase naming convention for attributes and also allows the user to create his/her own custom attributes. To specify attribute values in JSX, there are two ways:
As String Literals: Here the values of the attributes are specified in double-quotes.
Example:
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1 className = "first" >Hello World</h1> <p data-demoAttribute = "second">Have a great day!</p> </div> ); } } export default App; |
Output:
Hello World
Have a great day! |
As Expressions: Here, the values of attributes are specified as expressions using curly braces {}.
Example:
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1 className = "first" >{100+10}</h1> </div> ); } } export default App; |
Output:
110 |
JSX Comments:
In JSX comments begin with /* and ends with */. The comment is then wrapped in curly braces {}.
Example:
{/* Comment in JSX */} |
JSX Styling:
Inline-styles are recommended for React.
EXAMPLE
import React, { Component } from 'react'; class App extends Component{ render(){ var X = { fontSize: 60, fontFamily: 'Courier', color: '#003300' } return ( <div> <h1 style = {X}>Hello World</h1> </div> ); } } export default App; |
Output:
Hello World |
JSX features:
- While translating the code to JavaScript, JSX performs optimization and is thus faster than regular JavaScript.
- React uses components that contain markup and logic.
- Most of the errors can be detected at the time of compilation and are thus type-safe.
- Creating templates is also an easy process.
