JSX learning

basic.jsx

var Nav, Child;
var app = <Nav name="testNav" />;     // XML elements, attributes and children are transformed into arguments that are passed to React.createElement

// JSX also allows specifying children using XML syntax
var nestedApp = <Nav name="testNavNested"><Child name="child-in-Nav"><Nav name="nested-nav" /> </Child></Nav>;

// Namespaced Components
// namespaced components let you use one component that has other components as attributes
var MyFormComponent = React.createClass({ });
// you just need to create your "sub-components" as attributes of the main component:
MyFormComponent.Row = React.createClass({ });
MyFormComponent.Label = React.createClass({  });
MyFormComponent.Input = React.createClass({  });

var Form = MyFormComponent;
var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

// JavaScript Expressions
// Attribute Expressions
// To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces ({}) instead of quotes ("").
var Person;
var person = <Person name={window.isLoggedIn ? window.name : ''} />;

// Boolean Attributes
// Omitting the value of an attribute causes JSX to treat it as true. To pass false an attribute expression must be used.
<input type="button" disabled />;
<input type="button" disabled={true} />;
<input type="button" disabled={false} />;

// Child Expressions
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

basic_compiled.js

"use strict";
// codes compiled by Babel: https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2
var Nav, Child;
var app = React.createElement(Nav, { name: "testNav" }); // XML elements, attributes and children are transformed into arguments that are passed to React.createElement

// JSX also allows specifying children using XML syntax
var nestedApp = React.createElement(
  Nav,
  { name: "testNavNested" },
  React.createElement(
    Child,
    { name: "child-in-Nav" },
    React.createElement(Nav, { name: "nested-nav" }),
    " "
  )
);

// Namespaced Components
// namespaced components let you use one component that has other components as attributes
var MyFormComponent = React.createClass({
  displayName: "MyFormComponent"
});
// you just need to create your "sub-components" as attributes of the main component:
MyFormComponent.Row = React.createClass({
  displayName: "Row"
});
MyFormComponent.Label = React.createClass({
  displayName: "Label"
});
MyFormComponent.Input = React.createClass({
  displayName: "Input"
});

var Form = MyFormComponent;
var App = React.createElement(
  Form,
  null,
  React.createElement(
    Form.Row,
    null,
    React.createElement(Form.Label, null),
    React.createElement(Form.Input, null)
  )
);

var person = React.createElement(Person, { name: window.isLoggedIn ? window.name : '' });

React.createElement("input", { type: "button", disabled: true });
React.createElement("input", { type: "button", disabled: true });
React.createElement("input", { type: "button", disabled: false });

var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav, null) : React.createElement(Login, null)
);