Class 26 Component Based UI

Component Based UI

Resource - React Hello World

Resource - Introducing JSX

Example of JSX

const element = <h1>Hello, world!</h1>;

What is JSX?

JSX is a syntax extension of JavaScript commonly used with React to describe what the UI should look like.

You can put any valid JavaScript expression inside the curly braces in JSX.

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

Resource - Rendering Elements

Elements

An element describes what you want to see on the screen.

Elements are the smallest building blocks of React apps.

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Example of a React Element

const element = <h1>Hello, world</h1>;

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

To render a React element into a root DOM node, pass both to ReactDOM.render():

const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));