时间久远，工作中没有遇到react的情况，早就忘记React怎么写了~回顾一下吧。
- React项目的搭建
npx creat-react-app app-name
- React项目的运行
具体可以参考README中的说明，没有特殊的情况下，直接
npm start
- 删除项目src目录中不必要的代码先，仅保留入口文件即可，即App.js与index.js，当然这两个文件中对应的多余代码也需要删除~ 删除完仍然可以正常运行即可~
接下来了解一下啥是JSX咯~
JSX是Js和xml（html）的缩写，表示在js代码中编写html模版结构，是React中编写UI模版的方式。
为啥要这样搞呢，其实就是既想使用html的声明式模版写法，又想享受js的可编程能力，如下图
这种独特的自创写法并不是标准的js语法，而是一种js的语法拓展，因此浏览器本身无法识别，咱们需要通过解析工具做解析才能正常运行~
可以去Babeljs.io 官网去康康测测~
JSX基础
1. JSX中使用js表达式
在JSX中可以通过大括号语法{}识别js中的表达式，如：常见的变量，函数调用，方法调用等。tips：if语句、switch语句、变量声明属于语句，不是表达式，因此不是在{}中使用~
demo:
1）使用js变量
2）使用js变量
3）函数调用与方法调用
4）使用js对象
2.JSX中实现列表渲染
1）先声明一个列表
2）然后map渲染，循环什么结构就return什么结构
3）配置独一无二的key，避免报错提示（提升列表更新渲染性能，diff算法~）
const list =[
{name:'Jane',id:'0001',gender:"female"},
{name:'Joy',id:'0002',gender:"male"},
{name:'Josie',id:'0003',gender:"female"},
{name:'Jay',id:'0004',gender:"male"}
]
function App() {
return (
<div className="App">
<ul>{list.map(item=><li key={item.id}>{item.name},{item.gender}</li>)}</ul>
</div>
);
}
3.JSX中实现条件渲染
1）通过逻辑 &&
这里需要注意书写的位置~判断条件需要写在前面
const type = true;
function App() {
return (
<div className="App">
{/* 通过逻辑 && */}
<div>{type && "jack"}</div>
</div>
);
}
export default App;
结果为Jack。
2）通过三元运算
const type = true;
function App() {
return (
<div className="App">
{/* 通过三元运算 */}
<div>
{"is she good at playing piano?"}{" "}
{type ? <span>{"yes"}</span> : <span>{"no"}</span>}
</div>
</div>
);
}
export default App;
结果为 is she good at playing piano? yes
4. JSX中实现复杂条件渲染
1）直接封装一个函数，函数里面放置不同的结构进行返回
2）
5. JSX中实现事件绑定
1）不带参数写法
<div>
<button onClick={handleClickBtn}>点击功德+1</button>
</div>
2）获取event事件参数
<div>
<button onClick={(e) => handleClickBtn2(e)}>功德+1</button>
</div>
- 传递自定义参数
{/* 变成自调用函数,且后续点击无反应 */}
<button onClick={handleClickBtn3("yeah!")}>功德+2</button>
{/* 正常点击后触发 */}
<button onClick={() => handleClickBtn3("yeah!")}>功德+3</button>
4）既要获取event事件参数又要自定义参数
<button onClick={(e) => handleClickBtn4("yeah!", e)}>功德+5</button>
function handleClickBtn() {
console.log("施主，功德圆满！");
}
function handleClickBtn2(e) {
console.log("施主，功德++", e);
}
function handleClickBtn3(val) {
console.log("施主，功德+2", val);
}
function handleClickBtn4(val, e) {
console.log("施主，功德+5", val, e);
}