---
# System prepended metadata

title: JSX

---

# 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.


