Use JSX effectively with React

Notes:

Use variables with curly braces for dynamic variables
- as attributes/props
- and in children

const myClassNames = 'greeting'
const myChildren = ['Hello ', <em>React with JSX</em>]
const element = <div className={myClassNames}>{myChildren}</div>

children can be composed of variables and strings

const myClassNames = 'greeting'
const myChildren = <em>React with JSX</em>
const element = (
  <div className={myClassNames}>Hello {myChildren}</div>
)

Unlike HTML, children can be passed as a prop

const myClassNames = 'greeting'
const myChildren = <em>React with JSX</em>
const element = (
  <div
    className={myClassNames}
    children={['Hello ', myChildren]}
  ></div>
)

And there are no nested in an element, we can use self-closing tags

const myClassNames = 'greeting'
const myChildren = <em>React with JSX</em>
const element = (
  <div
    className={myClassNames}
    children={['Hello ', myChildren]}
  />
)

If we have an object full of props, we can use JSX Spread to pass them all a React element all at once

const myClassNames = 'greeting'
const myChildren = <em>React with JSX</em>
const props = {
  className: myClassNames,
  children: ['Hello ', myChildren],
}
const element = <div {...props} />

Values can still be applied before and after JSX spread.
- When applied before, they will be applied first and merged with other props

const element = <div id="foo" {...props} />

But they will lose out to props that are spread

const props = {
  id: 'bar',
  className: myClassNames,
  children: ['Hello ', myChildren],
}
const element = <div id="foo" {...props} />

However, anything applied after JSX spread will “win out”
- So we can ensure that the foo id is applied by adding it after the spread

const props = {
  id: 'bar',
  className: myClassNames,
  children: ['Hello ', myChildren],
}
const element = <div {...props} id="foo" />

GPT4 take

Create a User Interface with React’s JSX syntax

In this lesson, we’ll see how JSX transforms our development experience with React by allowing us to write our components in a syntax similar to HTML.

Steps:

Add the Babel script to your HTML to enable in-browser JSX processing.

<!-- Include Babel to process JSX -->
<script
  type="module"
  src="https://esm.sh/@babel/standalone"
></script>

Modify the script type for your React component to be processed by Babel.

<!-- This script will now be processed by Babel -->
<script type="text/babel">

Replace the React.createElement call with JSX syntax.

<!-- JSX makes your component declaration much cleaner -->
const element = <div className="greeting">Hello <em>React with JSX</em></div>;

Refresh your browser to see the updated UI.

By following these steps, you’ve just leveled up your React game by integrating JSX into your project!

Note: This setup is ideal for learning and development. For production, ensure to precompile your JSX for performance and reliability.

Final Code:

<body>
  <div id="root"></div>
  <script
    type="module"
    src="https://esm.sh/@babel/standalone"
  ></script>
  <script type="text/babel">
    import React from 'https://esm.sh/[email protected]'
    import ReactDOM from 'https://esm.sh/[email protected]/client'

    const rootElement = document.getElementById('root')
    const element = (
      <div className="greeting">
        Hello <em>React with JSX</em>
      </div>
    )

    ReactDOM.createRoot(rootElement).render(element)
  </script>
</body>