JSX

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"));

https://codesandbox.io/s/small-shadow-rbew2

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

</aside>

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

</aside>

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 = (
  <h2>
    Hello {name} part {1 + 1}
  </h2>
);

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

</aside>

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 = (
  <div>
    {element}
    {element2}
  </div>
);

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

https://codesandbox.io/s/react-jsx-expressions-1-xdwjh

You can use JSX as expressions