128_React笔记2_JSX语法，组件书写方法

一，JSX语法：

1. 顾名思义：是一个看起来很像 XML 的 JavaScript 语法扩展
2. 一种 JavaScript 的语法扩展，完全是在 JavaScript 内部实现的。
3. 标签内的语法
   1. 表达式用{},例如：<h1>{1+1}</h1>
   2. 没有if和else，可以用三目运算符，例如：<h1>{i == 1 ? 'True!' : 'False'}</h1>
   3. 创建react组件用大驼峰，react组件实例化和html标签用小驼峰
      1. 小驼峰：var myDivElement = <div className="foo" />;
      2. 大驼峰：var MyComponent = React.createClass({/*...*/});
      3. 小驼峰：var myElement = <MyComponent someProperty={true} />;
   4. Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用

      1. 下面两种代码的作用是完全相同的：
         
         const element = (
           <h1 className="greeting">
             Hello, world!
           </h1>
         );
         
         
         const element = React.createElement(
           'h1',
           {className: 'greeting'},
           'Hello, world!'
         );

          

   5. 注释：
      1. 在标签内部的注释需要花括号
      2. 在标签外的的注释不能使用花括号

      3. ReactDOM.render(
             /*注释 */
             <h1>孙朝阳 {/*注释*/}</h1>,
             document.getElementById('example')
         );

          

4. 标签外的语法
   1. 行内样式:
      1. 属性是小驼峰，有联想，例如backgroundColor：'red'
      2.  

         1.  <div style={{fontSize: '40px',color:'green'}}>

             

   2. 页内样式：
      1. 属性是小驼峰，没有联想,例如backgroundColor：'red'
      2. ​​​​​​​

         1. import React, { Component } from 'react';
            export default class States extends Component {
                render() {
                  return (
                      <div style={{myStyle}}>哈哈</div>
                   
                  )
                }
            }
            
            var myStyle = {
              fontSize: 50,
              color: '#FF0000'
            };

             

   3. 行内样式和页内样式共用

      1. import React, { Component } from 'react';
         export default class States extends Component {
             render() {
               return (
                   <div style={{myStyle,fontSize: '40px',color:'green'}}>哈哈</div>
               )
             }
         }
         
         var myStyle = {
           fontSize: 50,
           color: '#FF0000'
         };

          

   4. 外部样式：属性是小横线连接，有联想
      1. 例如： background-color：'red'
      2.  

二，组件

1. 函数定义组件

   1. 定义：
      function HelloMessage(props) {
          return <h1>Hello World!</h1>;
      }
      
      使用：
      {HelloMessage()}

       

2. const使用组件

   1. 定义：
      function HelloMessage(props) {
          return <h1>Hello World!</h1>;
      }
      const element = <HelloMessage />
      
      使用：
      {element}

       

3. class类定义组件

   1. 定义：
      class Welcome extends React.Component {
        render() {
          return <h1>Hello World!</h1>;
        }
      }
      使用：
      < Welcome />