npm create vite@latest
# Project name: react_test
# Framework: React
# Variant: TypeScript (推荐) / JavaScript
cd react_test
npm install
npm run dev

react_test/
├── index.html          # 入口 HTML，里面有 <div id="root"></div>
├── src/
│   ├── main.tsx        # 应用入口：把 App 组件渲染到 #root
│   ├── App.tsx         # 根组件
│   └── ...

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

// Vue3: createApp(App).mount('#app')
// React: 把 <App /> 挂载到 id 为 root 的 DOM 节点
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// App.tsx
export default function App() {
  const name = '张三'

  // 返回的这段"HTML"就是 JSX
  return (
    <div className="person">
      <h2>姓名：{name}</h2>
      <button>按钮</button>
    </div>
  )
}

function Demo({ flag, age }: { flag: boolean; age: number }) {
  return (
    <div>
      {/* v-if / v-else-if：用三元表达式 */}
      {age >= 18 ? <p>成年人</p> : <p>未成年人</p>}

      {/* 只有 if 没有 else：用 && 短路 */}
      {flag && <p>flag 为真才显示</p>}

      {/* v-show：切换 style.display */}
      <p style={{ display: flag ? 'block' : 'none' }}>相当于 v-show</p>
    </div>
  )
}

const games = [
  { id: 'a01', name: '英雄联盟' },
  { id: 'a02', name: '王者荣耀' },
  { id: 'a03', name: '原神' },
]

function GameList() {
  return (
    <ul>
      {/* v-for="g in games" :key="g.id" 的 React 写法 */}
      {games.map((g) => (
        <li key={g.id}>{g.name}</li>
      ))}
    </ul>
  )
}

function Demo() {
  function handleClick(e: React.MouseEvent) {
    console.log('点击了', e.target)
  }
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log('输入了', e.target.value)
  }

  return (
    <div>
      <button onClick={handleClick}>点我</button>
      {/* 需要传参时用箭头函数包裹 */}
      <button onClick={() => handleClick2('参数')}>带参</button>
      <input onChange={handleChange} />
    </div>
  )
}

import { useState } from 'react'

function InputDemo() {
  const [text, setText] = useState('')

  return (
    <input
      value={text}                          // 数据 → 页面
      onChange={(e) => setText(e.target.value)}  // 页面 → 数据
    />
  )
}

import { useState } from 'react'

function Counter() {
  // 对照：let count = ref(0)
  // useState 返回 [当前值, 修改函数]，通常用数组解构接收
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({ name: '张三', age: 18 })

  function add() {
    setCount(count + 1)        // 对照 count.value += 1
    // 注意：不能写成 count = count + 1，普通变量改了不会触发重渲染
  }
  function changeAge() {
    // 对象类型必须"整体替换"，不能原地修改（与 reactive 完全不同！）
    setUser({ ...user, age: user.age + 1 })  // 展开旧对象 + 覆盖要改的属性
  }

  return (
    <div>
      <h2>计数：{count}</h2>
      <h2>姓名：{user.name}，年龄：{user.age}</h2>
      <button onClick={add}>+1</button>
      <button onClick={changeAge}>年龄+1</button>
    </div>
  )
}

import { useRef } from 'react'

function Demo() {
  // 1. 拿到 DOM 节点（对照 <h1 ref="title">）
  const titleRef = useRef<HTMLHeadingElement>(null)

  // 2. 存放一个不触发渲染的变量（对照普通 let 变量，但跨渲染保留）
  const timerRef = useRef<number>()

  function show() {
    console.log(titleRef.current)  // 通过 .current 访问 DOM 节点
  }

  return (
    <div>
      <h1 ref={titleRef}>标题</h1>
      <button onClick={show}>打印</button>
    </div>
  )
}

useEffect(() => {
  // 副作用逻辑：发请求、订阅、操作 DOM、设置定时器...

  return () => {
    // 可选：清理函数，组件卸载 / 依赖变化前执行（对照 onUnmounted）
  }
}, [依赖数组])

useEffect(() => {
  console.log('组件每次渲染后都执行')
})

import { useEffect, useState } from 'react'

function UserList() {
  const [list, setList] = useState([])

  useEffect(() => {
    // 对照 onMounted(() => { getData() })
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setList(data))
  }, [])  // 空数组 = 只执行一次

  return <ul>{list.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
}

const [count, setCount] = useState(0)

