main.js
// 基本配置
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App' //用于將其他組件引入的主頁面
ReactDOM.render(<App />, document.getElementById('root')) //root在public的index.html頁面中
App.js
// 基本配置
import React from 'react'
class App extends React.Component{
render () {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
export default App
JSX
/**
* 1.理解JSX是對(duì)象漱挚，變量=> 最終被 React.createElement()
* 轉(zhuǎn)化成瀏覽器能夠運(yùn)行的 React元素或React組件
*
* 2.jsx適用范圍
* 2-1.使用變量
* 2-2.使用表達(dá)式
* 2-3.可以使用函數(shù)（返回值要求是jsx對(duì)象）
* 2-4.嵌套react元素（組件）
*
* 當(dāng)JSX和UI組合使用時(shí)娜睛，會(huì)在視覺上有輔助作用杆兵，而且,
* 它還會(huì)使react展示出更多有用的錯(cuò)誤和警告消息
*/
===================== 一 JSX 是一個(gè)變量 ===========================
import React from 'react'
class testJsx extends React.Component {
render () {
const name = 'Wrold'
const element = <h1>Hello {name}</h1>
return (
<div>
<h1>{element}</h1>
{/* 可以在頁面顯示材原，但是會(huì)報(bào)錯(cuò) <h1> cannot appear as a child of <h1>*/}
</div>
)
}
}
export default testJsx
在這里插入圖片描述
===================== 二 JSX 是一個(gè)表達(dá)式 ===========================
import React from 'react'
const user = {
a: 'Hello',
b: 'Wrold'
}
const a = false
function testJsx () {
if (a) {
return <h1>{user.a + user.b},a new day</h1>
} else {
return <h1>a strange day</h1>
}
}
export default testJsx
在這里插入圖片描述
===================== 三 嵌入表達(dá)式 ===========================
import React from 'react'
function Add (user) {
return user.a + ' ' + user.b
}
const user = {
a: 'Hello',
b: 'Wrold'
}
const element = (
<h1>
{Add (user)}!!!!
</h1>
)
function testJsx () {
return (
<div>
{element}
</div>
)
}
export default testJsx
在這里插入圖片描述
===================== 四 JSX 表示對(duì)象 ===========================
import React from 'react'
const element = (
<h1> Hello Wrold </h1>
)
function testJsx () {
return <div>{element}</div>
}
export default testJsx
===================== 五 特定屬性 ===========================
const a = <div tabIndex='0'></div>
const element = <img src={user.avatarUrl}></img>
// 注意使用駝峰命名法窿侈，img標(biāo)簽使用后記得加閉合標(biāo)簽
引入組件名稱如果testJsx有大小寫念秧，則TestJsx首字母應(yīng)該大寫
元素
1.元素是react中最根本構(gòu)成见间，React 元素也是創(chuàng)建開銷極小的普通對(duì)象
2.React 元素是不可變對(duì)象聊闯。一旦被創(chuàng)建，你就無法更改它的子元素或者屬性
3.React 只更新它需要更新的部分
===================== 改變?cè)胤椒? ===========================
// 創(chuàng)建一個(gè)全新的元素并將其傳入
import React from 'react'
import ReactDOM from 'react-dom'
function testJsx() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
setInterval(testJsx, 1000); // 放置位置隨意
ReactDOM.render(element, document.getElementById('root')); // 缺少引入這個(gè)代碼將會(huì)失效
return element // 缺少return代碼將會(huì)報(bào)錯(cuò)
}
export default testJsx
在這里插入圖片描述
喜歡的話就請(qǐng)給我一些鼓勵(lì)米诉，讓我有動(dòng)力堅(jiān)持更新菱蔬，對(duì)于您的支持感激不盡
