React是用于构建用户界面的JavaScript库
用于组件开发
起源
因为该公司对市场上所有 JavaScript MVC 框架,都不满意,
就决定自己写一套 ,用来架设Instagram 的网站。
做出来以后,发现这套东西很好用,就在2013年5月开源了。
react安装
ts版本创建项目名称 create-react-app 项目名称 ---template typescript
cd项目目录
npm start 启动
npm build 打包
npm eject 显示配置文件
文件说明
![](https://i-blog.csdnimg.cn/blog_migrate/63d13f5cd271dc526acbac22116334cb.png)
jsx语法
{ } js表达式
{ /**/ } 注释
className类名
数组可以有html标签,自动展开功能
style对象会自动展开
有且只有一个根节点
事件
onClick={ 函数 }
事件传参
1)onClick={ say.bind(this,参数)}
2)onClick={ e=>{ say(参数) } }
state状态
setState({ k:value })
表单的双向绑定
<input value={state.msg} onChange={(e)=>this.setState({msg:e.target.value})}></input>
dom引用
import React, { Component,createRef } from 'react';
this.myref = createRef();
<input ref={this.myref}></input>
// 获取dom引用对象 this.myref.current,前面这个代指input框
条件渲染
三元运算
条件?正确:错误
{ 条件&&内容 }
列表渲染
{state.list.map((item,index)=><h4 key={index}>{item}</h4>)}