React组件与事件的创建使用教程

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 创建 函数式组件
// 普通函数或者箭头函数创建组件，首字母大写
// 组件必须要有返回值
function Music() {
  return (
    <div>
      <h1>haha</h1>
    </div>
  )
}
const VNode = (
  <div>
    <Music></Music>
  </div>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2.
class Hello extends React.Component {
  render() {
    return <h1>哈哈</h1>
  }
}
const VNode = (
  <>
    <Hello></Hello>
  </>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

const Hello = () => <h1>我是hello组件</h1>
export default Hello

import React from 'react'
class Home extends React.Component {
  render() {
    return <h2>home</h2>
  }
}
export default Home

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 导入组件
import Hello from './components/hello'
import Home from './components/home'
// 2. 创建虚拟DOM
const App = (
  <>
    <Hello></Hello>
    <Home></Home>
  </>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(App)

// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 函数组件  没有状态  仅仅做一些数据展示的工作，可以使用函数组件
// function App() {
//   return (
//     <div>我是组件</div>
//   )
// }
// 类组件  有状态  如果有状态，状态需要切换，更新视图 用类组件
class App extends React.Component {
  render() {
    return (
      <h1>我是类组件</h1>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 类组件  有状态  如果有状态，状态需要切换，更新视图 用类组件
class App extends React.Component {
  // state节点中提供状态
  // 通过 this.state.xxx 来获取状态
  state = {
    name: 'Tt',
    age: 17
  }
  render() {
    return (
      <h1>{this.state.name} ----- {this.state.age}</h1>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 类组件  有状态  如果有状态，状态需要切换，更新视图 用类组件
class App extends React.Component {
  // state节点中提供状态    通过 this.state.xxx 来获取状态
  state = {
    name: 'Tt',
    age: 17
  }
  // 提供一些方法
  handleClick() {
    console.log('点击');
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)