JSX and the Virtual DOM Slides

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

ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);

Resulting ReactDOM code

This is the ReactDOM code the JSX creates

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, React!'
), document.getElementById('root'));

Resulting HTML in the DOM

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

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 (
    <h1>
      Hello, {this.state.firstName + ' ' + this.state.lastName}
    </h1>
  )

}

export default App

[menu]

/