useEffect(() => {
  // 对照 watch(count, (newV) => {...})
  console.log('count 变成了', count)
}, [count])  // 只有 count 变化才执行

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000)

  return () => {
    clearInterval(timer)  // 对照 onUnmounted 里清定时器
  }
}, [])

import { useMemo, useState } from 'react'

function Demo() {
  const [firstName, setFirstName] = useState('zhang')
  const [lastName, setLastName] = useState('san')

  // 对照 computed(() => firstName + '-' + lastName)
  const fullName = useMemo(
    () => `${firstName}-${lastName}`,
    [firstName, lastName]  // 依赖变化才重新计算
  )

  return <p>全名：{fullName}</p>
}

import { useCallback, useState } from 'react'

function Parent() {
  const [count, setCount] = useState(0)

  // 这个函数在 count 不变时，引用保持不变
  const handleClick = useCallback(() => {
    setCount((c) => c + 1)
  }, [])

  return <Child onClick={handleClick} />
}

import { memo } from 'react'

function Child({ name }: { name: string }) {
  console.log('Child 渲染了')
  return <p>{name}</p>
}

// 默认导出时包一层 memo
export default memo(Child)

// hooks/useSum.ts
import { useState, useCallback } from 'react'

export function useSum(initial = 0) {
  const [sum, setSum] = useState(initial)

  const increment = useCallback(() => setSum((s) => s + 1), [])
  const decrement = useCallback(() => setSum((s) => s - 1), [])

  return { sum, increment, decrement }
}

// 组件中使用
import { useSum } from './hooks/useSum'

function App() {
  const { sum, increment, decrement } = useSum()
  return (
    <div>
      <h2>求和：{sum}</h2>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

// 定义 props 类型（对照 interface + defineProps）
interface PersonProps {
  name: string
  age?: number        // ? 表示可选
  onGetToy: (value: string) => void   // 函数类型 props
}

// 子组件：props 通过函数参数传入
function Child({ name, age = 18, onGetToy }: PersonProps) {
  return (
    <div>
      <h2>姓名：{name}，年龄：{age}</h2>
      <button onClick={() => onGetToy('奥特曼')}>把玩具给爸爸</button>
    </div>
  )
}

// 父组件：像写 HTML 属性一样传 props
function Father() {
  return <Child name="张三" onGetToy={(toy) => console.log(toy)} />
}

npm install react-router-dom

import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
  // BrowserRouter = Vue 的 history 模式（createWebHistory）
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

// App.tsx
import { Routes, Route, Link, Outlet } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function App() {
  return (
    <div>
      {/* 导航区：Link = RouterLink */}
      <nav>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>
      </nav>

      {/* 展示区：Routes + Route = RouterView + 路由规则 */}
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  )
}

function App() {
  return (
    <Routes>
      <Route path="/news" element={<News />}>
        {/* 子路由：path 不用写全，element 里写子组件 */}
        <Route path="detail" element={<Detail />} />
      </Route>
    </Routes>
  )
}

// News.tsx 里用 Outlet 占位（对照 <RouterView />）
function News() {
  return (
    <div>
      <h2>新闻列表</h2>
      <Outlet />   {/* 子路由组件渲染到这里 */}
    </div>
  )
}

// 定义时用 :id 占位
<Route path="/user/:id" element={<User />} />

// 跳转
<Link to="/user/123">用户 123</Link>

// 接收：useParams
import { useParams } from 'react-router-dom'
function User() {
  const { id } = useParams()   // 对照 route.params.id
  return <h1>用户 ID：{id}</h1>
}

// 跳转
<Link to="/search?keyword=react&page=1">搜索</Link>

// 接收：useSearchParams（比 Vue 麻烦一点）
import { useSearchParams } from 'react-router-dom'
function Search() {
  const [searchParams] = useSearchParams()
  const keyword = searchParams.get('keyword')  // 对照 route.query.keyword
  return <h1>关键词：{keyword}</h1>
}

import { useNavigate } from 'react-router-dom'

function Demo() {
  const navigate = useNavigate()

  function goHome() {
    navigate('/home')                     // 对照 router.push('/home')
  }
  function goBack() {
    navigate(-1)                          // 对照 router.back()
  }
  function replaceTo() {
    navigate('/login', { replace: true }) // 对照 router.replace()
  }
  function goWithParams() {
    navigate('/user/123')                 // params 直接拼在路径里
  }
  function goWithQuery() {
    navigate('/search?keyword=react')     // query 拼在路径后
  }

  return <button onClick={goHome}>去首页</button>
}

npm install @reduxjs/toolkit react-redux

// store/counterSlice.ts —— 一个"切片"，对应一个 Pinia 的 store
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',            // 对照 defineStore('count', {...})
  initialState: {             // 对照 state()
    sum: 0,
  },
  reducers: {                 // 对照 actions
    increment(state, action) {
      state.sum += action.payload   // 注意：RTK 内部用 immer，允许"看似原地修改"
    },
    decrement(state, action) {
      state.sum -= action.payload
    },
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

// store/index.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,   // 多个 slice 都挂在这里
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// main.tsx
import { Provider } from 'react-redux'
import { store } from './store'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
)

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/counterSlice'
import type { RootState } from './store'

function Counter() {
  // 读数据：useSelector，对照 useSumStore().sum
  const sum = useSelector((state: RootState) => state.counter.sum)

  // 修改数据：dispatch(action)
  const dispatch = useDispatch()

  return (
    <div>
      <h2>求和：{sum}</h2>
      <button onClick={() => dispatch(increment(1))}>+1</button>
      <button onClick={() => dispatch(decrement(1))}>-1</button>
    </div>
  )
}

import { createContext, useContext, useState } from 'react'

// 1. 创建 Context（对照 provide 的 key）
const ThemeContext = createContext('light')

function App() {
  const [theme, setTheme] = useState('light')
  return (
    // 2. Provider 提供数据（对照 provide('theme', value)）
    <ThemeContext.Provider value={theme}>
      <Child />
    </ThemeContext.Provider>
  )
}

function Child() {
  return <GrandChild />
}

function GrandChild() {
  // 3. useContext 消费数据（对照 inject('theme')）
  const theme = useContext(ThemeContext)
  return <p>当前主题：{theme}</p>
}

// 默认插槽（对照 <slot></slot>）
function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>
}

// 使用
<Card>
  <ul><li>内容</li></ul>
</Card>

// 具名插槽（对照 <slot name="header">）
function Layout({ header, footer, children }: { header: React.ReactNode; footer: React.ReactNode; children: React.ReactNode }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  )
}

