当前位置：首页 > news >正文

React开发依赖分析

news 2025/8/2 13:37:14

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>