前端框架React

• JSX produces React "elements".
  
• JSX用于产生React元素。

• You can embed any JavaScript expression in JSX by wrapping it in curly braces.
  
• 可以在花括号里面嵌入js表达式。

• 2.HTML 标签 和 React 组件

  在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

  要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。

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

  要渲染 React 模块，只需创建一个大写字母开头的本地变量。

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

  React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。

  
  

• 注意，react声明组件时，第一个字母必须大写。

  当JSX包含多行代码时，将它们包含在小括号中。

• const user = {  firstName: 'Oscar',  lastName: 'Liu'};

  这段代码是定义一个对象变量。
• 
  

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

  当JSX包含多行代码时，将它们包含在小括号中。在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。！！！！！！！！！！！！！！！！！

• We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.
  
• 即使只有一行JSX代码，我们仍然建议将JSX代码包裹在小括号里面。

• After compilation, JSX expressions become regular JavaScript objects.

  This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

  编译完，JSX表达式变成了普通的JS对象。
• 这个就是说你可以在if和for循环里面使用JSX，也可以把JSX分配给变量，接受JSX作为参数，在function里面return JSX。

1. 用JSX指定属性

You may also use curly braces to embed a JavaScript expression in an attribute

用花括号括起表达式作为属性的值，这种做法就是用JSX指定属性。

constelement=<imgsrc={user.avatarUrl}></img>;

You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

不要同时在一个属性里面使用“”和花括号，就是不要混用。

• 用JSX指定Children
• If a tag is empty, you may close it immediately with />
  
• 如果一个tag是空，你可以用/>立刻close它。
• JSX tags may contain children
  
• JSX标签有可能包含Children

• const element = (  <div>    <h1>Hello!</h1>    <h2>Good to see you here.</h2>  </div>);

• 
  
• 
  
• 
  

  Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

  For example, class becomes className in JSX, and tabindex becomes tabIndex.

  
  
  

React DOM中像html属性名字我们用驼峰原则来命名。