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
<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
</aside>
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
// embed variables or expressions
const name = "world";
const element = (
<h2>
Hello {name} part {1 + 1}
</h2>
);
// ....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>;
<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:
user['name']
oruser.name
...
// 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