React的基础概念JSX

最新推荐文章于 2024-06-15 19:02:23 发布

名之以父

最新推荐文章于 2024-06-15 19:02:23 发布

阅读量679

点赞数

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

本文链接：https://blog.csdn.net/wujianrenn/article/details/131385226

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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表达式必须用{ }包含

名之以父

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React的基础概念JSX

此处一定要写babel ，表示这里写的不是JS，而是jsx，并且需要babel进行转义*///1.创建虚拟DOMconstVDOM/* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面renderVDOM'test'
复制链接

扫一扫