React开发依赖分析 - 详解

1. React小案例：

  • 在界面显示一个文本：Hello World
  • 点击按钮后，文本改为为：Hello React

2. React开发依赖

  • 2.1. 开发React必须依赖三个库：
    • 2.1.1. react: 包含react所必须的核心代码
    • 2.1.2. react-dom: `react渲染在不同平台所需要的核心代码
    • 2.1.3. babel: 将jsx转换成React代码的工具
  • 2.2. 第一次接触React会被它繁琐的依赖搞蒙, 居然依赖这么多东西
    • 2.2.1. 对于Vue来说,我们只是依赖一个vue.js文件即可, 但是react居然要依赖三个包。
    • 2.2.2. 其实呢, 这三个库是各司其职的, 目的就是让每一个库只单纯做自己的事情;
    • 2.2.3. 在React的0.14版本之前是没有react-dom这个概念的, 所有功能都包含在react里;
  • 2.3. 为什么要进行拆分呢？原因就是react-native
    - 2.3.1. react包中包含了react web和react-native所共同拥有的核心代码。
    - 2.3.2. react-dom针对web和native所完成的事情不同:
    • 2.3.2.1. web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
    • 2.3.2.2. native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

3. Babel和React的关系

  • 3.1. 表格关系如下：
    ES6+ babel工具
    React JSX语法 ----------> 普通的Javascript ----------> 直接运行在浏览器

  • 3.2. Babel是什么呢?

    • Babel, 又名 Babel.js。
    • 是目前前端使用非常广泛的编译器、转移器。
    • 比如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,开发时希望使用它。
    • 那么编写源码时就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。
    • 3.3. React和Babel的关系:
      • 默认情况下开发React其实可以不使用babel。
      • 但是前提是自己使用React.createElement来编写源代码, 它编写的代码非常的繁琐和可读性差。
      • 那么就可以直接编写jsx (JavaScript XML) 的语法，并且让 babel帮助我们转换成React.createElement。
      • 后续还会详细讲到;
      • 3.4. 项目打包时是不会打包babel的代码的。

4. 编写第一个React程序

  • 4.1. 添加依赖
    • 4.1.1. CDN引入
      <!-- CDN引入 -->
  <!-- crossorigin： 目的是为了拿到跨域脚本的错误信息 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    • 4.1.2. 下载引入
    • 4.1.3. npm下载引入(脚手架)
  • 4.2. 编写React代码(jsx语法)
    // 必须添加type="text/babel", 作用是可以让babel解析jsx语法
<script type="text/babel">
  // 2. 编写React代码(jsx语法)
  // jsx语法(浏览器不识别) -> (转变成)普通的Javascript代码 -> 使用babel(转变成js代码)
  // 渲染Hello World
  // React18之前： ReactDOM.render()
// ReactDOM.render(<h2>hello World</h2>, document.querySelector('#root'))
  // React18之后：
  const root = ReactDOM.createRoot(document.querySelector('#root'))
  root.render(<h2>hello World<
    /h2>
    )
    const app = ReactDOM.createRoot(document.querySelector('#app'))
    app.render(<h2>你好啊 李银河<
      /h2>
      )
      <
      /script>
  • 4.3. 完整代码如下：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        </head>
        <body>
          <!--
          1.添加react依赖
          1.1. 三个依赖包：
          - react: 包含react所必须的核心代码
          - react-dom: react渲染在不同平台所需要的核心代码
          - babel: 将jsx转换成React代码的工具
          1.2. 引入的方式：
          - CDN引入
          - 下载引入
          - npm下载引入(脚手架)
          -->
        <div id="root"></div>
        <div id="app"></div>
          <!-- CDN引入 -->
            <!-- crossorigin： 目的是为了拿到跨域脚本的错误信息 -->
            <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
              <!-- babel -->
              <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
                <!-- 必须添加type="text/babel", 作用是可以让babel解析jsx语法 -->
                    <script type="text/babel">
                    // 2. 编写React代码(jsx语法)
                    // jsx语法(浏览器不识别) -> (转变成)普通的Javascript代码 -> 使用babel(转变成js代码)
                    // 渲染Hello World
                    // React18之前： ReactDOM.render()
                  // ReactDOM.render(<h2>hello World</h2>, document.querySelector('#root'))
                    // React18之后：
                    const root = ReactDOM.createRoot(document.querySelector('#root'))
                    root.render(<h2>hello World<
                      /h2>
                      )
                      const app = ReactDOM.createRoot(document.querySelector('#app'))
                      app.render(<h2>你好啊 李银河<
                        /h2>
                        )
                      </script>
                    </body>
                  </html>
posted @ 2025-08-02 08:36  wzzkaifa  阅读(19)  评论(0)    收藏  举报