学习react第一天

创建第一个react项目

create-react-app创建

javascript 复制代码

npx create-react-app my-react-app

vite创建

javascript 复制代码

npm create vite@latest my-app -- --template react-ts

Jsx

概念：JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写 UI模版的方式

事件绑定

传参要用箭头函数不然会直接在标签里调用

javascript 复制代码

<button onClick={(e) => handelClick(args, e)}>按钮</button>

组件的定义

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

javascript 复制代码

const Button = () => {
  return <button style={{color: 'blue'}}>bbbb</button>
}

useState

添加状态变量类似ref

返回的是一个数组

定义时解构，前面是状态变量，后面是修改的方法

javascript 复制代码

const [count, setCount] = useState(0)
  const addCount = () => {
    setCount(count + 1)
  }

<button onClick={() => setCount(count + 1)}>add</button>
<button onClick={() => addCount()}>{count}</button>

只有setCount能修改count的值，别的函数可以调用setCount来修改

循环渲染的方法

使用map返回一个html结构

javascript 复制代码

<ul>
  {list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

样式的添加修改

javascript 复制代码

<span 
    onClick={() => handelChange(item.type)} 
    key={item.type} 
    // className={`nav-item ${activeTab === item.type ? 'active' : ''}`}
    className={classNames('nav-item', {active: activeTab === item.type})}
>{item.text}</span>)}

条件判断

html语句中逻辑判断使用三元运算符或者逻辑运算符

javascript 复制代码

function App () {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算 */}
      {isLogin ? <span>jack</span> : <span>loading...</span>}
    </div>
  )
}

复杂条件下通过函数使用if-else判断

javascript 复制代码

function getArticleTem () {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if (articleType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 调用函数渲染不同的模版 */}
      {getArticleTem()}
    </div>
  )
}