02 简单上手

11/26/2021 react

官方文档已经很详细了,这里只记录课程中的部分内容,便于回顾。

# 上手

<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" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

对应官方文档:在网站中添加 React – React (opens new window)

  • 如果使用 JSX 语法,则需要引入 babel

  • JSX 语法本质上是 React.createElement 的语法糖

以下两者等价

const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
    <h1 id="title">
        <span>Hello,React</span>
    </h1>
)
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
  • 关于虚拟DOM:
    1. 本质是Object类型的对象(一般对象)
    2. 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
    3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上。

# JSX 基本规则

	<script type="text/babel" >
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
/*
jsx 语法规则:  
1. 定义虚拟DOM时,不要写引号。
2. 标签中混入JS表达式时要用 `{}`。
3. 样式的类名指定不要用class,要用className。
4. 内联样式,要用 `style={{key:value}}` 的形式去写。第一个 `{}` 里面是 JS 表达式,第二个 `{}` 表示一个对象
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
    (1). 若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
    (2). 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
*/

# JSX 小练习,区分语句与表达式

	<script type="text/babel" >
		/* 
			一定注意区分:【js语句(代码)】与【js表达式】
					1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
								下面这些都是表达式:
										(1). a
										(2). a+b
										(3). demo(1)
										(4). arr.map() 
										(5). function test () {}
					2.语句(代码):
								下面这些都是语句(代码):
										(1).if(){}
										(2).for(){}
										(3).switch(){case:xxxx}
		
	 */
		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
更新时间: Friday, November 26, 2021 22:11