// 使用
<Layout
  header={<h1>页头</h1>}
  footer={<p>页脚</p>}
>
  <p>主体内容</p>
</Layout>

// 作用域插槽（对照 v-slot="params"）：用 render props 实现
function GameList({ render }: { render: (games: Game[]) => React.ReactNode }) {
  const games = [{ id: 'a01', name: '英雄联盟' }]
  return <div>{render(games)}</div>
}

// 使用：传一个函数，函数参数就是子组件暴露的数据
<GameList render={(games) => (
  <ul>{games.map((g) => <li key={g.id}>{g.name}</li>)}</ul>
)} />

import { useReducer } from 'react'

interface State { count: number }
type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset' }

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return { count: 0 }
  }
}

function Demo() {
  const [state, dispatch] = useReducer(reducer, { count: 0 })
  return (
    <div>
      <h2>计数：{state.count}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
    </div>
  )
}

function Demo() {
  return (
    <>
      <h1>标题1</h1>
      <h2>标题2</h2>
    </>
  )
}
// 等价于 <React.Fragment>...</React.Fragment>

import { createPortal } from 'react-dom'

function Modal({ isShow }: { isShow: boolean }) {
  if (!isShow) return null
  // 把弹窗 DOM 渲染到 body 下（对照 <Teleport to="body">）
  return createPortal(
    <div className="modal">
      <h2>我是一个弹窗</h2>
    </div>,
    document.body
  )
}

import { lazy, Suspense } from 'react'

// 异步引入组件（对照 defineAsyncComponent(() => import(...))）
const Child = lazy(() => import('./Child'))

function App() {
  return (
    // Suspense 的 fallback 对照 Vue 的 v-slot:fallback
    <Suspense fallback={<h3>加载中......</h3>}>
      <Child />
    </Suspense>
  )
}

import { Component } from 'react'

interface Props { name: string }
interface State { count: number }

class Counter extends Component<Props, State> {
  state: State = { count: 0 }          // 对照 data()

  handleClick = () => {                 // 对照 methods
    this.setState({ count: this.state.count + 1 })  // 对照修改 data
  }

  componentDidMount() {                 // 对照 onMounted
    console.log('挂载了')
  }

  componentWillUnmount() {              // 对照 onUnmounted
    console.log('卸载了')
  }

  render() {                            // 对照 <template>
    return (
      <div>
        <h1>{this.props.name}</h1>      {/* 对照 this.xxx 访问 props */}
        <h2>计数：{this.state.count}</h2>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}