ReactJS – JSX features

The tutorial provides the detailing about the React JSX (JavaScript Extension) and its features.

What is React JSX ?

The JSX feature in React programming provides the extension to JavaScript which helps in converting the HTML tags to the react elements and provides the mix of HTML and JavaScript together. React JSX provides the template script instead of using regular JavaScript.

In other words, the render functions of React provides the HTML like syntax used by React to extend the ECMAScript to allow HTML like syntax to be used with JavaScript and React.

JSX Example

The below given is the sample code for JSX.

<div> Hello Oracleappshelp Users </div>

The normal HTML tags provided below is converted to react element which includes the div tag, argument passed and content value.

React.createElement("div", null, "Hello Oracleappshelp Users"); 

If we refer our previous code for App.js in the React JS Overview blog, then that shows the mix of React and HTML Tags together

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello Oracleappshelp Users</h1>
         </div>
      );
   }
}
export default App;

Let’s consider another example of create React Component for the Login Page with UserName and Password

Normal JavaScript usage for creating React JS Component for Login Form

class App extends React.Component{
         render(){
                  return (
                          React.createElement('form', {},
                          React.createElement("h1", {}, "Login"),
                          React.createElement('input', {type: 'text',placeholder:'Name', value: '',}),
                          React.createElement('br', {}),React.createElement('br', {}), 
                          React.createElement('input', {type: 'password', placeholder: 'password',
                                               value: '',}), 
                          React.createElement('br', {}), React.createElement('br', {}), 
                          React.createElement('button', {type: 'submit'}, "Login"))
                         )
                }
};
 ReactDOM.render(<App />, document.getElementById('root'));                         
export default App;

JSX usage for creating React JS Component for Login Form

class App extends React.Component{
              render(){
                       return (<form><h2>Login</h2>
                                     <input type="text" placeholder="Name" /><br/><br/>
                                     <input type="password" placeholder="password" /> <br/><br/>
                                     <input type="submit" nvalue="log" />                 
                                </form>);
                       }
};
export default App;

Advantages of using JSX

  • The JSX templating provides the optimization to the react code and thus makes it perform faster
  • React overcomes the usage of code logic and markup languages separately with the usage React components which helps in combining the both.
  • JSX is type -safe and thus avoid errors at the run -time
  • JSX provides easier way to create templates.

Nested elements in JSX

With the usage of JSX , it is feasible to return multiple elements within the same container. The below given simple example demonstrate the same.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1>Oracleappshelp Tutorials</h1>  
            <h2>Oracle and Open Source Technology Blog</h2>  
            <p>The Oracleappshelp pupose to help the community in learning new technologies and providing easy step by step tutorials</p>  
         </div>  
      );  
   }  
}  
export default App;

JSX Attributes

The below points need to be considered for the JSX Attributes

  • JSX allows attribute to be used with the HTML elements
  • JSX allows custom attributes to be created
  • JSX uses camelCase naming convention for the attributes. Thus, class in HTML becomes className in JSX, for in HTML becomes htmlFor in JSX
  • Syntax for using custom attribute is data-prefix

The below given example demonstrates the use of JSX Attributes

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1>Oracleappshelp Tutorials</h1>  
            <h2>Oracle and Open Source Technology Blog</h2>  
            <p data-customAttribute = "custom">The Oracleappshelp pupose to help the community in learning new technologies and providing easy step by step tutorials</p>  
         </div>  
      );  
   }  
}  
export default App;

JavaScript expressions in JSX

JSX also provides the use of JavaScript expressions. The use of curly brackets {} allows to provide the expressions that need to be evaluated. The below given example demonstrates the use of JSX JavaScript expressions

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 style ={customeStyle}>{12345 + 54321}</h1>  
           {/* JSX allow to enter the comments in this way within the curly brackets */}  
         </div>  
      );  
   }  
}  
export default App;

Ternary expression in JSX

JSX does not support if else conditions but allows to enter the ternary expressions for the evaluation of the condition at the run-time. The below given is the simple example with the usage of ternary expressions.

import React from 'react';
class App extends React.Component {
   render() {
      var value = 100;
      return (
         <div>
            <h1>{value < 100 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

JSX Comments

Comments can be added in the JSX using the /* and */ within the curly brackets. Refer the above example with the comments added using JavaScript expressions

JSX Styling

React provides the inline style using the camelCase syntax. Syntax for using custom style is style ={customStyle} Refer the above example with the style added using JavaScript expressions