創建一個react應用
這里使用create-react-app的腳手架構建項目（結構簡潔，基于webpack-cli），
npx create-react-app [項目名稱]使用其他腳手架構建項目可以參考：react框架，使用vite和nextjs構建react項目_vite + react+js項目構建-CSDN博客
?
成功構建后只需要關注兩個部分，package.json中的script腳本，start：啟動項目
src中的核心文件，index.js: 引入react的依賴,? ?App.js：根組件
可以先去除多余的文件
index.js
import React from 'react'; // 引入React庫
import ReactDOM from 'react-dom/client'; // 引入ReactDOM庫
import App from './App'; // 引入App組件const root = ReactDOM.createRoot(document.getElementById('root')); // 創建根節點
root.render(// 嚴格模式，排錯<React.StrictMode><App /></React.StrictMode>
);app.js
function App() {return (<div className="App"><h1>react基本語法</h1></div>);
}export default App;
以上是精簡后的文件目錄和文件內容，可以看出核心的引入庫為react和react-dom，整個框架也是完全基于js生成的
模板語法
模板語法就是在html結構中使用js變量渲染數據，
function App() {const title = '標題'return (<div className="App"><h1>react基本語法</h1><span>{title}</span></div>);
}export default App;我們在App組件（函數）定義一個變量，并使用{}插入html結構中，{}的功能就是將html環境轉換成js環境?，
?出來再標簽外插值，還可以再標簽內設置屬性，最終都會變成html的結構
function App() {const title = '標題'const box = 'box'return (<div className="App"><h1>react基本語法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div></div>);
}export default App;
組件渲染時要注意的幾點：
- 一個組件中返回的html結構只能有一個外標簽，可以使用<div></div>,<></>,它們的區別是一個最終會被div包裹，一個則不會有任何標簽再外圈（template）
- 對標簽元素設置類時使用className而不是class（防止和es6的class關鍵字搞混）
- 插入對象時使用{{}}，這表示{}中插入的時對象，最常用的就是style屬性
?列表渲染和條件渲染
function App() {const title = '標題'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))return (<div className="App"><h1>react基本語法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}</div>);
}export default App;
使用數組中的數據進行列表循環渲染時，使用map方法，map方法有返回值，可以將html的結構返回出來直接插入到組件的渲染結構中（虛擬節點），
function App() {const title = '標題'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))let show = falselet content = <span>{show?'這是條件為真的內容':'這是條件為假的內容'}</span>return (<div className="App"><h1>react基本語法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}{content}</div>);
}export default App;
當show為true和false時，span中的內容會相應發生改變，
可以看出在react中循環和條件都是基于原生js的方法實現的
jsx
????????jsx語法是js和XML結合的語法，它允許再js中使用類似Html的標簽元素作為值，類似于數字，字符串，要注意jsx的標簽并不是字符串，所以復制時不需要添加引號，同時使用return返回jsx的標簽時，要使用（）包裹，因為不使用（）js的語法會認為再return這一行函數就結束了，不會讀取到后續內容
let content = <span>{show?'這是條件為真的內容':'這是條件為假的內容'}</span> return (<div className="App"><h1>react基本語法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}{content}</div>);
同時你也可以將文件改成jsx后綴，因為react集成了jsx語法，所以使用js也可以成功識別出jsx
狀態管理
這里用上了一個hooks鉤子函數 ，useState,
const [show, setShow] = useState(false)它接受一個任意值，返回一個數組，里面包含一個由任意值生成的響應式變量，和這個響應式變量的修改方法，
比如上面修改的show變量，使用useState接受false布爾值，復制給show，同時生成setShow方法用來重新賦值show，因為show是只讀的不可被直接修改，
import { useState } from "react"function App() {const title = '標題'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))const [show, setShow] = useState(false)let content = <span>{show?'這是條件為真的內容':'這是條件為假的內容'}</span>function fn() {setShow(!show)}return (<div className="App"><h1>react基本語法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}<button onClick={fn}>click</button>{content}</div>);
}export default App;
此時點擊按鈕，會改變文字內容
注意：onclick接受一個函數名或者函數體，接受函數名時不能帶括號，如果需要傳參應該寫成函數體的格式
<button onClick={()=>fn()}>click</button>到這里react的基本語法就全部展示完了
)
