忽然想回来炫一口前端，浅浅学一下react（本来想速成的，既然在寒假就慢慢学吧）
项目搭建
这里直接介绍用脚手架来进行项目搭建(这里默认大家node.js配置好了喵)
1. Vite搭建
npm create vite@latest my-app -- --template react
cd my-app
npm run dev2. CRA 搭建
npx create-react-app my-app
cd my-app
npm start初始化开发环境
1.安装依赖
- ESLint + Prettier + Husky + Lint-staged（代码规范与自动化）
- Tailwind CSS（或其他 UI 库）
npm install react-router-dom zustand axios classnames目录：
├── public/ # 静态资源
├── src/
│ ├── assets/ # 图片、字体等资源
│ ├── components/ # 可复用组件
│ ├── pages/ # 页面级组件
│ ├── hooks/ # 自定义 hook
│ ├── stores/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── App.tsx # 根组件
│ └── main.tsx # 入口文件
├── .eslintrc # ESLint 配置
├── .prettierrc # Prettier 配置
└── package.json项目运行
npm run dev //vite
npm start // CRA JSX
基本介绍
我们可以看到这里，源码中实现了js和html的融合，这种语法叫做JSX，这种语法就类似于一种模板语法，与vue的模板语法相比呢，JSX将HTML和JS结合的更加深入。
这里我们可以看到HTML是写在return的返回值中的，因为的下面的返回值包含了多行内容，这里的小括号()是JSX语法中必须的。
我们还可以看到这里在HTML中最外层加入了有一个空标签，这个是因为JSX语法中，JSX只能有一个根元素，如果一定需要多个根元素则需要在外面加上一个元素包裹，但这样可能会导致许多的样式问题，所以引入了空标签，用空标签进行包裹，但是在渲染的时候不会渲染空标签，也不会影响原本的页面结构。
基本语法
JS表达式识别
在JSX中用大括号语法识别JS中的表达式，比如变量函数调用，方法调用等等，比如说下面的代码，
function App() {
const title = "我的第一个 JSX 组件";
const items = ["苹果", "香蕉", "橙子"];
return (
<div>
<h1>{title}</h1>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<button onClick={() => alert("点击了！")}>
点我
</button>
</div>
)
}
export default App
列表渲染
用原生JS中的map方法去渲染遍历列表。
function App() {
const list = [
{id : 1001,name:'vue'},
{id : 1002,name:'react'},
]
return (
<div>
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
}
export default App这里需要一个key绑定，是react框架为了提升渲染性能而用到的一个值
条件渲染
在react中使用逻辑与运算符&&,三元表达式实现基本的条件渲染
function App() {
const flag = true
return (
<>
{flag && <div>this is ttdr</div>}
{flag ? <div>Dalta Force</div> : <div>Railway Star</div>}
</>
)
}
export default App复杂情况下的条件渲染
const userType = "admin"
function getUserType(){
if (userType ==="admin"){
return <div>我是管理员</div>
}else if(userType === "client") {
return <div> 我是顾客</div>
}else{
return <div>我啥也不是</div>
}
}
function App() {
return (
<>
<div>{getUserType()}</div>
</>
)
}
export default App
基础事件绑定
语法：on事件名称 = {事件处理程序}
注意驼峰命名喵
function App() {
const clickHandler = () =>{
console.log("点击")
}
return (
<button onClick={clickHandler}>click</button>
);
}
export default App
使用事件对象参数就只需要增加一个形参e
const clickHandler = (e) =>{
console.log("点击")
}如果是传递自定义参数就在相应的位置增加相应的参数但是后面调用需要改为箭头函数的形式
function App() {
const clickName = (name) =>{
console.log("点击",name)
}
return (
<button onClick={() => clickName('ttdr')}>name</button>
);
}
export default App
注意这里不能直接写成函数引用
如果既要对象事件参数，又要自定义函数，我们就可以把两个融合一下
function App() {
const clickName = (name,e) =>{
console.log("点击",name,e)
}
return (
<button onClick={(e) => clickName('ttdr')}>name</button>
);
}
export default App
组件
组件是一个通用的概念，目前的主流前端开发中都是采用的一个组件化开发模式。
组件就是界面的一个部分，有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。
基础语法
在React中，组件就是一个首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。
function Button(){
return <button>click!</button>
}
function App() {
return (
<Button/>
);
}
export default App
当然我们也可以写箭头函数
const Button = () =>{
return <button>click!</button>
}useState
useState是一个React Hook（函数），允许我们向组件增加一个状态变量，从而控制影响组件的渲染结果。
与普通JS遍历不同的是，状态变量一旦变化，组件的UI也会跟着变化（数据驱动视图）。
基础语法
import { useState } from 'react'
function App() {
const [count,setCount] = useState(0)
const handleClick = () =>{
setCount(count + 1)
}
return (
<botton onClick={handleClick} >{count}</botton>
);
}
export default App
我们需要去导入userState，然后调用useState函数，会返回一个状态变量，一个修改状态变量的函数，每次修改状态变量必须调用这个函数。
修改状态变量的规则
状态被认为是只读的，我们应该去替换他而不是修改他，直接修改不能引发视图更新。
也就是说，我们对状态变量的操作不会产生视图更新，我们需要去通过set函数去将新值替换掉原本的值。
修改对象状态
对于对象类型的状态变量，我们要传给set方法一个全新的对象来进行修改。
const [user,setUser] = useState({
name:'ttdr'
})
const handelName = () =>{
setUser({
...user,
name: "Ttdr",
})
}我们通过展开运算符，后面跟上需要修改的字段，来实现对一些字段的修改
基础样式控制
基本介绍
1.行内样式控制（不推荐）
<div style={{color:'red',fontSize:'50px'}}>this is ttdr</div>我们也可以把样式单独声明出来像这样
const style = {
color:'red',
fontSize:'50px'
}
/*做代码演示直接简化了*/
<div style={style}>this is ttdr</div>2.class类名控制
react里面定义类名的语法是className而不是class
import './App.css'
/*.此处省略.*/
<div className="foo">Dalta Force</div>classnames优化类名控制
是一个简单的JS库，方便通过条件动态控制class类名显示。
className = {classNames('nav-item',{active:type === item.type})}第一个参数为静态的类名，后面的对象为动态类名，key就是需要控制的类名，value就是要控制类名显示的条件
