JSX for React.js

WARNING!

We assume you know HTML

<html>
    <head>
        <style>
            h1 { color: aliceblue}
        </style>
    </head>
    <body>
        <div id="root">
            <h1>Hello, world!</h1>
        </div>
    </body>
</html>

WARNING!

We assume you know HTML & JavaScript

   <html>**
       <head>
           <script src="*/react.js"></script>
           <script src="*/react-dom.js"></script>
           <style>
               h1 { color: aliceblue}
           </style>
       </head>
       <body>
           <div id="root"></div>
           <script>
               ReactDOM.render(
                   React.createElement("h1", null, "Hello, world!")
                   ,document.getElementById('root')
               );
           </script>
       </body>
   </html>

*https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/

** Example File: https://facebook.github.io/react/downloads/single-file-example.html

An excellent place to start is https://facebook.github.io/react/docs/hello-world.html

JSX is a XML-like syntax extension to ECMAScript without any defined semantics [*].

It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

Let's change realm from pure JavaScript to JSX

   <html>
       <head>
           <meta charset="UTF-8" />
           <script src="*/react/0.14.0/react.js"></script>
           <script src="*/react/0.14.0/react-dom.js"></script>
           <script src="*/babel-standalone/6.25.0/babel.min.js"></script>
       </head>
       <body>
           <div id="root"></div>
           <script type="text/babel">
               class Hello extends React.Component {
                   render() {
                       return <div>Hello {this.props.toWhat}</div>;
                   }
               }
               ReactDOM.render(
                   <Hello toWhat="World" />,
                   document.getElementById('root')
               );
           </script>
       </body>
   </html>

*https://cdnjs.cloudflare.com/ajax/libs/

JSX

JSX just provides syntactic sugar for the function:
- React.createElement(component, props, ...children)
React combines the markup and logic within the components
- In contradiction to the classical approach
JSX is an XML-like language that allows you to write markup directly in JS code
Indisputable benefit: Static Analysis.
- Flow library (dev. by Facebook) can be used here as well
- JSX and Flow allow you to quickly spot places with potential errors

Static Analysis: If you make an error in your JSX markup, the compiler will emit an error instead of continuing in silence. This helps by instantly catching typos and other silly errors.

Flow is a type-checking tool for JavaScript also developed by Facebook. It can parse code and check for common type errors such as implicit casting or null referencing.

Unlike TypeScript, which has a similar purpose, it does not require you to migrate to a new language and annotate your code for type checking to work. In Flow, type annotations are optional and can be used to provide additional hints to the analyzer. This makes Flow a good option if you would like to use static code analysis, but would like to avoid having to rewrite your existing code.

JSX Features

It is recommended for React but not a must !
It may remind you of a template language, but it comes with the full power of JS
You can embed any JavaScript expression in JSX by wrapping it in curly braces
- JSX expressions will be turned to valid JS expressions as well
It prevents Injection Attacks (it escapes HTML by default!)
It represents objects (for people who like object-oriented)

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

const user = {
    firstName: 'Hassan',
    lastName: 'Shavarani'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

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

Some JSX conventions

React Must Be in Scope even though React is not directly referenced from JavaScrip
React component can be referred using dot-notation from within JSX
User-Defined Components Must Be Capitalized
- React thinks <hello /> is an HTML tag because it's not capitalized
You cannot use a general expression as the React element type
- WRONG: <components[props.storyType] story={props.story} />
- RIGHT: <SpecificStory story={props.story} />
  - const SpecificStory = components[props.storyType];

Props in JSX:

You can pass any JavaScript expression as a prop, by surrounding it with {}
- You can pass a string literal as a prop
- If you pass no value for a prop, it defaults to true
- If you already have props as an object, and you want to pass it in JSX, you can use ... as a "spread" operator to pass the whole props object

function () {
    const props = {firstName: 'Ben', lastName: 'Hector'};
    return (
        <div>
            <MyComponent message={'hello world'} />
            <MyTextBox autocomplete />
            <Greeting {...props} />;
        </div>
    );
}

Children in JSX:

Expressions between an opening and a closing tag are passed to it as a special prop
- props.children
Several different ways to pass children
- String Literals as children: <MyComponent>Hello world!</MyComponent>
- JavaScript Expressions as Children
  - <ul>{todos.map((message) => <Item message={message} />)}</ul>
- Functions as Children
- false, null, undefined, and true are valid children. They simply don't render.
  - <div>{showHeader && <Header />}</div>
  - If you want to render them use casting {String(myVariable)}

White Spaces in JSX:

JSX removes whitespace at the beginning and ending of a line
It also removes blank lines
New lines adjacent to tags are removed
New lines that occur in the middle of string literals are condensed into a single space

White Spaces in JSX:

Same output for all of the tags below

<div>Hello World</div>

<div>
    Hello World
</div>

<div>
    Hello
    World
</div>

<div>

    Hello World
</div>

Any code in JSX is transformed into plain JavaScript/ECMAScript

Let's take a look at ES6 (ECMAScript2015), the most used version of JavaScript/ECMAScript, and how it compares the previous version.

Space	Forward
Right, Down, Page Down	Next slide
Left, Up, Page Up	Previous slide
P	Open presenter console
H	Toggle this help