import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// WHAT IS THIS??!!!
**const element = <h1>Hello World</h1>;**

ReactDOM.render(element, document.getElementById("root"));


What is JSX

<aside> 💡 If you've done PHP, JSP, ASP or Java servlet, JSX is a similar concept of being able to embed and evaluate expressions on your webpage

Sample PHP


Sidenote: ES6 const and let

<aside> 💡 ES6 replaces var with block-scoped const and let

const for constants/read-only values let for dynamic values


var x = 10;
// Here x is 10
  const x = 2;
  // Here x is 2
// Here x is 10

You can embed expressions in JSX

// embed variables or expressions
const name = "world";

const element = (
    Hello {name} part {1 + 1}

You can even evaluate function returns

// ....even function results
function formatUserInfo(user) {
  return user.name + ": " + user.email;

const user = {
  name: "Lenny",
  email: "[email protected]"

const element2 = <div>by {formatUserInfo(user)}</div>;

Sidenote: JS Objects

<aside> 💡 user is a JS object. It is a data structure with key-value pairs where:

You can think of them as like a HashMap in Java or a dictionary in Python


Since user is an object, we can access it's properties by traversing it:

You can embed JSX inside HTML elements

// render inside HTML elements
const container = (

ReactDOM.render(container, document.getElementById("root"));


You can use JSX as expressions