React JS

React JSX Constructs

React JSX Constructs

React JSX Constructs

JSX Comments
Begin with /* and ends with */ and wrapping them in curly braces {}

<h1 className = "site" >{22+11}</h1>  
{/* A JSX comment */}  



JSX Styling
React always recommends to use inline styles in camelCase syntax
React automatically allows appending px after the number value on specific elements.


import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var heading = {  
         fontSize: 12Px,  
         fontFamily: 'Arial',  
         color: '#044300'  
      }  
      return (  
         <div>  
            <h1 style = {heading}>www.thetechfoyer.com</h1>  
         </div>  
      );  
   }  
}  
export default App;  



Conditional Operator/Expression
JSX cannot use if-else statements. Instead use conditional (ternary) expressions

import React, { Component } from 'react';
class App extends Component {
    render() {
        var counter = 2023;  
        return (
            <div>      
                <h1>{i > 2023 ? 'Latest Version' : 'Older Version'}</h1>
            </div>
        );
    }
}
export default App;







Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.

Instagram