| Interactive Media Design

Introduction to JSX

Refactoring elements using JSXRefactoring elements using JSXThis video is part of the LinkedIn Learning course React.js Essential Training

Writing JSX

JSXopen in new window, which stands for JavaScript and XML, is a syntax extension for JavaScript and the recommended way to describe UI elements in a React application.

While JSX may look like HTML, it is more of a template language that comes with the full power of JavaScript. In addition to providing an alternative to the createElement method, JSX can also directly execute JavaScript expressions.

The following is an example of JSX.

<body>
  <div id="root"></div>
  <script>
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(<h1>Hello, World</h1>)
  </script>
</body>




 


However, the above code when not work on its own. The browser doesn't understand JSX directly. Instead, it must be compiled into something the browser does understand. This is where Babel comes in.

Incorporating Babel

Incorporating BabelIncorporating BabelThis video is part of the LinkedIn Learning course React.js Essential Training

Babelopen in new window is a popular JavaScript compiler that is used by many JavaScript libraries and frameworks to convert code into something the browser can understand.

The fastest way to get started using Babel is with a CDN link. Just like with the React and ReactDOM scripts, we will add Babel to the <head> tag.

<head>
  <meta charset="UTF-8">
  <title>React</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone@7.19.1/babel.min.js"></script>
</head>





 

After adding Babel, the next step is to update the <script> tag containing our React code. To inform Babel that our code needs to be compiled, we must add a type attribute with the value of text/babel to the <script> tag.

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(<h1>Hello, World</h1>)
  </script>
</body>


 




JSX is also not limited to a single element. It is possible to create multiple elements at the same. For example, like a list.

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
      <ul>
        <li>red</li>
        <li>blue</li>
        <li>green</li>
      </ul>
    )
  </script>
</body>




 
 
 
 
 
 
 


Try it yourself on CodePenopen in new window

Embedding JSX expressions

Working with JSX SyntaxWorking with JSX SyntaxThis video is part of the LinkedIn Learning course React.js Essential Training

JSX is not limited to creating HTML elements. It can also output a variable's value, by wrapping the variable in curly braces.

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))
    const name = 'Tom'
    root.render(<h1>Hello, {name}</h1>)
  </script>
</body>




 
 


The same can be accomplished with any valid JavaScript expression. For example, we can embed the result of calling a function.

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))
    function formatName(user) {
      return user.firstName + ' ' + user.lastName
    }

    const user = {
      firstName: 'Tom',
      lastName: 'Riddle'
    }

    root.render(<h1>Hello, {formatName(user)}</h1>)
  </script>
</body>













 


Try it yourself on CodePenopen in new window