• Elements and components are the building blocks of React apps. Once you master them, you can create complex apps from small reusable pieces.
• JSX is a syntax extension to JavaScript, JSX produces React “elements”.
• After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

---

function getGreeting(user) {

if (user) {

return \<h1>Hello, {formatName(user)}!</h1>;

}

return <h1>Hello, Stranger.</h1>;

}

---

• React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
• With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

---

function tick() {

const element = (

<div>

<h1>Hello, world!</h1>

<h2>It is {new Date().toLocaleTimeString()}.</h2>

</div>

);

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

}

setInterval(tick, 1000);

---

It calls ReactDOM.render() every second from a setInterval() callback.