let name = 'John'
let VDOM = <h1>{name}</h1>

let VDOM = <h1 className='title'>Hello</h1>

let VDOM = (
    <h1 style={{
        color:'#fff',
        border:"1px solid #000",
        fontSize:"14px"
    }}>
        Hello World
    </h1>
)

const data = ['AAA', 'BBB', 'CCC']
const VDOM = (
  <div>
    <ul>
      {data.map(item => (<li key={item}>{item}</li>))}
    </ul>
  </div>
)
ReactDOM.render(VDOM, document.getElementById('test'))

class MyComponent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            country:"UK",
            color:'#00ffff'
        }
        // bind指定上下文
        this.sayHello = this.sayHello.bind(this)
    }
    render(){
        return(
            <h1 style={{color:this.state.color}} onClick={this.sayHello}>
                {this.state.country === 'UK'?'Hello':'こにちは'}
            </h1>
        )
    }
    sayHello(){
        if(this.state.country == 'UK'){
            this.state.country = 'Japan'
        }else{
            this.state.country = 'UK'
        }
        this.setState({
            country:this.state.country
        })
    }
}

class MyComponent extends React.Component{
  state = { // 类中直接定义state
    country:'UK',
    color:'#00ffff'
  }
  sayHello = ()=>{ //类中定义事件回调函数一定要用箭头函数
    if(this.state.country == 'UK'){
      this.state.country = 'Japan'
    }else{
      this.state.country = 'UK'
    }
    this.setState({
      country:this.state.country
    })
  }
  render(){
    return(
      <h1 style={{color:this.state.color}} onClick={this.sayHello}>
        {this.state.country === 'UK'?'Hello':'こにちは '}
      </h1>
    )
  }
}
ReactDOM.render(<MyComponent/>,document.getElementById('root'))

const sayHello = ()=>console.log('sayHello')
class Person extends React.Component{
    render(){
        return (
            <ul>
                <li onClick={this.props.sayHello}>Name：{this.props.name}</li>
                <li>Age：{this.props.age+1}</li>
                <li>Sex：{this.props.sex}</li>
            </ul>
        )
    }
}
React.render( // 通过标签的属性实现props值的传入
    <Person name={"aaa"} age={19} sayHello={sayHello}/>,
    document.getElementById('root')
)

let p = {
    name:'bbb',
    age:20,
    sex:'male'
}
React.render( // 此处使用解构语法
    <Person {...p}/>,
    document.getElementById('root')
)

<Component {...obj}/>

Person.propTypes = {
    name:PropTypes.string.isRequired,
    age:PropTypes.number,
    sex:PropTypes.string,
    sayHello:PropTypes.func
}

Person.propTypes = {
    // 类型限制
}

{
    age:PropTypes.number
}

{
    name:PropTypes.string.isRequired // 必须字符串
}

{
    sayHello:PropTypes.func
}

class Character extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    makeQitatapu: PropTypes.func
  }
  static defaultProps = {
    sex: 'male'
  }

  render() {
    return (
      <ul>
        <li onClick={this.props.makeQitatapu}>Name：{this.props.name}</li>
        <li>Age：{this.props.age + 1}</li>
        <li>Sex：{this.props.sex}</li>
      </ul>
    )
  }
}
function makeQitatapu(){
    // to do
}
ReactDOM.render(<Person name="aaa" age={19} sayHello={sayHello} />, document.getElementById('root'))

function MyComponent(props){
    return (
      <div>
        <h1>Hello {props.name}</h1>
        <h2>{props.age}</h2>
      </div>
    )
}
MyComponent.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
}
MyComponent.defaultProps = {
    age: 20
}
ReactDOM.render(<MyComponent name={'Jerry'} />,document.getElementById('root'))

class MyComponent extends React.Component{
    alertInput = ()=>{
        this.alert(this.refs.input.value)
    }
    render(){
        return(
            <div>
              {/* 定义字符串格式的ref */}
              <input ref='input' onBlur={this.alertInput}/>
            </div>
        )
    }
}

class MyComponent extends React.Component{
    bindRef = (currentNode)=>{
        this.input2Ref = currentNode
    }
    render(){
        return (
           <div>
             {/% 内联样式 %/}
             <input ref={currentNode=>this.input1Ref = currentNode}/>
             {/% 绑定样式 %/}
             <input ref={this.bindRef}/>
           </div>
        )
    }
}

class MyComponent extends React.Component{
  state = {
      value:''
  }
  myRef = React.creaeRef()
  myRef2 = React.createRef()
  setValue = ()=>{
      this.setState({
        value:this.myRef.current.value
      })
  }
  render(){
      return(
          <div>
            <input ref={myRef} onBlur={this.setValue} />
            <input ref={myRef2} />
            <h1>{this.state.value}</h1>
          </div>
      )
  }
}

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'

