01_Recat入门（简介及jsx语法规则）

才不吃胡萝卜嘞

已于 2023-04-27 22:58:46 修改

阅读量315

点赞数

分类专栏： React 文章标签： react.js 前端 javascript

于 2023-04-27 22:30:59 首次发布

本文链接：https://blog.csdn.net/weixin_42152058/article/details/130404704

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、简介

二、jsx语法规则

2.1 jsx练习

2.1.1 objects are not valid as a React child

2.1.2 Each child in a list should have a unique "key" prop

2.1.3 countered two children with the same key

三、hello_react 案例

3.1 虚拟DOM与真实DOM

四、模块与组件

一、简介

简介：

React是一个将数据渲染为 HTML视图的开源JavaScript库。由Facebook开发，且开源。

发送请求获取数据
处理数据（过滤、整理格式等）
操作DOM呈现页面

特点：

采用组件化模式、声明式编码，提高开发效率及组件复用率

在React Native 可以使用React 语法进行移动端开发。

使用虚拟DOM + 优秀的 Diffing算法，尽量减少与真实DOM的交互。

二、jsx语法规则

全称是JavaScript XML，react定义的一种类似于XML的JS扩展语法: JS + XML。本质是 jsx创建虚拟dom 是原始js创建虚拟dom 的语法糖。简写方式，更加便捷。

定义虚拟DOM时，不要写引号
标签中混入JS表达式时要用 { }
- 一定区分 JS语句 与 JS表达式
- 表达式：一定会产生一个值，可以放在任意一个需要值的地方
  - (1) a
  - (2) a+b
  - (3) demo(1)
  - (4) arr.map()
  - (5) function test() { }
- 语句（代码）
  - (1) if () { }
  - (2) for(){ }
  - (3) switch() {case :xxxx}
样式的类名指定不要用class,要用 className
内联样式，要用 style= {{key :value }}
只能有一个根标签
标签必须闭合
标签首字母
- 若小写开头，则改标签转为 html 中的同名元素。若无对应标签，则报错。
- 若大写开头，react就去渲染对应的组件，若组件未定义则报错。

2.1 jsx练习

2.1.1 objects are not valid as a React child

原因：对象作为react子对象无效。

解决方案：当渲染JSX代码时，使用map()方法来渲染数组或者访问对象的属性。

2.1.2 Each child in a list should have a unique "key" prop

原因：列表中的每个子元素都应该有一个唯一的“键”

解决方案：Dom在渲染数组时，需要一个key

2.1.3 countered two children with the same key

原因：map()方法返回的两个或两个以上的元素具有相同的key属性

解决方案：每个元素的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">
    <title>练习</title>
</head>

<body>
    <div id="test">

    </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        const data = ["Angular","React","Vue"]
        //const obj = {name:"Angular",name:"React",name:"Vue"}//objects are not valid as a React child 
        const VDOM = (
            <div>
                <h1>前段js框架</h1>
            <ul>
                {
                    //Each child in a list should have a unique "key" prop.
                    //countered two children with the same key，key需要唯一
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
        )

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

</html>

三、hello_react 案例

相关js库：

链接：https://pan.baidu.com/s/1DlFxoKyz_2a1PsPWcBnV8A
提取码：d57m

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上 type="text/babel" , 声明需要babel来处理

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>hello</title>
	<style>
		.title{
			width: 100px;	
			font-size:20px;
			color: red;
			
		}
	</style>
</head>

<body>
	<!-- 容器 -->
	
	<div id="container">
	</div>
	<div id="app"></div>
	<!-- 1. 注意： 按照顺序引入,核心库 -->
	<script src="../js/react.development.js"></script>
	<!-- 用于支持react 支持dom -->
	<script src="../js/react-dom.development.js"></script>
	<!-- 用于将jsx 转成js -->
	<script src="../js/babel.min.js"></script>

	
	<!-- 创建虚拟dom的两种方式
		 第一种 jsx  
	2.注意： 一定要写babel
	-->
	<script type="text/babel">
		const myID = "TiTle";
		const data = "Hello"
		//3. 注意：注意不是字符串
		const VDOM = (
			//根标签只要一个
			//样式类名用 className
			//标签必须闭合
			<div>	
				<h3 className="title" id={myID.toLowerCase()}>
					<span style={{backgroundColor:'orange',borderRadius:'4px',padding:'8px 15px'}}>{data.toLowerCase()}</span>
				</h3>
				<h3 className="title" id={myID.toUpperCase()}>
					<span style={{backgroundColor:'skyblue',borderRadius:'4px',color:'white',padding:'8px 15px'}}>{data.toLowerCase()}</span>
				</h3>
				<input type="text"/>
				
			</div>
		)
		//渲染虚拟dom到页面
		//4. 注意：ReactDOM 不要写错
		ReactDOM.render(VDOM,document.getElementById('container'));
		const TDOM = document.getElementById('container')
		//console.log('虚拟DOM',VDOM) 
		//console.log('真实DOM',TDOM) 
		//debugger;
		//console.log(typeof VDOM) //object
		//console.log(typeof TDOM) //object
	</script>


	<!-- 第二种 js -->
	<script type="text/javascript">
		//														注意： 标签体内容,不能直接写标签
		//const VDOM2 = React.createElement('h2',{id:'title2'},'<span>React</span>')
		const VDOM2 = React.createElement('h2',{id:'title2'}, React.createElement('span',{id:'span2'},'React'))
		ReactDOM.render(VDOM2,document.getElementById('app'));

        let arr = [1,3,5,7,9]
		let result = arr.map((num)=>{
			//函数体
			return num + 1;
		})
		//console.log(result) //[2, 4, 6, 8, 10]

		const x = function test() {
			console.log(1)
		}
		//console.log(x)
	</script>

</body>

</html>