react入门视频教程（React入门笔记）
导读：1、React入门 <!DOCTYPE html>...
1 、React入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1>hello world2</h1>, document.getElementById(app) ) </script> </body> </html>2 、JSX语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <div id="app"></div> <script type="text/babel"> let a = 变量a ReactDOM.render( <h1 className="h1">{a}</h1>, document.getElementById(app) ) </script> </body> </html>3 、元素渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <style> .red{ color: red; } </style> <body> <div id="app"></div> <script type="text/babel"> function test(){ //只会渲染变动的地方 ，而不会像js操作dom一样全部修改 let time = new Date().toLocaleTimeString() let template = <div> <h1 className="red">现在时间是</h1> <h2> {time} </h2> </div> ReactDOM.render( template, document.getElementById(app) ) } setInterval(test,1000) </script> </body> </html>4 、组件和props传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> </body> </html>5 、函数式组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="app1"></div> <script type="text/babel"> // 函数式组件 // function Hello(){ // return <h1>Hello World</h1> // } //多个元素一定要记得写根元素 function Hello(){ return <div> <h1>Hello World</h1> <h1>Hello World</h1> <h1>Hello World</h1> </div> } ReactDOM.render( <Hello/>, document.getElementById(app1) ) </script> </body> </html>6 、函数是组件和props传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="app1"></div> <script type="text/babel"> // 函数式组件 // function Hello(){ // return <h1>Hello World</h1> // } //多个元素一定要记得写根元素 function Temp(props){ return <div> <h1>函数式组件 ，使用props传值</h1> <h1>姓名：{props.name}</h1> <h1>年龄: {props.age}</h1> </div> } ReactDOM.render( <Temp name=小明 age=18/>, document.getElementById(app1) ) </script> </body> </html>7 、有状态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ render(){ return <h1>Hello World</h1> } } ReactDOM.render( <Hello />, document.getElementById(root) ) </script> </body> </html>8 、有状态组件props
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.props.name}</p> <p>性别：{this.props.age}</p> </div> } } ReactDOM.render( <Hello age="18" name="小明"/>, document.getElementById(root) ) </script> </body> </html>9 、事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ constructor(props){ super(props) this.state = { name: "小李", age: 18 } } updateInfor = ()=>{ this.setState({ name: hello, age: 13 }) } render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.state.name}</p> <p>性别：{this.state.age}</p> <button onClick={this.updateInfor}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>10 、事件处理this详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ constructor(props){ super(props) this.state = { name: "小李", age: 18 } this.updateInfor1 = this.updateInfor1.bind(this) } updateInfor = ()=>{ this.setState({ name: hello, age: 13 }) } updateInfor1(){ this.setState({ name: hello, age: 13 }) } updateInfor2(){ this.setState({ name: hello, age: 13 }) } render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.state.name}</p> <p>性别：{this.state.age}</p> {/* <button onClick={this.updateInfor}>更新数据</button> */} <button onClick={this.updateInfor1}>更新数据</button> <button onClick={this.updateInfor2.bind(this)}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>11 、列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ state = { list: [1,2,3,4,5] } render(){ const arr = this.state.list const lists = [] arr.forEach(i=>{ let li = <li> {arr[i-1]} </li> lists.push(li) }) return <div> <ul> {lists} </ul> </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>12 、循环需要key
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ state = { list: [1,2,3,4,5] } render(){ const arr = this.state.list const lists = [] arr.map((item, index)=>{ let li = <li key={index}> {item} </li> lists.push(li) }) return <div> <ul> {lists} </ul> </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>13 、条件处理1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:true } render(){ const isLogin = this.state.isLogin let button if(isLogin){ button = Logout() }else{ button = Login() } return <div> {button} </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>14 、条件处理2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:true } render(){ const {isLogin} = this.state let button return <div> {isLogin ? <Login/> : <Logout/>} </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>15 、条件处理和事件处理组合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title> </head> <body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式 ，不存在state ，只会有props ，它没有生命周期 有状态组件：使用class定义 ，extend继承 ，由state进行数据的存储和管理 ，同时还可以有props ，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:false } updataInfo = ()=>{ this.setState({ isLogin:!this.state.isLogin }) } render(){ const {isLogin} = this.state let button return <div> {isLogin ? <Login/> : <Logout/>} <button onClick={this.updataInfo}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById(root) ) </script> </body> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！