React-JSX

Page Content:
1.JSX-Introduction
2.JSX-Use
3.JSX-Nested Elements
4.JSX-Attributes
5.JSX-Expression
6.JSX-Styling
6.JSX-Comments

1.Introduction:

• JSX stands for Javascript XML.
• It’s a Javascript syntax Extension for React which allows us to write javascript code that looks like HTML.
• It’s not compulsory to use JSX but it’s recommended for ReactJS.

Babel Preprocessor:
React uses Babel to convert the JSX into Javascript which can be understood by any browser.

Example:
JSX File:<div>”Hello world”</div>

Corrosponding javascript code:
React.createElement(“div”,null,”Hello World”);

The above line creates react element by passing three arguments namely tag name (div here), attributes passed to tag & the last argument is content you pass to element.

---

2.How to use JSX?

The below code shows how exactly JSX is used in React,

App.jsx

import React from 'react';
 class App extends React.Component {
    render() {
       return (
           <div>Hello World!!!<div>        
       );
    }
 }
 export default App;

---

3.How to pass Nested Elements to JSX:

To pass/return multiple elements using JSX we need to wrap them up in a single element called a container such as div & then return it.

import React from 'react';
 class App extends React.Component {
    render() {
       return (
          <div>
             <p>Header</p>
             <h3>Content</h3>
             <h4>This is the content!!!</h4>        
          </div>
       );
    }
 }
 export default App;

---

4.What are the JSX Attributes?

Attributes are nothing but extra properties that we can pass to any tag/element.

Rules for JSX Attributes:
1.Attribute names must use the camelCase convention.
2.For custom attributes we need to use the data prefix below attribute name Ex: data-myAttribute.
3.for normal HTML we used class as an attribute but in javascript class is a reserved keyword hence we instead use className.

import React, { Component } from 'react';  
 class App extends Component{  
    render(){  
       return(  
          <div>
               <p>First React Code</p>
               <h3 data-myAttribute = "value">Welcome to React demo </h3>           
          </div>
       );  
    }  
 }  
 export default App;

---

5.How to use Expressions in JSX?

To use any expression we just need to wrap it within curly braces “{}”.

import React from 'react';
 class App extends React.Component {
    render() {
       return (
          <div>
             <p>{1+1}</p>        
          <div>
       );
    }
 }
 export default App;

Note:
We cant use conditional statements(if-else) inside JSX instead we can use ternary operator as below:

import React from 'react';
 class App extends React.Component {
    render() {
       var flag=true;
       return (
          <div>
             {flag ? 'flag set to true' : 'flag set to False'}          
          </div>
       );
    }
 }
 export default App;

---

6.How to use Styling in JSX?

1.React prefers inline styling & uses camelCase syntax.
2.React append px after number value on specific elements.

import React from 'react';
 class App extends React.Component {
    render() {
       var myStyle = {
          fontSize: 100,
          color: '#FF0000'
       }
       return (
          <div>
            <p style={myStyle}> Hello World!!!</p>       
          </div>
       );
    }
 }
 export default App;

---

7.How to use Comments in JSX?

1.To write comments within the children section of a tag inside JSX we need to use Curly braces “{}”.
2.for single line comment we use “//” & for multiline comment we use “/* */”.

import React from 'react';
 class App extends React.Component {
    render() {

       return (
             <div>
             {//single line Comment…}             
             {/Multi line comment…/}          
            </div>
       );
    }
 }
 export default App;