前端框架React - JSX(一)

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

• You can embed anyJavaScript expressionin 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, documentbody);
      
      

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

   MyComponentcreateClass({/*...*/});

• myElement < someProperty={true}/>;
• myElement 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 ofautomatic semicolon insertion.
  
• 即使只有一行JSX代码，我们仍然建议将JSX代码包裹在小括号里面。

• After compilation,JSX expressions become regular JavaScript objects.

  This means that you can use JSX inside ofifstatements and@H_404_193@forloops,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指定属性。

const element =<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@H_404_193@/>
  
• 如果一个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@H_404_193@camelCaseproperty naming convention instead of HTML attribute names.

  For example,@H_404_193@classbecomesclassNamein JSX,and@H_404_193@tabindexbecomestabIndex.

  
  
  

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