创建react项目
创建:create-react-app react-app
启动react项目:npm start
BABEL:将JSX转化为javascript代码
ES6语法
- 支持类
- bind 绑定this对象
- 箭头函数的简写
const f=x=> x*x;
箭头函数不会重新绑定this,相当于之前的let outer=this; - 对象的解构
const person = {
name: "yxc",
age: 18,
height: 180,
};
const {name : nm, age} = person; // nm是name的别名
通过结构实现复制操作,数组和对象的拷贝
let c=[...a,...b]
let c={...a,...b}
- default
export default class className
default引入不加大括号,可以起别名,最多只能有一个default
不加default要加大括号
react
类组件和函数组件,推荐使用类组件
安装bootstrap npm i bootstrap
引入:import 'bootstrap/dist/css/bootstrap.css'
创建组件
- src目录下创建文件夹component,创建box.jsx
- index.js引入componnet
- render()
react只能返回一个标签,必须用一个标签扩起来。当子节点数量大于1时,可以用<div>
或<React.Fragment>
将其括起来。 - state 状态 render中使用使用{this.state.x} {}是嵌入表达式
- 函数:
tostring()
{
const {x}=this.state
return `x:${x}`
}
- 使用bootstrap样式
不能使用class做样式,要使用className.
使用css中的-全部换成小驼峰命名方式 - 数据驱动改变style
<div style={this.getstyles()}>
<div style={style}>
- 渲染列表
{this.state.colors.map(color=>(
<div key={color}>{color}<div>
))}
- 条件渲染,使用逻辑短路表达式
- 绑定事件
hanle(){}函数
handle=()=>{}
<button onClick={this.handle}> 正确
<button onClick={this.handle()}> 错误
- 修改state
this.setState({
this.state.x--;
})
每一次修改state并重新render,前端页面会发生改变。
- 事件有参函数
定义临时函数
handleTmp=()=>{
return this.handle(10);
}
<button onClick={handleTmp}>
匿名函数
<button onClick={()=>{
return this.handle(10);
})>
简写
<button onClick={()=> this.handle(10);)>
上面的项目名BOX
练习
写题解列表
绑定删除函数
- comonnet solution.jsx imrc
- table.table>thead>tr>tr补全代码