初遇React

1.React项目创建

    1.1 安装脚手架
        yarn global add create-react-app 
    1.2 使用脚手架创建项目
        create-react-app 项目名称
    1.3 启动项目(端口默认3000)
        cd 项目名 && yarn start   启动项目 

2.Reavt创建组件

import { useState } from 'react'

export default function Test() {     默认暴露出在首页index.js中引用

  // useState  数据驱动,要获取响应式数据,useState的数据是放在数组里面的,
  // [name, SetName],第一个是纯数据,字符串格式,第二个是函数function格式,改变fun里面的数据赋值给索引为以的数据,在更新视图
  //   react数据驱动是通过MVC,他没有拦截数据,需要调用hooks提供的函数,来改变数据并刷新视图

//const [数据变量,  改变数据变量的函数 ] = useState(初始化的值)
//改变数据变量的函数只做两件事 1:改变数据的值  2:通知视图进行最小粒度更新
//数据变量
        //在函数中:  name   直接获取
        //在JSX中:  { name }  

  let [til,setTil] = useState('快看这个男人叫小帅')
  let [name, SetName] = useState('你快回来,在哪里呢')
  let Changname = () => {
    SetName('我一定会回来的')
    setTil('小美')
  }
  let [size,setSize] = useState(20)

  let sizeatt = ()=>{
    setSize(size+1)
  }

//JSX:React的模板占位符,支持在模板中插入任意表达式 {  }
//表达式的定义:运行后或给出一个结果的代码片段  包括(变量表达式,函数表达式,逻辑运算表达式,三目运算符,数字表达式)
  return (
    <div>
    //class是js的关键字,在作为元素样式时,属性变为className,用法与以前一致
      <p className="main" title={til} style={{color:'#f12',backgroundColor:'#666',fontSize:size+'px'}}>你好</p>
        //react事件监听采用on小驼峰
      <button onClick={sizeatt}>字体改变</button>
      <button onClick={Changname}>{name}</button>
      <div >你干嘛呢啊 {a}  </div>
    </div>
  )
}

3.在index.js中配置

import Test from './Aest'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Test/>
  </React.StrictMode>
);