// 创建根节点
const root = ReactDOM.createRoot(document.getElementById('root'))
// 渲染根组件
root.render(
  // React.StricMode用于检查App内子组件是否合理
  // 如 字符串类型ref 等 类似Eslint
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
// 引入reportWebVitals文件
// 依赖web-vitals库 用于记录页面性能
reportWebVitals();

axios.get('http://localhost:5000/simData')

function FunHelloComp(){
  return <div>Func Comp</div>
}

class ClassHelloComp extends React.Component{
  constructor(prop) {
    super(prop);
  }
  render(){
    return <div>Class Comp</div>
  }
}

class App extends React.PureComponent{}

ChildComp.propTypes = {
    // react中，类型验证必须是个函数
    mes: function(props){
        if(typeof(props.mes) !== 'string'){
            throw new Error("Mes must be a string");
        }
    },
    count: PropTypes.number
}

ChildComp.defaultProps = {
    mes:"Default Mes"
}

import childStyle from "child.module.css";
//.....
<div className={childStyle.title}></div>

const childRef = React.createRef();
childRef.current.addCount() // current代表子组件的this

// 父组件
export const Context1 = React.createContext();
export default class Parent extends  React.PureComponent {
    render(){
        return (
            <>
              <Context1.Provider value={{key:'123',label:'外太空'}} >
                  <Child ref={childRef}></Child>
              </Context1.Provider>
            </>
        )
    }
}

// 子组件
export default class Parent extends  React.PureComponent {
    render(){
        return <GrandSon/>
    }
}

// 孙组件
import {Context1} from "./Parent.js";
export default class GrandSon extends  React.PureComponent {
    render(){
        return (
              <Context1.Consumer>
                {value=>{return (
                        <div>
                          <p>{value.key}</p>
                          <p>{value.label}</p>
                        </div>
                )}}
              </Context1.Consumer>
        )
    }
}

<HashRouter>
  <App/>
</HashRouter>

<Route path="/wish" element={token?<Wish/>:<Navigate to="/home"></Navigate>}>
  <Route path="createWish" element={<CreateWish></CreateWish>}></Route>
  <Route path="destroyWish" element={<DestroyWish></DestroyWish>}></Route>
</Route>

export default function Wish(props){
  return (
          <div>
            Best Wish:
            <Outlet></Outlet>
          </div>
  )
}

const LazyKill = lazy(()=>{return import ("./pages/Kill");})
function App(){
  let token = 12
  return (
          <div className="App">
            <ul className="nav-ul">
              <li className="nav-link"><NavLink to="/home">HOME</NavLink></li>
              <li className="nav-link"><NavLink to="/mine">MINE</NavLink></li>
              <li className="nav-link"><NavLink to="/kill">KILL</NavLink></li>
              <li className="nav-link"><NavLink to="/wish/createWish">Create</NavLink></li>
              <li className="nav-link"><NavLink to="/wish/destroyWish">Destroy</NavLink></li>
              <li className="nav-link"><NavLink to="/work/123">Work</NavLink></li>
            </ul>
            {/* v5：Switch   v6：Routes*/}
            <Suspense fallback={<h1>加载中。。。</h1>}>
              <Routes>
                <Route path="/home" element={<Home></Home>}></Route>
                <Route path="/mine" Component={token?Mine:Home}></Route>
                <Route path="/kill" element={<LazyKill></LazyKill>}></Route>
                <Route path="/wish" element={token?<Wish/>:<Navigate to="/home"></Navigate>}>
                  <Route path="createWish" element={<CreateWish></CreateWish>}></Route>
                  <Route path="destroyWish" element={<DestroyWish></DestroyWish>}></Route>
                </Route>
                <Route path="/work/:id" Component={Work}></Route>
              </Routes>
            </Suspense>
          </div>
  )
}

<Route path="/wish" element={token?<Wish/>:<Navigate to="/home"></Navigate>}>

// 异步引入组件
const LazyKill = lazy(()=>{return import("./pages/Kill")})

<Suspense fallback={<h1>加载中。。。</h1>}>
  <Routes>
    <Route path="/kill" element={<LazyKill></LazyKill>}></Route>
  </Routes>
</Suspense>

let mesSlice = createSlice({
  name:"mes", // 切片名称，用来在dispatch中定位
  initialState:{
    mes:"hello",
  },
  reducers:{
    changeMes(state,action){
      console.log(state,action)
      state.mes = action.payload
    },
    resetMes(state,action){
      state.mes = "hello"
    }
  }
})

let mesSlice = createSlice({
  name:"mes",
  initialState:{/**/},
  reducers:{/**/}
})
let numSlice = createSlice({
  name:"num",
  initialState:{/**/},
  reducers:{/**/}
})
let store = configureStore({
  reducer:{
      mesReducer:mesSlice.reducer,
      numReducer:numSlice.reducer,
  }
})

export default function App(){
    const state = useSelector((state=>{
        return state.numReducer
    }))
  const dispatch = useDispatch()
  return (
     <div>
       Version: {state.version}
       <br/>
       <button onClick={()=>dispatch({type:"num/addVersion"})}></button>
     </div>
  )
}