React(JSX语法)-----JSX基本语法

JSX------HTML tags vs React Components：

　　1.To render a html tag,just use lower-case tag names in JSX;　

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

　　2.To render a React Component,just create a local variable that starts with an upper-case latter;

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

　　

JSX-------The Transform

　　React JSX transforms from an XML-like syntax into native JS xml elements,attributes and children are transformed into arguments to React.createElement

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

　　

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

　　

Javascript Expressions

　　1.Attribute Expressions:To use a JS expression as an attribute value,wrap the expression in a pair of curly braces({})instead of quotes("").

 

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

 

　　2.Child Expressions:Likewise,JS expressions may be used to express children:

/ Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

　　3.Comments:it's easy to add comments within youe JSX,they are just JS expressions. you just need to bo careful to put {} around the comments when you are within the children sction of a tag.

var content = (
  <Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);