React的基础概念JSX
【摘要】 1、创建一个用react写的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello_react</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入reac...
1、创建一个用react写的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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" > /* 此处一定要写babel ，表示这里写的不是JS，而是jsx，并且需要babel进行转义*/
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
首先我们需要创建虚拟DOM，然后渲染虚拟DOM到页面上展示
其次在写react的内容的时候，我们在script里面，需要填写类型为babel，而不是JavaScript。因此我们需要在上方引入babel文件夹
另外还需要引入react核心库和react-dom文件，react-dom是用于支持react操作DOM的
类型为babel是为了告诉浏览器这个标签里面的内容时关于jsx的语法，不是js语法！需要进行转义为JS内容
jsx语法规则
可以直接书写标签，但是不能在标签里面填写引号，里面不是字符串类型的
全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是 *React *. ****** createElement ****** ( ****** component ****** , *props *, … ****** children ****** ) 方法的语法糖
作用: 用来简化创建虚拟DOM
- 写法:
var ele = <h1> Hello JSX! </h1>
- 注意：它不是字符串, 也不是HTML/XML标签
- 注意：它最终产生的就是一个JS对象
- 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）