How to write JSX and convert it to runnable React using Babel-Standalone in the browser.

What is JSX?

  • Mixes HTML and JavaScript together
  • Makes building the UI easier
  • Bound by HTML tags
  • Is transformed into ReactDom code
  • Is used everyday in React

Starting JSX

  • This is JSX Code
  <h1>Hello, React!</h1>,

Resulting ReactDOM code

  • This is the ReactDOM code the JSX creates
  'Hello, React!'
), document.getElementById('root'));

Resulting HTML in the DOM

<div id="root">
  <h1>Hello, React!</h1>

Key Concepts

  • JSX feels like HTML (inside of JavaScript)
  • JSX compiles to ReactDOM code
  • JSX is a 'syntax extension' to JavaScript
  • React can only render a single JSX component
    • but that component can have as many children as you want
  • ReactDOM builds the HTML from the virtual DOM

JSX can embed JavaScript expressions

  • When writing JSX you can escape back to JavaScript using curly braces {}
  • Any JavaScript expression can be used in JSX
    • but if the expresion doesn't return anything, nothing will be displayed

Lab: React Greeter

Let's create a page that greets a user by name.

  • create a new React app using create-react-app
  • add the following object to App.js:
let user = {
  firstName: Ada,
  lastName: Lovelace
  • Greet your user by their first and last name
  • When you change the object the greeting should change

React Greeter extended

Hard coding a user object is OK, but it's not ideal. Let's look a little ahead and use state to store our user's name

  • import useState from the React package
  • set the first an last names of our user by passing them to useState
    • const [firstName, setFirstName] = useState('Ada')
    • const [lastName, setLastName] = useState('Lovelace)

More on Hooks, and setState later!

React Greeter: Final Product

The App.js component should now look something like this:

import React from 'react'

function App (){

  const [firstName, setFirstName] = useState('Ada')
  const [lastName, setLastName] = useState('Lovelace)

  return (
      Hello, {this.state.firstName + ' ' + this.state.lastName}


export default App