学习react第一天

创建第一个react项目

create-react-app创建

npx create-react-app my-react-app

vite创建

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

Jsx

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

事件绑定

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

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

组件的定义

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

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

useState

添加状态变量类似ref

返回的是一个数组

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

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结构

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

样式的添加修改

<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语句中逻辑判断使用三元运算符或者逻辑运算符

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

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

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>)
}