react学习笔记（2）

    JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

babel的jsx编译器，就是负责将

ReactDOM. render( <div>

    11111111

</div>，document。getE lementById("root" ))

这样的代码

转换成这样

ReactDOM. render (React. createElement("div",{

    id:aaa

    className: "bbb"

}, " 111111111" );, document . getElementById(" root") )

所谓的JSX其实就是JavaScript对象，所以使用React和JSX的时候一定要经过编译的过程:

jSX -使用react构造组件，bable进行编译- -> JavaScript对象--ReactDOM. render() - >DOM元素->

插入页面

继承的概念

class Test{
    constructer(){
        this.a = 1
    }
    testa(){
        console.log('testa')
    }
}
class ChildTest extends Test {
    testb(){
        console.log('testb')
    }
}

这里的ChildTest就是继承了Test组件，于是他实际上是这样的

class ChildTest extends Test {
    constructer(){
        this.a = 1
    }
    testa(){
        console.log('testa')
    }
    testb(){
        console.log('testb')
    }
}

 2.标准的组件格式

import React from "react";

class App extends React.Component{
    render(){
        return <div>Hello React!</div>
    }
}
export default App

首先导入React，其次创建名为App的class，这里也可以交其他名字，只要保持该名字与最后导出的一致即可，即export default  后面跟的名字与其一致

该组件继承了React里的Component组件。写一个render函数即可渲染，必须是render函数，不能用其他名字

当组件内return和标签不在一行时

import React from "react";

class App extends React.Component{
    render(){
        return 
        <div>Hello React!</div>
    }
}
export default App

由于js语法规定,return返回的是空值，为了解决这一问题可以这样写

import React from "react";

class App extends React.Component{
    render(){
        return (
            <div>Hello React!</div>
        )
    }
}
export default App

函数式组件

function App(){
    return <div>Hello function！</div>
}
export default App

组件的嵌套

class Navbar extends Component{
    render(){
        return <div>Navbar</div>
    }
}
function Swiper(){
    return <div>Swiper</div>
}
const Tabber = ()=><div>Tabbar</div>
export default class App extends Component {
  render() {
    return (
      <div>
        <Navbar></Navbar>
        <Swiper></Swiper>
        <Tabbar></Tabbar>
      </div>
    )
  }
}