2.React开发依赖分析_react的开发依赖-CSDN博客

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>