学习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(
    
);

01类组件

import React from "react";

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

export default App

02函数组件 

function App (){
    return 

        hello functional Component
    
}
// 无状态state组件 16.8版本之前  ，之后引用react hooks 写状态写属性
export default App

03嵌套组件 

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

// 建议统一一种写法 

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

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

export default class App extends Component {
  render() {
    return (
      

        
        
        
      
    )
  }
}

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 (
      

        {10+20}
        {myname}
        {10>20?'aaa':"bbb"}

        
111
        
222
    
        {/* react推荐我们使用行内样式，因为react觉得每一个组件都是一个独立的整体 */}
        
333 警告：class写成calssName
  
        
555

        用户名：警告：for写成htmlFor
        

      
    )
  }
}

.css文件

.active{

    background: blue;

}

#myapp{

    background-color: red;

}