学习react day02

（1）jsx 即 javascript+xml 其实就是JavaScript对象

JSX——使用react构造组件，bable进行编译 ==> JavaScript对象——ReactDom.render() ==> DOM元素==>插入页面

（2）创建组件

import React from 'react'
import ReactDOM from 'react-dom/client'; // 把react组件渲染到页面

// import App from './01-base/01-class组件'
// import App from './01-base/02-函数式组件'
// import App from './01-base/03-嵌套组件'
import App from './01-base/04-组件样式'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

01类组件

import React from "react";

// 类组件
class App extends React.Component{
    render(){
        return <div>hello class Component</div>
    }
}

export default App

02函数组件 

function App (){
    return <div>
        hello functional Component
    </div>
}
// 无状态state组件 16.8版本之前  ，之后引用react hooks 写状态写属性
export default App

03嵌套组件 

import React, { Component } from 'react'  // rcc 快捷模板 

// 建议统一一种写法 

// 类组件
class Child extends Component{
    render(){
        return <div> Navbar-Child</div>
    }
}
class Navbar extends Component{
    render(){
        return <div>Navbar
            <Child/>
        </div>
    }
}

// 函数组件
function Swiper(){
    return <div>swiper</div>
}
// 箭头函数写法
const Tabbar = ()=> <div>Tabbar</div>

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

04组件样式  

import React, { Component } from 'react'
import './css/01-index.css' // 导入css模块 webpack支持

export default class App extends Component {
  render() {
    var myname = '王权富贵'
    var obj ={
      background:'yellow',
      fontSize:'30px' // font-size 改成驼峰写法
    }
    return (
      <div>
        {10+20}
        {myname}
        {10>20?'aaa':"bbb"}

        <div style={obj}>111</div>
        <div style={{background:'red'}}>222</div>    
        {/* react推荐我们使用行内样式，因为react觉得每一个组件都是一个独立的整体 */}
        <div className='active'>333 警告：class写成calssName</div>  
        <div id='myapp'>555</div>

        <label htmlFor='username'>用户名：警告：for写成htmlFor</label>
        <input type='text' id='username'></input>

      </div>
    )
  }
}

.css文件

.active{

    background: blue;

}

#myapp{

    background-color: red;

}