Tutorials/React/GET STARTED
Lesson

React JSX

GET STARTED/React
Previous TutorialsNext

React JSX

JSX is a powerful syntax extension in React that makes writing and managing UI components easier and more readable.

  • JSX means JavaScript XML

  • It allows writing HTML inside JavaScript

  • It makes React code simple and readable

  • Without JSX we use createElement

  • With JSX we write HTML directly

javascript
const element = <h1>I Love JSX</h1>   // with JSX

const element = React.createElement("h1", {}, "I do not use JSX")  // without JSX

JSX Expressions

We can use JavaScript inside curly braces

javascript
const element = <h1>{5 + 5}</h1>

Multiple Lines HTML

Use parentheses for multiple lines

javascript
const element = (
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
)

One Parent Element

JSX must have one parent element

Wrong

html
<h1>Hello</h1>
<p>Hi</p>

Correct

html
<div>
  <h1>Hello</h1>
  <p>Hi</p>
</div>

Fragment

We can use empty tag instead of div

html
<>
  <h1>Hello</h1>
  <p>Hi</p>
</>

Close Tags

All tags must be closed

html
<input type="text" />

className

Use className instead of class

html
<h1 className="title">Hello</h1>

Comments in JSX

Use this format

html
{/* This is comment */}

JSX in Components

Components return JSX

javascript
function Car() {
  return <h1>My Car</h1>
}

JSX with Variables

javascript
function Car() {
  const brand = "Ford"
  return <h1>{brand}</h1>
}

React JSX If Statements

We cannot write if statement directly inside JSX

Option 1 Use if outside JSX

javascript
function Fruit() {
  const x = 5
  let result = "Apple"

  if (x < 10) {
    result = "Banana"
  }

  return <h1>{result}</h1>
}

Option 2 Use ternary operator

javascript
function Fruit() {
  const x = 5
  return <h1>{x < 10 ? "Banana" : "Apple"}</h1>
}

Always use curly braces for JavaScript inside JSX

Previous TutorialsNext