JSX

Embedding JS in JSX

Use curly braces {} to embed JS expressions:

• Anything inside {} is JS evaluated at runtime

const name ="Hen"
const element =<h1>Hello, {name}!</h1>

const a =5
const b =10
const element =<p>{a} + {b} = {a + b}</p>

Nesting the JSX

• since JSX need a single root element)
• () optional but recommended

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Welcome name="Hen" />
      <p>JSX is awesome!</p>
    </div>
  )
}

React Fragment

• To group multiple JSX elements without adding an extra DOM node.
• JSX requires a single parent element, but you don’t want to render an extra <div> just for that.

1. Using <React.Fragment>:

import React from 'react'

function App() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Some text</p>
    </React.Fragment>
  )
}

export default App

1. Using shorthand <>:

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Some text</p>
    </>
  )
}