react 基础

2023-10-03 21:19:16

1.hello-react

依赖
babel.min.js
prop-types.js
react-dom.development.js
react.development.js

hello-react demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
	<title>hello react</title>
</head>
<body>
 	<div id="test"></div>

 	<!-- react核心库 -->
 	<script type="text/javascript" src="../js/react.development.js"></script>
 	<!-- react-dom,用于支持react操作DOM -->
 	<script type="text/javascript" src="../js/react-dom.development.js"></script>
 	<!-- babel，用于将jsx转为js -->
 	<script type="text/javascript" src="../js/babel.min.js"></script>

 	<script type="text/babel">
 		//创建虚拟DOM
 		const VDOM = (
 		             <h1 id="sanlll">
 						Hello,React
 	                </h1>
 		)
 		//渲染虚拟DOM到页面
 		ReactDOM.render(VDOM,document.getElementById('test'))
 	</script>
</body>
</html>

2.原生js创建虚拟dom

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>create dom using js method</title>
</head>
<body>
	<div id="test"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>

	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<script type="text/javascript">
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello React'))

		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

3.jsx创建虚拟dom

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jsx创建虚拟dom</title>
</head>
<body>
	<div id="test"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		const VDOM = (
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>

</body>
</html>

4.创建函数组件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>函数组件</title>
</head>
<body>
	<div id="test"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		function MyComponent(){
			console.log(this);
			return <h2>我是函数定义的组件</h2>
		}
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/*
			执行了ReactDOM.render(<MyComponent/>)
			   1.React解析组件标签，找到了MyComponent组件
			   2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转换成真实dom，随后呈现在页面中
		*/
	</script>
</body>
</html>

5.类组件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>类组件</title>
</head>
<body>
	<div id="test"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		class MyComponent extends React.Component{
			render(){
				console.log('render中的this',this)
				return <h2>我是用类定义的组件</h2>
			}
		}

		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/*
			执行了ReactDOM.render(<MyComponent/>.....)
			    1.React解析组件标签，找到了MyComponent组件
			    2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法
			    3.将render返回的虚拟dom转为真实dom，随后呈现在页面中
		*/
	</script>
</body>
</html>

6.jsx 基本规则

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jsx rule</title>
	<style type="text/css">
		.title{
			background-color: orange;
			width: 200px;
		}
	</style>
</head>
<body>
	<div id="test"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		const myId = 'slq'
		const myData = 'Hello,react'

		//create VDOM
		const VDOM = (
        	<div>
        		<h2 className="title" id={myId.toLowerCase()}>
        			<span style={{color:'white',fontSize:'29px'}}>{myId.toLowerCase()} {1 + 2} {89 + 90}</span>
        		</h2>
        		<h2 className="title" id={myId.toUpperCase()}>
        			<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
        		</h2>
        		<input type="text"/>
        	</div>
		)

		ReactDOM.render(VDOM,document.getElementById('test'))

		/*
			jsx语法规则：
			   1.定义虚拟dom时，不要写引号
			   2.标签中混入js表达式时用{}
			   3.样式的类名指定要用className
			   4.内联样式，使用style={{key:value}}的形式去写
			   5.只有一个根标签
			   6.标签必须闭合
			   7.标签首字母
			   			（1）.若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
			   			（2）.若大写字母开头，react将其识别为组件，然后去渲染，若组件没有定义，则报错
		*/
	</script>
</body>
</html>

7.jsx demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jsx pratice</title>
</head>
<body>
   <div id="test"></div>

   <script type="text/javascript" src="../js/react.development.js"></script>
   <script type="text/javascript" src="../js/react-dom.development.js"></script>
   <script type="text/javascript" src="../js/babel.min.js"></script>

   <script type="text/babel">
   		/*
   			js语句块和js表达式
   			1.表达式： 一个表达式会产生一个值，可以放在任何一个需要值得地方
   			2.语句： 
   				（1）..if(){}
   				 (2)..for(){}
   				 (3)..switch()(case:xxx)
   		*/

   		const data = ['angular','react','vue']
   		const VDOM = (
   			<div>
   				<h1>前端js框架列表</h1>
   				<ul>
  					{
  						data.map((item,index)=>{
  							return <li key={index}>{item}</li>
  						})
  					}
   				</ul>
   			</div>
   		)
   		ReactDOM.render(VDOM,document.getElementById('test'))
   </script>
</body>
</html>

8.真实dom与虚拟dom

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>虚拟dom和真实dom</title>
</head>
<body>
	<div id="test"></div>
	<div id="demo"></div>

	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.虚拟dom
		const VDOM = (
			<h1 id="title">
				<span>hello,react</span>
			</h1>
		)

		//2.渲染虚拟dom到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

		const TDOM = document.getElementById('demo')
		console.log("虚拟dom",VDOM)
		console.log("真实DOM",TDOM)
		debugger;
		console.log(typeof VDOM)
		console.log(VDOM instanceof Object)
	</script>
</body>
</html>
上一篇：js获取DOM对象的方法


下一篇：JS组成的三部分