react js-tutorial

React JSX

All React components have a render function, as we have already seen. A React component’s HTML output is defined by the render function. A React extension called JSX (JavaScript Extension) enables the creation of JavaScript code that resembles HTML. To put it another way, JSX is an extension of ECMAScript utilised by React to allow HTML-like syntax to coexist with JavaScript/React code. Preprocessors (also known as transpilers, such as babel) use the syntax to convert HTML-like syntax into typical JavaScript objects that a JavaScript engine can interpret.

Why use JSX?

  • Because it conducts optimization when converting the code to JavaScript, it is quicker than standard JavaScript.
  • React uses components that combine markup and functionality rather than splitting technologies by putting them in distinct files. Components will be covered in a later section.
  • The majority of the mistakes may be identified during compilation because it is type-safe.
  • Making templates is made simpler.

Nested Elements in JSX

To use more than one element, you need to wrap it with one container element. Here, we use div as a container element which has three nested elements inside it.

App.JSX

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1>Learn Code Zone</h1>  
          <h2>Coading Tutorials</h2>  
            <p>This website contains the best CS tutorials.</p>  
         </div>  
      );  
   }  
}  
export default App;  

Output:

JSX Comments

JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions. Below example shows how to use comments in JSX.

Example

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >Hello Learners</h1>  
        {/* This is a comment in JSX */}   
         </div>  
      );  
   }  
}  
export default App;  

Output

JSX Styling

React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.

Example

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         fontFamily: 'Courier',  
         color: '#003300'  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>www.learncodezone.com</h1>  
         </div>  
      );  
   }  
}  
export default App;  

Output

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *