# JSX

# JSX syntax and HTML

const title = <h1>Welcome all!</h1>
When used in a React component, JSX will be rendered as HTML in the browser.

# JSX attributes

const example = <h1 id="example">JSX Atributes</h1>;

JSX attributes bilkul waise hi hai jaise HTML attributes main hota hai
<div class="red-color">text</div>
here class is class attribute(key) and "red-color" is value.

# Nested JSX elements

const myClasses = (
<a href="https://www.codecademy.com">
<h1>
Sign Up!
</h1>
</a>
);

# Multiline JSX Expression

const myList = (
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
);
multiple lines must be wrapped in parentheses: ( and ).

# ReactDOM JavaScript library
ReactDOM.render(
<h1>This is an example.</h1>,
document.getElementById('app')
);
The JavaScript library react-dom, sometimes called ReactDOM,

# JSX className
// When rendered, this JSX expression...
const heading = <h1 className="large-heading">Codecademy</h1>;

// ...will be rendered as this HTML
<h1 class="large-heading">Codecademy</h1>
you can’t use the word class, use the word className.because class in reserved in javascript.

# JSX empty elements syntax
<br />
<img src="example_url" />
In JSX, empty elements must explicitly be closed using a closing slash at the end of their tag: <tagName />.

# JSX conditionals

// Using ternary operator
const headline = (
<h1>
{ age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
</h1>
);

// Using if/else outside of JSX
let text;

if (age >= drinkingAge) { text = 'Buy Drink' }
else { text = 'Do Teen Stuff' }

const headline = <h1>{ text }</h1>

// Using && operator. Renders as empty div if length is 0
const unreadMessages = [ 'hello?', 'remember me!'];

const update = (
<div>
{unreadMessages.length > 0 &&
<h1>
You have {unreadMessages.length} unread messages.
</h1>
}
</div>
);
There are three ways to express conditionals for use with JSX elements:

1-a ternary within curly braces in JSX
2-an if statement outside a JSX element, or
3-the && operator.

# Embedding JavaScript in JSX

let expr = <h1>{10 * 10}</h1>;
The embedded JavaScript expression must be wrapped in curly braces.

In the provided example, we are embedding the JavaScript expression 10 * 10 within the <h1> tag. When this JSX expression is rendered to the DOM, the embedded JavaScript expression is evaluated and rendered as 100 as the content of the <h1> tag.