react起步

react小白起步(总结版)

<script type="text/babel">标签中,react分三个部分,数据声明、创建虚拟Dom对象,渲染虚拟Dom对象

数据声明

var a=1;

这里的数据可以是var、let、const,数据类型可以是js中的任意数据类型

创建虚拟Dom

var vDom=<h1>hello React</h1>

等于的后面可以使用纯html语句,在 type="text/babel"的script标签中是可以的,但是在默认的script标签中就不可以了

调用数据

使用{a},这里的{}外不可以有引号,引号表示字符串,这里的大括号表示中间的字符串为一个数据

渲染虚拟Dom

这一步是把虚拟Dom渲染到真实的dom中进行重绘(重排)

ReactDom.render(vDom,document.querySelector('#test'))

ReactDom.render(虚拟Dom对象,document.querySelector(‘挂载位置’))

Get Start:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="test"></div>

<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- react原生库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 操作Dom的扩展库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/babel">
	// 1、创建虚拟Dom元素对象
	var vDom=<h1>Hello React!</h1>
	// 2、将虚拟Dom渲染到页面真实Dom的容器中
	ReactDOM.render(vDom,document.querySelector('#test'))
</script>
</body>
</html>

jsx语法本质:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX</title>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- react原生库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 操作Dom的扩展库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 原生js -->
	<script type="text/javascript">
		const msg='I like you '
		const myId='qiaomu'
		// 1、创建虚拟Dom
		const vDom1=React.createElement('h2',{id:myId},msg)
		// 2、渲染虚拟Dom
		ReactDOM.render(vDom1,document.querySelector('#test1'))
	</script>
<!-- jsx -->
	<script type="text/babel">
		// 1、创建虚拟Dom
		var vDom2=<h2 id={myId}>{msg}</h2>
		// 2、渲染虚拟Dom
		ReactDOM.render(vDom2,document.querySelector('#test2'))
	</script>
</body>
</html>

虚拟dom的优势

真实的dom东西很多,但是虚拟dom比较轻便,更新虚拟dom的时候真实的dom不会更新,这样可以批量更新dom,提高速度

渲染列表

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <h2>乔木木最喜欢的明星top2</h2>
  <div id="example1"></div>
	<h2>乔木木的墙头top3</h2>
	<div id="example2"></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 names=['吴青峰','天海佑希']
		const qiangtous=['齐思钧','羽生结弦','新垣结衣']
		// 创建两个虚拟dom
		// 用map函数,去出数组中的每个元素,把它变成一个li标签包裹的虚拟dom
		const ul1=(
			<ul>
				{names.map((name,index)=>
					<li key={index}>{name}</li>
				)}
			</ul>
		)
		const ul2=(
			<ul>
				{qiangtous.map((qiangtou,index)=><li key={index}>{qiangtou}</li>)}
			</ul>
		)
		ReactDOM.render(ul1,document.querySelector('#example1'))
		ReactDOM.render(ul2,document.querySelector('#example2'))
  </script>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值