React 18 Core syntax

Create Project

npx create-react-app PROJECT_NAME

Example

1	`npx create-react-app my-react-app`

Run

1	`cd my-react-app`

1	`npm start`

Project Structure

1 2	`src/ 源码 public/ 静态页面资源`

src/index.js
项目入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

两个关键文件
一个叫做 React / ReactDOM

ReactDOM.createRoot() // 创建实例

React.StrictMode // 严格模式, 可以帮我们内部组件功能审查

根组件 App.js
默认就是.js后缀，故没有写.js也是ok

1	`import App from './App';`

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Q: React和ReactDOM有什么区别 ?

A:
React 和 ReactDOM 的主要区别在于它们的功能和用途：

React 是核心库，提供创建和管理组件的基础功能：
- 提供创建元素的 API（如 React.createElement）
- 包含组件的生命周期方法
- 提供 Hook API（如 useState, useEffect）
- 处理组件状态和属性
- 实现虚拟 DOM
ReactDOM 是渲染库，负责将 React 组件渲染到网页中：
- 提供与 DOM 相关的方法（如 ReactDOM.createRoot, render）
- 负责将 React 元素挂载到真实 DOM 中
- 处理事件系统
- 管理 DOM 更新和调和过程

这种分离设计允许 React 作为一个平台无关的库，而特定平台的渲染器（如 ReactDOM、React Native）则处理平台相关的实现。
这使得 React 的核心逻辑可以在不同平台上复用，同时只需要更换渲染器。

React有两种组件形式

一种是我们现在看到的函数式组件
另外一种叫做类组件

官方主推的是函数式组件
因为类组件的书写要十分的复杂和冗余

更加复杂的生命周期等函数的一个使用方式

教学采用函数组件的书写方式

可以发现
Javascript语法和HTML语法书写在了一起，这种语法叫做JSX。
相当于是一种模板语法。

只是相比Vue来说，JSX将HTML和JS结合更加深入
在Vue中你也可以尝试去使用JSX，只不过使用比较少

JSX 基本用法

根组件跟其他组件在语法使用上是没有区别的。
它只是一个层级上的关系。
所以借助这个组件做演示。

JSX 只能返回一个根元素

最外层有有个div时

在最外层套一个div
套一个<> </> // 在渲染的时候，不会产生额外的标签

使用HTML标签的时候要正确闭合

无论是单标签()，还是多标签

3. 插值

import './App.css';

function App() {
  const divContent = '标签内容'
  const divTitle = '标签标题'
 
  return (
      <div title={divTitle}>{divContent}</div>
  );
}

export default App;

3.1 条件渲染

function App() {
  const divTitle = '标签标题'

  const flag = true

  let divContent = null
  if (flag) {
    divContent = <span>flag为true</span>
  } else {
    divContent = <p>flag为false</p>
  }

  return (
    <div title={divTitle}>{divContent}</div>
  );
}

export default App;

注意不是

1	`divContent = "<span>flag为true</span>"`

JSX的正确写法就是不带”

3.2 列表渲染

import './App.css';

function App() {
  const list = ['小吴', '小李', '小花']

  const listContent = list.map(item => (
    <li>{item}</li>
  ))

  return (
    <ul>{listContent}</ul>
  );
}

export default App;

1
2
3

Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://react.dev/link/warning-keys for more information.

function App() {
  const list = [
    { id: 1, name: '小吴' },
    { id: 2, name: '小李' },
    { id: 3, name: '小花' }]

  const listContent = list.map(item => (
    <li key={item.id}>{item.name}</li>
  ))

  return (
    <ul>{listContent}</ul>
  );
}

export default App;

<>因为在渲染的时候会没有标签
Fragment来包裹

import { Fragment } from 'react'

function App() {
  const list = [
    { id: 1, name: '小吴' },
    { id: 2, name: '小李' },
    { id: 3, name: '小花' }]


  const listContent = list.map(item => (
    <Fragment key={item.id}>
      <li >{item.name}</li>
      <li> --------  </li>
    </Fragment>
  ))

  return (
    <ul>{listContent}</ul>
  );
}

export default App;

3. 事件处理

function App() {
  function handleClick(e) {
    console.log('点击了按钮', e)
  }

  return (
    <button onClick={handleClick}>按钮</button>
  );
}

export default App;

4. 状态处理

function App() {
  let divContent = '默认内容'

  function handleClick(e) {
    divContent = '新内容'
  }

  return (
    <>
      <div>{divContent}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

import { useState } from "react"

function App() {
  let [content, setContent] = useState('标签的默认内容')

  function handleClick() {
    setContent('新内容')
  }

  return (
    <>
      <div>{content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

点击按钮后，content会消失。

import { useState } from "react"

function App() {
  let [data, setData] = useState({
    title: '默认标题',
    content: '默认内容'
  })

  function handleClick() {
    setData({
      title: '默认标题',
    })
  }

  return (
    <>
      <div title={data.title}>{data.content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

应该的写法

import { useState } from "react"

function App() {
  let [data, setData] = useState({
    title: '默认标题',
    content: '默认内容'
  })

  function handleClick() {
    setData({
      title: '新标题',
      content: '新内容'
    })
  }

  return (
    <>
      <div title={data.title}>{data.content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

属性比较多的时候，使用…data。

import { useState } from "react"

function App() {
  let [data, setData] = useState({
    title: '默认标题',
    content: '默认内容'
  })

  function handleClick() {
    setData({
      ...data,
      title: '新标题'
    })
  }

  return (
    <>
      <div title={data.title}>{data.content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

注意：新属性写在后面

5.2 数组形式的状态

数组添加

import { useState } from "react"

function App() {
  const [data, setData] = useState([
    { id: 1, name: '小吴' },
    { id: 2, name: '小李' },
    { id: 3, name: '小花' }
  ])

  const listData = data.map(itme => (
    <li key={itme.id}>{itme.name}</li>
  ))

  let id = 3
  function handleClick() {
    setData([
      ...data,
      { id: ++id, name: '小花猫' }
    ])
  }

  return (
    <>
      <ul>
        {listData}
      </ul>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

过滤

import { useState } from "react"

function App() {
  const [data, setData] = useState([
    { id: 1, name: '小吴' },
    { id: 2, name: '小李' },
    { id: 3, name: '小花' }
  ])

  const listData = data.map(itme => (
    <li key={itme.id}>{itme.name}</li>
  ))

  function handleClick() {
    setData(data.filter(item => item.id !== 2))
  }

  return (
    <>
      <ul>
        {listData}
      </ul>
      <button onClick={handleClick}>按钮</button>
    </>
  );
}

export default App;

React 18 Core syntax

https://www.hardyhu.cn/2024/12/18/React-18-Core-syntax/

Author

John Doe

Posted on

December 19, 2024

Licensed under

React component communication and slots Previous

Deploy y-websocket Server Using Docker Next