一、react是什么&＃xff1f;

react是一个用于构建用户界面的 Javascript 库

二、使用步骤

安装react

1. 安装脚手架

npm i create-react-app -g

2. 创建项目

create-react-app 项目名

3. 启动项目

npm start

二、元素渲染

文本渲染

const str &＃61; "你好react"
function App() {return (

运行结果&＃xff1a;

html渲染 

import &＃39;./App.css&＃39;;const stl &＃61; {fontSize:&＃39;24px&＃39;,color:&＃39;red&＃39;
}
function App(){return (

运行结果&＃xff1a;

三、条件渲染

 && 与三目运算符

const str &＃61; &＃39;给我爱吃的喜之郎&＃39;;
const msg &＃61; &＃39;还是html简单&＃39;;
const score &＃61; 80;
let flag &＃61; true;
const list &＃61; [&＃39;react&＃39;,&＃39;vue&＃39;,&＃39;angular&＃39;,&＃39;jQuery&＃39;];
function App(){return (

如果条件是 true &＃xff0c;&& 右侧的元素就会被渲染&＃xff0c;如果是 false&＃xff0c;React 会忽略并跳过它。

四、列表渲染

import &＃39;./App.css&＃39;;const arr &＃61; [

我直接坐飞机去你的坟头

运行结果&＃xff1a;

key 帮助 React 识别哪些元素改变了&＃xff0c;比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。
如果列表项目的顺序可能会变化&＃xff0c;不建议使用索引来用作 key 值&＃xff0c;因为这样做会导致性能变差&＃xff0c;还可能引起组件状态的问题。

五、事件渲染

 React 事件与 js 事件一致 &＃xff0c;但是React 事件的命名采用 小驼峰式 &＃xff08;camelCase&＃xff09;
事件的四种语法&＃xff1a;

1、箭头函数 onClick&＃61;{()&＃61;>{ xx }}

function App() {return (

2、onClick&＃61;{函数名}

const say &＃61; function () {alert("秋天")
}
function App() {return (

3、onClick&＃61;{函数名.bind(this,参数)}

const say &＃61; function (str) {alert("秋天" &＃43; str)
}
function App() {return (

4、onClick&＃61;{()&＃61;>函数名(参数)}

const say &＃61; function (str) {alert("秋天" &＃43; str)
}
function App() {return (

六、react 响应式数据 State


import React,{Component}from &＃39;react&＃39;;
class App extends Component{constructor(props) {super(props);this.state&＃61;{num:1}}addNum(n){this.setState({num:this.state.num&＃43;n})}render(){return(