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.1.1.
- 2.2. 第一次接触
React会被它繁琐的依赖搞蒙, 居然依赖这么多东西- 2.2.1. 对于
Vue来说,我们只是依赖一个vue.js文件即可, 但是react居然要依赖三个包。 - 2.2.2. 其实呢, 这三个库是
各司其职的,目的就是让每一个库只单纯做自己的事情; - 2.2.3. 在
React的0.14版本之前是没有react-dom这个概念的, 所有功能都包含在react里;
- 2.2.1. 对于
- 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）。
- 2.3.2.1.
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的代码的。
- 3.4. 项目打包时是不会打包
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.1.1. CDN引入
- 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>
 ✨ | VerifyAccountUi（验证码组件）)
