React JSX

JSX Rules

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like. It allows you to write HTML-like code inside JavaScript, which is then transformed into React elements.

JSX must return only one parent element.

return ( 
    <div> 
        <h1>Heading</h1>
    </div> 
);

Use className instead of class

<div className="container">Hello</div>

JavaScript Expressions in `{}`

let username = 'Anuja'
function Hello(){
    return(
        <>
            <h1>Hey, My name is {username}</h1>
        </>
    )
}
export default Hello

Self-Closing Tags Must Be Closed

<img src="image.jpg" alt="desc" />

Fragments to Avoid Extra Nodes

return ( 
    <> 
        <h1>Digital Academy</h1> 
    </> 
);