:::info React 的基本使用是在html文件中通过引入JS文件使用，通过基本使用案例，了解 React 相关的部分概念。 :::

基本使用

引入相关的JS库

  • react.js：React的核心库
  • react-dom.js：提供操作DOM的react的扩展库
  • babel.min.js：解析JSX语法代码转为JS代码

    html 页面代码

    1. <html>
    2. <head></head>
    3. <body>
    4.   <div id='test'></div>
    5.   <script type="text/javascript" src="../js/react.development.js"></script>
    6.   <script type="text/javascript" src="../js/react-dom.development.js"></script>
    7.   <script type="text/javascript" src="../js/babel.min.js"></script>
    8.       <script type="text/babel"> //必须声明babel
    9.     // 创建虚拟DOM元素
    10.     const vDom = <h1>Hello React</h1> // 千万不要加引号
    11.     // 渲染虚拟DOM到页面真实DOM容器中
    12.     ReactDOM.render(vDom, document.getElementById('test'))
    13.   </script>
    14. </body>
    15. </html>

虚拟 DOM

React 提供了一些 API 来创建一种特别的一般 JS 对象，如下：

// element 就是一个简单的虚拟 DOM 对象
var element = React.createElement('h1', {id: 'myTitle'}, 'hello'}
  • 虚拟 DOM 对象最终被 React 转换为真实的 DOM
  • 在使用 React 过程中，基本只需要操作虚拟DOM的相关数据，React 会自动转换为真实DOM。

JSX

  • 全称： JavaScript XML

  • 作用：用来创建 React 虚拟 DOM 对象

    var ele = <h1>hello JSX</h1>

    :::warning

  • <h1>hello JSX</h1> 不是字符串，也不是 HTML/XML 标签

  • <h1>hello JSX</h1> 最终产生的就是一个 JS 对象 :::

  • 基本语法规则

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

创建虚拟 DOM 的两种方式

第一种方式 纯 JS （不推荐）

React.createElement('h1', {id: 'myTitle'}, 'hello')

第二种方式 JSX

<h1>hello JSX</h1>