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（驗證碼組件）)
