?(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
React介紹?
React是什么
React的優(yōu)勢?
React的市場情況?
開發(fā)環(huán)境搭建?
使用create-react-app快速搭建開發(fā)環(huán)境
嘗試運行程序?
react基本框架?
index.js
App.js
JSX基礎(chǔ)-概念和本質(zhì)
什么是JSX
JSX的本質(zhì)
JSX基礎(chǔ)-高頻場景
JSX中使用JS表達(dá)式
JSX中實現(xiàn)列表渲染?
JSX中實現(xiàn)條件渲染
React介紹?
React是什么
React由Meta公司研發(fā)，是一個用于 構(gòu)建Web和原生交互界面的庫
React的優(yōu)勢?
相較于傳統(tǒng)基于DOM開發(fā)的優(yōu)勢
? ? ??
相較于其它前端框架的優(yōu)勢
? ? ? ? ??
React的市場情況?
全球最流行，大廠必備
開發(fā)環(huán)境搭建?
使用create-react-app快速搭建開發(fā)環(huán)境
create-react-app是一個快速 創(chuàng)建React開發(fā)環(huán)境的工具，底層由Webpack構(gòu)建，封裝了配置細(xì)節(jié)，開箱即用
執(zhí)行命令：
npx create-react-app react-basic
1. npx Node.js工具命令，查找并執(zhí)行后續(xù)的包命令
2. create-react-app 核心包（固定寫法），用于創(chuàng)建React項目
3. react-basic React項目的名稱（可以自定義）
嘗試運行程序?
運行界面如下：
react基本框架?
index.js
//項目的入口 從這里開始運行
//react必要的兩個核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//導(dǎo)入項目的根組件
import App from './App';
import reportWebVitals from './reportWebVitals';
//將App根組件渲染到id為root的dom節(jié)點上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);App.js
//項目根組件
function App() {
return (
<div className="app">
this is app
</div>
);
}
export default App;JSX基礎(chǔ)-概念和本質(zhì)
什么是JSX
概念：JSX是JavaScript和XML（HTML）的縮寫，表示在JS代碼中編寫HTML模版結(jié)構(gòu),它是React中編寫UI模版的方式
優(yōu)勢：
1. HTML的聲明式模版寫法 2. JS的可編程能力?
JSX的本質(zhì)
JSX并不是標(biāo)準(zhǔn)的JS語法，它是JS的語法擴(kuò)展，瀏覽器本身不能識別，需要通過解析工具做解析之后才能在瀏覽器中運行
JSX基礎(chǔ)-高頻場景
JSX中使用JS表達(dá)式
在JSX中可以通過 大括號語法{} 識別 JavaScript中的表達(dá)式，比如常見的變量、函數(shù)調(diào)用、方法調(diào)用等等
1. 使用引號傳遞字符串
2. 使用JavaScript變量
3. 函數(shù)調(diào)用和方法調(diào)用
4. 使用JavaScript對象
注意：if語句、switch語句、變量聲明屬于語句，不是表達(dá)式，不能出現(xiàn)在{}中
// 項目的根組件
// App -> index.js -> public/index.html(root)
const count = 100
function getName () {
return 'jack'
}
function App () {
return (
<div className="App">
this is App
{/* 使用引號傳遞字符串 */}
{'this is message'}
{/* 識別js變量 */}
{count}
{/* 函數(shù)調(diào)用 */}
{getName()}
{/* 方法調(diào)用 */}
{new Date().getDate()}
{/* 使用js對象 */}
<div style={{ color: 'red' }}>this is div</div>
</div>
)
}
export default App
網(wǎng)頁顯示為：
JSX中實現(xiàn)列表渲染?
語法：在JSX中可以使用原生JS中的map方法遍歷渲染列表
const list = [
{ id: 1001, name: 'Vue' },
{ id: 1002, name: 'React' },
{ id: 1003, name: 'Angular' }
]
function App () {
return (
<div className="App">
this is App
{/* 渲染列表 */}
{/* map 循環(huán)哪個結(jié)構(gòu) return結(jié)構(gòu) */}
{/* 注意事項：加上一個獨一無二的key 字符串或者number id */}
{/* key的作用：React框架內(nèi)部使用 提升更新性能的 */}
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
}
export default App
網(wǎng)頁顯示為：? ? ? ? ? ??
?
JSX中實現(xiàn)條件渲染
語法：在React中，可以通過邏輯與運算符&&、三元表達(dá)式（?:）實現(xiàn)基礎(chǔ)的條件渲染文章來源：http://www.zghlxwxcb.cn/news/detail-713597.html
const isLogin = true
function App () {
return (
<div className="App">
{/* 邏輯與 && */}
{isLogin && <span>this is span</span>}
{/* 三元運算 */}
{isLogin ? <span>jack</span> : <span>loading...</span>}
</div>
)
}
export default App
網(wǎng)頁顯示為：? ? ??
?文章來源地址http://www.zghlxwxcb.cn/news/detail-713597.html
到了這里，關(guān)于前端react入門day01-了解react和JSX基礎(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
