項目目錄

package.json文件：包含核心兩個依賴（react、react-dom）和命令（start、bulid）

src：源碼目錄，開始之用的到index.js和App.js

index.js：是項目的入口，一切的運行起點

// 項目入口//導入核心庫
import React from 'react';
import ReactDOM from 'react-dom/client';//導入項目根組件
import App from './App';//把App根組件渲染到id為root的dom節點上
//在public/index.html中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <App />)

App.js：

//項目根組件//核心渲染路徑 App--index.jx--publi/index.html(root)
function App() {return (<div className="App">this is App component</div>);
}export default App;

什么是jsx

jsx的本質

---

jsx高頻場景

1，jsx中使用js表達式

2，jsx中實現列表渲染

主要是使用map方法

3，jsx中實現條件渲染

下面是兩種最簡單的條件渲染

4，jsx中實現復雜條件渲染

實現方案：自定義函數+if判斷語句

---

React基礎事件綁定

事件處理程序也是回調函數

回調函數

回調函數是指一個作為參數傳遞給另一個函數的函數，這個函數會在特定事件發生或某個操作完成后被調用。

工作原理

1. 定義一個函數（回調函數）
2. 將這個函數作為參數傳遞給另一個函數
3. 當特定條件滿足或事件發生時，接收函數會"回調"這個函數

????// 定義一個回調函數
function greeting(name) {console.log('Hello ' + name);
}// 定義一個接收回調函數的函數
function processUserInput(callback) {const name = prompt('Please enter your name.');callback(name); // 在這里調用回調函數
}// 使用回調函數
processUserInput(greeting);

使用事件對象參數e

下面e不是固定的，通常規范的叫e

傳遞自定義參數

jack就會傳遞到name的位置。下面一定是箭頭函數的寫法，而不是單純函數

既想要事件對象e還要自定義參數，怎么辦？

注意形參順序保持一致