丁鹿學(xué)堂:前端學(xué)習(xí)react指南(react的數(shù)據(jù)綁定和修改)
2023-07-31 22:11 作者:丁鹿學(xué)堂前端培訓(xùn) | 我要投稿
在html中使用react
今天跟大家分享react的基礎(chǔ)語法。
我們采用最簡單的方法,就是在html中引入react
因?yàn)橐簧蟻砭褪褂媚_手架的話,很多配置大家不一定清楚。
而在html中使用react的話,可以直接去學(xué)習(xí)react最基本的語法。
這是零基礎(chǔ)學(xué)習(xí)react的最佳實(shí)踐。
引入react的依賴
react也是js庫,所以我們在使用的時(shí)候需要引入react的依賴
react依賴的是三個包
1 react 包含react所必須的代碼
2 react-dom react在渲染不同平臺所需要的代碼
3 babel 講jsx轉(zhuǎn)換成react代碼的工具 ,jsx是react編寫代碼的采用的一種語法,默認(rèn)瀏覽器是不識別的,需要通過babel去編譯成瀏覽器識別的js代碼。
注意:
react的包引入必須在react-dom前面,babel則沒有順序要求。
react實(shí)現(xiàn)hello world
我們通過一個小案例,來入門react,知識點(diǎn)包含:dom渲染,事件,修改數(shù)據(jù)
注意:
1react18和react18之前的一些語法是不一樣的,我們使用最新的庫和寫法。
2jsx語法中,所有的變量都是通過{}
?的形式寫在dom中的
3 jsx中,點(diǎn)擊事件使用onClick去綁定。
標(biāo)簽: