React基礎(chǔ)鞏固(二)——JSX注意點
為什么需要JSX？
- createElement存在的問題：
- 繁瑣不簡潔
- 不直觀，無法一眼看出所描述的結(jié)構(gòu)
- 不優(yōu)雅，開發(fā)體驗不好
- JSX
- 簡介：JSX 是 JavaScript XML 的簡寫，表示了在JS代碼中寫XML（HTML）格式的代碼
- 優(yōu)勢：聲明式語法更加直觀，與HTML結(jié)構(gòu)相同，降低學(xué)習(xí)成本，提高開發(fā)效率
- JSX 是 react 的核心內(nèi)容‘
- JSX 不是標(biāo)準(zhǔn)的JS語法，是JS的語法擴展。腳手架中內(nèi)置的
@babel/plugin-transform-react-jsx包用來解析該語法
JSX注意點
- 只有在腳手架中才能使用JSX語法，因為JSX需要經(jīng)過babel的編譯處理才能在瀏覽器中使用。腳手架中已經(jīng)默認(rèn)有了這個配置。
- JSX必須要有一個根節(jié)點，<></>
- 沒有子節(jié)點的元素可以使用/>結(jié)束
- JSX中語法更接近于JavaScript（class => className、for => htmlFor）
- JSX可以換行，如果JSX有多行，推薦使用（）包裹JSX,防止自動插入分號的bug
/**
* 1. 導(dǎo)入React和ReactDOM
* 2. 創(chuàng)建react元素 1.React。createElement 2.jsx
* 3. 渲染
*/
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
const element = (
<div id="box">
<h1>標(biāo)題</h1>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</div>
);
// 幽靈節(jié)點
const element_1 = (
<>
<div className="box">test</div>
<span>outman</span>
<a href="#">百度一下</a>
<img src="./abc.gif" alt=""></img>
</>
);
// 老版本：ReactDOM.render(element, document.getElementById("root"));
/**
* react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18.
* Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
* Learn more: https://reactjs.org/link/switch-to-createroot
*/
createRoot(document.getElementById("root")).render(element_1);
文章來源地址http://www.zghlxwxcb.cn/news/detail-489698.html
文章來源：http://www.zghlxwxcb.cn/news/detail-489698.html
到了這里，關(guān)于【前端知識】React基礎(chǔ)鞏固(二)——JSX注意點的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
