React的基础概念JSX-Toy模板网

这篇具有很好参考价值的文章主要介绍了React的基础概念JSX。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 ****** ) 方法的语法糖