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是对象，变量=> 最终被 React.createElement()
* 转化成浏览器能够运行的 React元素或React组件
*
* 2.jsx适用范围
* 2-1.使用变量
* 2-2.使用表达式
* 2-3.可以使用函数（返回值要求是jsx对象）
* 2-4.嵌套react元素（组件）
*
* 当JSX和UI组合使用时，会在视觉上有辅助作用，而且,
* 它还会使react展示出更多有用的错误和警告消息
*/
===================== 一 JSX 是一个变量 ===========================
import React from 'react'
class testJsx extends React.Component {
render () {
const name = 'Wrold'
const element = <h1>Hello {name}</h1>
return (
<div>
<h1>{element}</h1>
{/* 可以在页面显示，但是会报错 <h1> cannot appear as a child of <h1>*/}
</div>
)
}
}
export default testJsx
在这里插入图片描述
===================== 二 JSX 是一个表达式 ===========================
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
在这里插入图片描述
===================== 三 嵌入表达式 ===========================
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 表示对象 ===========================
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标签使用后记得加闭合标签
引入组件名称如果testJsx有大小写，则TestJsx首字母应该大写
元素
1.元素是react中最根本构成，React 元素也是创建开销极小的普通对象
2.React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性
3.React 只更新它需要更新的部分
===================== 改变元素方法 ===========================
// 创建一个全新的元素并将其传入
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')); // 缺少引入这个代码将会失效
return element // 缺少return代码将会报错
}
export default testJsx
在这里插入图片描述
喜欢的话就请给我一些鼓励，让我有动力坚持更新，对于您的支持感激不尽
