What is JSX?

• JSX stands for JavaScript XML.

• JSX allows us to write HTML in React.

• JSX makes it easier to write and add HTML in React.

• JSX converts HTML tags into react elements.

You are not required to use JSX, but JSX makes it easier to write React applications.

JSX Code in react:-

function Auser(){
    return(
       <div>
            <p>THis is para from react</p>
            <h1>This is headin</h1>
       </div>
    )
}

In this code function is a javascript or inside return div, p,h1 is html. we can write all html in return.

but, always remenber in react they always return only one html element like div If you return many html element together you will use fragment's(look like empty tag[<> </>] )and all html write and return more than one element

function Auser(){
    return(
       <>
            <p>THis is para from react</p>
            <h1>This is headin</h1>
       </>
    )
}

Expression's in jsx:

• with jsx you can write expressions inside curly braces{} .

• The expression can be a react variable or property or object .

• jsx will execute the expression and return the result.

let name="Megha Khatri";
const fruit={
    fruit1:"Apple",
    fruit2:"Orange"
}
function Auser(){
    return(
       <div>
            <h2>{name}</h2>   //show expression
            <h2>{10+10}</h2>  //+ is a expression
            <h1>{fruit.fruit2}</h1>   // object in Expression
       </div>
    )
}

\Note:-*jsx will throw an errow if the html element is not properly closed </>.

\Note:-*Attribute class is write as className in camlecasing because class is a keyword in react.

\Note:-*for attribute(in label) is replace with htmlFor.