20-组件.html

<div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <!-- 也有引browser.js 本质上也是babel-->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
    //App是自定义组件，如何定义？三种方式
    //第一种，函数式组件，这种方式性能好，但有局限性
    //函数名为组件名（组件名的首字母必须大写,否则报错）
      function App(props){
        //参数props适用于存储组件属性值的对象
        //组件的属性就是参数，属性会变成一个个键值形成一个对象作为参数传给函数
        //组件的属性都自动会
        console.log(props)
        //组件函数内必须要有return,将组件的模板（JSX编写）返回
        //组件也必须要有根元素对象
        return (<h1>hello,component</h1>)
      }
      const a="我是变量"
      //给了个content属性，这个属性可以是字符串也可以是变量
    ReactDOM.render(<App content='我是content给你的数据' value={a }></App>,document.getElementById('root'))
    </script>
  

 

21-组件的定义方式2.html

<div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <!-- 也有引browser.js 本质上也是babel-->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
    //App是自定义组件，如何定义？三种方式
    //第一种，函数式组件，第二种方式，用class声明类定义
    //类名即组件名，组件名的首字母必须大写
     class   App extends React.Component{
       //默认的构造
       //要写一些自己的属性，就要显示的写出来constructor
       constructor(props) {
        super(props);//调用父类的构造函数，不继承属性就拿不到
        console.log(props)
       }
       //用类方式i定义的组件必须要有render函数
       render(){
         console.log(this.props)//this表示当前类的一个实例
         //render的函数中步需将组件的模板JSX返回
         return (<div>
          <p>{this.props.value}</p>
          <h1>{this.props.content}</h1>
          </div>
          
          )
       }
     }
    ReactDOM.render(<App content='我是content给你的数据' value={a }></App>,document.getElementById('root'))
    //<App></App>这里是创建一个实例的
    </script>