React基础 - JSX

// 导入React、React-DOM
// React负责创建React元素 - 虚拟DOM
// ReactDOM负责渲染React元素
// JSX - 插值表达式
// 表达式
// 1. 变量
// 2. 基本数据类型：string、number、boolean、undefined、null
// 3. 其他：三元、逻辑表达式、JSX

// 其中string和number正常显示而null、boolean、undefined不显示

import React from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import './base.css'
import App from './App'

// 通过React.createElement创建相关元素
// React.createElement('标签类型', {标签属性: 属性值}, '标签内容')
const root = ReactDOM.createRoot(document.getElementById('root'))
const title = React.createElement(
  'i',
  // 👨🏻 class在JS中属于关键字，class作为属性名，改为className
  { id: 'box', name: 'xxx', className: 'demo' },
  'we are the world'
)

const liNode01 = React.createElement('li', null, 'Banana01')
const liNode02 = React.createElement('li', null, 'Banana02')
const liNode03 = React.createElement('li', null, 'Banana03')

// 👩🏻‍🦰 class在JS中属于关键字，class作为属性名称，改为了className
const ulNode = React.createElement(
  'ul',
  { className: 'list' },
  liNode01,
  liNode02,
  liNode03
)

const ulNodeInJSX = (
  // 👍 JSX编写中必须存在根标签eg: <></> 或者 <React.Fragment></React.Fragment>
  <>
    <p>
      <span>username: Wangzz</span>
      <br />
      <span>age: 24</span>
    </p>
  </>
)
console.log('ulNode: ', ulNode)
console.log('ulNodeInJSX: ', ulNodeInJSX)

// 渲染React元素（React.render(React元素, DOMNode)
// ReactDOM.render()全局只能调用一次
const divNode = (
  <>
    <hr />
    <h1>{title}</h1>
    <hr />
    <p>123 - {789}</p>
    <h4>
      {null} - {String(null)}
      {undefined} - {String(undefined)}
      {true}
      {false}
    </h4>
  </>
)

// JSX - 插值表达式 - 引用数据类型
// 语法： {表达式}
// 表达式
// 1. 变量
// 2. 基本数据类型： string number boolean undefined null
// 3. 引用数据类型： object array function
// 4. 其他： 三元、逻辑且、JSX

// object 对象类型不能直接放在{}中
const userInfo = {
  type: 'div',
  name: 'Wangzz',
  age: 18,
  children: {
    name: 'Felix',
    age: 3,
  },
}

// array 数组类型，每一个元素都会形成一个DOM节点，可直接将其渲染出来
const list01 = [1, 2, 3]
const list02 = [
  <span>Apple</span>,
  <br />,
  <i>Orange</i>,
  <br />,
  <b>Banana</b>,
]

const userInfoNode = (
  <>
    <h5>用户名：{userInfo.name}</h5>
    <h3>{list01}</h3>
    <h3>{list02}</h3>
    {true}
  </>
)

// JSX - 插值表达式 - 其他数据类型
// 语法：{表达式}
// 1. 变量
// 2. 基本数据类型： string、boolean、number(bigint、symbol、null、undefined)
// string、number 正常显示  【boolean、undefiend、null】无法正常显示
// 3. 引用数据类型：object、array、function
// 对象不能放置在{}中
// 数组可以放置在{}中，数组内的每项元素都会被当作一个个DOM节点被处理
// 函数不能放置在{}中，函数的调用往往可以在放置在{}中
// 其他：三元/逻辑且/JSX

// 👳🏻‍♂️ 函数本身 不能直接放置在插值表达式中，函数的调用可以放置在{}中
function sayHello() {
  return 'we are the world'
}

const isLoading = false // 加载样式标志位

const h1Node = <h1>Hello React</h1>

// 条件渲染 - 类似 v-if
function loadData() {
  if (isLoading) {
    return <h1>加载中...</h1>
  } else {
    return <h2>we are the world</h2>
  }
}

const tableData = [
  {
    id: nanoid(),
    name: '镇安平台',
  },
  {
    id: nanoid(),
    name: '项目管理',
  },
]

const displayTableDataNode = tableData.map((item) => {
  console.log(item.id - item.name)
  return <li key={item.id}>{item.name}</li>
})
const dataNode = (
  <>
    <h1>{sayHello()}</h1>
    <h3>{isLoading ? '加载中...' : '加载完毕...'}</h3>
    <h5>{isLoading && '加载中...'}</h5>
    {h1Node}
    <h4>{[1, 2, 3]}</h4>
    <hr />
    <h5>{loadData()}</h5>
    <hr />
    {displayTableDataNode}
  </>
)

// JSX 列表渲染 - 数组渲染 - v-for
// 列表渲染：数组的map方法，返回一个JSX数组
// key的作用：类似于v-for中的key，提高Diff算法更新效率
// 口诀：有id用id，无id 通过 nanoid()生成即可

// JSX 样式处理
const titleStyleObj = {
  color: '#5b89fe',
  fontSize: 50,
}
const styleResolveNode = (
  <>
    <div>
      <h3 style={titleStyleObj}>尊重他人人生轨迹...</h3>
      <h1 style={{ color: '#86e0aa', fontSize: 30 }}>爱而不得才是人生常态！</h1>
      <div className="box2">we are the world</div>
    </div>
  </>
)

// 评论列表小练习
const commentData = [
  { id: 1, name: '演绎枪心魂', content: '给我一杯忘情水' },
  { id: 2, name: '尊贵丶8090', content: '不打扰，是我的温柔' },
  { id: 3, name: '难以割舍D情', content: '像我这样优秀的人' },
]

const commentNode = (
  <>
    {commentData.length ? (
      <div>
        <ul className="list">
          {commentData.map((item) => (
            <li key={nanoid()}>
              <h3>{item.name}</h3>
              <h5>{item.content}</h5>
            </li>
          ))}
        </ul>
      </div>
    ) : (
      <div>暂无数据~~</div>
    )}
  </>
)

root.render(commentNode)