公司想建一個(gè)網(wǎng)站找誰(shuí)做百度網(wǎng)頁(yè)版登錄
慕課網(wǎng)react實(shí)戰(zhàn)
- 搭建項(xiàng)目
- 問(wèn)題
- 1.按照官網(wǎng)在index.tsx中引入antd出錯(cuò)?
- 2.typescript中如何使用react-router
- 3.react-router
- 3.1 V6
- 3.2 V5
- 3.3V6實(shí)現(xiàn)私有路由
- 4.函數(shù)式組件接收props參數(shù)時(shí)定義數(shù)據(jù)接口?
- 5.使用TypeScript開(kāi)發(fā)react項(xiàng)目:
- 6.要使一個(gè)組件擁有路由組件的history、location、match等屬性
- 7.書寫代碼規(guī)范上的一些問(wèn)題
- 8.使用redux和react-redux
- 8.1使用react-redux
- 8.2類式組件中使用react-redux
- 8.3函數(shù)式組件中使用react-redux(使用hooks函數(shù))
- 8.4使用redux
- 8.5異步處理redux-thunk——可以在action中處理異步任務(wù)
- 8.6自定義中間件
- 8.7redux-tooltik
- 9.I18n網(wǎng)站國(guó)際化
- 10.獲得全局?jǐn)?shù)據(jù)的兩種方式?
- 10.1 在類組件中使用高階函數(shù)
- 10.2在函數(shù)式組件中使用hooks
- 11.如何處理請(qǐng)求得到的html字符串為網(wǎng)頁(yè)
- 12.登錄相關(guān)
- 12.1單點(diǎn)登錄與JWT
- 13報(bào)錯(cuò)
- 網(wǎng)絡(luò)請(qǐng)求
- axios
- 對(duì)懸空數(shù)據(jù)做預(yù)處理!!!!!
- 避免在useEffect中一直請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
搭建項(xiàng)目
創(chuàng)建基于typescript的react項(xiàng)目:create-react-app react-travel --template typescript
安裝依賴:npm install typescript-plugin-css-modules --save-dev
問(wèn)題
1.按照官網(wǎng)在index.tsx中引入antd出錯(cuò)?
出錯(cuò)時(shí)因?yàn)槁窂絾?wèn)題:官網(wǎng)中是:import 'antd/dist/antd.css';
,但是在依賴目錄中沒(méi)有antd.css文件,只有reset.css,所以改變路徑即可:
import 'antd/dist/reset.css';
2.typescript中如何使用react-router
- react-router并沒(méi)有提供原生typescript的支持,所以我們需要安裝react-router的類型定義,
npm install --save-dev @types/react-router-dom
typescript的支持我們只在開(kāi)發(fā)過(guò)程中使用,所以安裝的開(kāi)發(fā)依賴中-dev(結(jié)余上線后的體積) - 怎么樣我們才能知道一個(gè)框架有沒(méi)有原生的支持typescript呢:
-上網(wǎng)搜
-直接使用,沒(méi)有出現(xiàn)類型的提示警告之類的,就是支持的。
3.react-router
3.1 V6
<Route path="*" element={<p>There's nothing here: 404!</p>} />
3.2 V5
函數(shù)式組件中使用
3.3V6實(shí)現(xiàn)私有路由
解決方案:
在v6中,您應(yīng)該將組件作為“元素”傳遞,例如像這樣:
<Route path="/" element={<Dashboard/>}>
4.函數(shù)式組件接收props參數(shù)時(shí)定義數(shù)據(jù)接口?
在利用typescript編寫react項(xiàng)目時(shí),函數(shù)式組件需要定義返回值類型。傳遞的props參數(shù)的類型,就是使用interface泛型定義的
5.使用TypeScript開(kāi)發(fā)react項(xiàng)目:
- 函數(shù)式組件寫法有區(qū)別與js的,區(qū)別就是函數(shù)式組件需要寫成箭頭函數(shù),傳遞props參數(shù)時(shí)需要指定類型,interface泛型。
- 什么時(shí)候使用ReactComponentProps
- 使用redux時(shí)需要做的處理
6.要使一個(gè)組件擁有路由組件的history、location、match等屬性
- 需要使用withRouter將組件包裹起來(lái)(reactrouter6以下版本),還可以使用useHistory、useLocation、useParams、useRouteMatch(函數(shù)式組件中)
- reactRouter6需要使用hooks鉤子,useXxxx,鉤子只能在函數(shù)式組件中使用
要在類式組件中使用的話,可以使用高階組件,對(duì)類組件進(jìn)行一個(gè)包裹,讓原始類組件擁有useNavigate功能
7.書寫代碼規(guī)范上的一些問(wèn)題
1. 函數(shù)式組件中元素調(diào)用方法時(shí)加不加括號(hào),寫不寫this,什么時(shí)候用箭頭函數(shù)
2.reducer中賦新值時(shí)的解構(gòu)
3. 什么是高階組件
8.使用redux和react-redux
8.1使用react-redux
npm i react-redux
,它并不原生支持typescript,需要再安裝npm install @types/react-redux --save-dev
8.2類式組件中使用react-redux
就是筆記中那樣,導(dǎo)入connect包裹連接UI組件和容器組件
8.3函數(shù)式組件中使用react-redux(使用hooks函數(shù))
使用鉤子函數(shù)useSelector(解決組件和store的耦合問(wèn)題),可以連接store
使用鉤子函數(shù)useDispatch()分發(fā)dispatch
使用完以上兩個(gè)鉤子函數(shù)后就可以直接連接起狀態(tài)數(shù)據(jù)和action了,不需要再導(dǎo)入store
Header組件
8.4使用redux
類式組件和函數(shù)式組件都一樣,在需要使用數(shù)據(jù)的地方,引入store,使用store.getStore()獲取數(shù)據(jù),使用store.dispatch()分發(fā)動(dòng)作
HomePage組件
8.5異步處理redux-thunk——可以在action中處理異步任務(wù)
8.6自定義中間件
8.7redux-tooltik
redux-tooltik.js.org
以下是編寫狀態(tài)管理
createSlice:action與reducer捆綁在一起了
將detail從MVC修改到redux-tooltik
以下是編寫異步數(shù)據(jù)操作
9.I18n網(wǎng)站國(guó)際化
這兩個(gè)框架本身就都支持原生typescript,不需要再額外安裝對(duì)typescript的類型聲明文件
10.獲得全局?jǐn)?shù)據(jù)的兩種方式?
10.1 在類組件中使用高階函數(shù)
10.2在函數(shù)式組件中使用hooks
11.如何處理請(qǐng)求得到的html字符串為網(wǎng)頁(yè)
要通過(guò)特定的API渲染
12.登錄相關(guān)
12.1單點(diǎn)登錄與JWT
JWT是干什么的
官網(wǎng):jwt.io
全稱為JSON Web Token,JWT的作用是用戶授權(quán),而不是用戶的身份認(rèn)證。
用戶授權(quán)
用戶授指當(dāng)前用戶有足夠的權(quán)限訪問(wèn)特定的資源(錯(cuò)誤狀態(tài)碼:403forbidden禁止訪問(wèn))
用戶認(rèn)證
用戶認(rèn)證指的是使用用戶名、密碼來(lái)驗(yàn)證當(dāng)前用戶的身份(就是用戶登錄,錯(cuò)誤狀態(tài)碼401Unauthorized未授權(quán))
解碼jwt
npm i jwt-decode
npm i jwt-decode @types/jwt-decode --save
const token = jwtDecode(jwt);
登錄持久化
npm install redux-persist
需要做的操作:
13報(bào)錯(cuò)
interface MyComponentProps extends RouteComponentProps {
touristRouteId: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ match, location, history, touristRouteId }) => {
const [data, setData] = useState<any>(null); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch(`API_URL/${touristRouteId}`); const data = await response.json(); setData(data); } catch (error) { console.error(error); } }; if (!data) { return <div>Loading...</div>; // 返回加載中的占位符 } return ( // 返回 JSX 元素 <div> <h1>{data.title}</h1> // ... </div> );};export default MyComponent;
Argument of type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to parameter of type ‘LanguageActionTypes’. Type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to type ‘InterLanguageNew’. Types of prope
網(wǎng)絡(luò)請(qǐng)求
axios
安裝axiosnpm i axios
自帶TS
對(duì)懸空數(shù)據(jù)做預(yù)處理!!!!!
先執(zhí)行構(gòu)造函數(shù),productList為空,緊接著會(huì)渲染UI,這時(shí)候?yàn)榭?#xff0c;而componnetDidMount會(huì)在組件完全掛載完后執(zhí)行,所以報(bào)錯(cuò)。
處理方法一:在沒(méi)有數(shù)據(jù)的時(shí)候顯示加載中…
避免在useEffect中一直請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
App.tsx
Header.tsx(顯示購(gòu)物車中有幾種)
DetailPage.tsx(添加到購(gòu)物車的動(dòng)作)