React的基础概念JSX

1、创建一个用react写的页面

 DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>hello_reacttitle>
 head>
 <body>
     
     <div id="test">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" > /* 此处一定要写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

  1. 写法:
 var ele = 

Hello JSX!

  1. 注意:它不是字符串, 也不是HTML/XML标签
  1. 注意:它最终产生的就是一个JS对象
  1. 标签名任意: HTML标签或其它标签
  1. 标签属性任意: HTML标签属性或其它

基本语法规则

  1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
  1. 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含

你可能感兴趣的:(React,react.js,javascript,前端,vscode,vue.js)