Introduction


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

JSX is a syntax extension to JavaScript.
use it with React to describe what the UI should look like
JSX produces React elements.
React doesn't require 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.

Embedding Expressions


    const name = 'Josh Perez';
    const element = <h1>Hello, {name}</h1>;

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

Embedding result of calling a function


    function formatName(user) { return user.firstName + ' ' + user.lastName; }

    const user = { firstName: 'Harper', lastName: 'Perez' };
    const element = ( <h1>Hello, {formatName(user)}!</h1> );

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

JSX is an Expression Too


    function getGreeting(user) {
        if (user) { return <h1>Hello, {formatName(user)}!</h1>; }
        return <h1>Hello, Stranger.</h1>;
    }


    const element = <img src={user.avatarUrl}></img>;

Specifying Attributes with JSX


    const element = <div tabIndex="0"></div>;

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.


    const element = ( <h1 className="greeting">Hello, world!</h1> );

compiles to


    const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this: //These objects are called React elements.


    const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };

// You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
// splitting JSX over multiple line isn't required, it's recommended wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.
// You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
// By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.