Reading Class 18 - meron-401n14/seattle-javascript-401n14 GitHub Wiki

JSX, it is a syntax extension to JavaScript. It may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React "elements".

Why JSX? React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called "components" that contain both.

React doesn't require using JSX, but most people find it helpful as visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

Example: Embedding Expressions in JSX

Const name 'Sarah Smalls'; Const element = <h1> Hello, {name} </h1>;

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

In the example above, declare a variable called name and then use it inside JSX by wrapping it in curly braces.