// app.tsx
function App() {
  return <div className="App">你好,这是我的第一个react项目!</div>;
}

export default App;
import { createRoot } from "react-dom/client"; // react18 的新方法, 创建根节点,替代原来的 createDOM

import App from "./App.tsx";  // 导入 app 组件,也是入口文件和顶级组件
/**
createRoot 接收一个 DOM 元素作为参数,返回一个根节点,在后面继续链式调用 render 方法渲染根组件到获取的 dom 元素中
*/
createRoot(document.querySelector("#root")).render(<App />);

react17 写法,不建议使用,后续可能会不再维护
import React from "react"; // react 核心包,在 17 之前不手动导入会报错,在 17 之后可选不用手动导入
import ReactDOM from "react-dom"; 
import App from "./App.jsx";  // 导入App组件，作为应用的入口

// 使用ReactDOM.render方法，将<App />组件渲染到id为"root"的DOM元素中
ReactDOM.render(<App />, document.querySelector("#root")); // 接收两个参数要渲染的结构和目标 DOM

import { createElement } from 'react-dom/client'
createElemnet('div',{id:'box',type:'div',className:'btn',onClick:()=>{alert('哎呀!你干嘛.')}},'你好!我是蔡徐坤') 

// 命令式编程
// 使用createElement创建一个react元素，就相当于我告诉你，我给你10块钱，出门右转，到第二个红路灯路口右转，到旁边的商店买一包盐，再怎么怎么回来
const button = createElement('button',{},'按钮')

// 使用jsx 面向结果声明式编程，以结果为导向
//  可以简单理解为，我告诉你家里炒菜现在没盐了，想办法整一包来，我不管你是使用什么方法 
const button = <button>我是按钮</button>

<script setup>
 const app = <div calssName="app">
          // 使用引号传递字符串
          {'php是世界上最好的语言'}
          // 识别变量
          const name = tom
          { name }
          // 函数调用
          const getUserInfo = () => {
              return { name: Tom , age: 18 }
          }
          { getUserInfo() }
          // 方法调用
          { New Date().getDate() }
          //使用js对象
          <div style={{color:'red'}}>Hello World</div> // 外层{ }识别表达式语法,内层{ }为对象
      </div>
</script>

import { Fragment } from "react/jsx-runtime";

export default function App() {
  return (
    <Fragment>
      <h1>Hello, world!</h1>
    </Fragment>
  )
}

简写形式
export default function App() {
  return (
    <>
      <h1>Hello, world!</h1>
    </>
  )
}

export default function App() {
  return (
    <>
     <div>
      { false + ''}
      <br />
      { true + ''}
      <br />
      { undefined + ''}
      <br />
      {JSON.stringify({name: 'tom', age: 30})}
      <br />
     </div>
    </>
  );
}

const heroList = [
  {
    id: 1,
    name: '锐雯',
    lane: '上单',
  },

  {
    id: 2,
    name: '泰拉米尔',
    lane: '上单',
  },

  {
    id: 3,
    name: '奎因',
    lane: '上单',
  },

  {
    id: 4,
    name: '奥恩',
    lane: '上单',
  },

  {
    id: 5,
    name: '亚索',
    lane: '中单',
  },

  {
    id: 6,
    name: '李青',
    lane: '打野',
  },

  {
    id: 7,
    name: '努努',
    lane: '打野',
  },

  {
    id: 8,
    name: '艾希',
    lane: 'ADC',
  },

  {
    id: 9,
    name: '薇恩',
    lane: 'ADC',
  },

  {
    id: 10,
    name: '卡特琳',
    lane: '辅助',
  },

  {
    id: 11,
    name: '莫德凯撒',
    lane: '辅助',
  },
]

function getHeroList() {
  return (
    <ul>
      {heroList.map(hero => (
        <li key={hero.id}>{hero.name}  分路:{hero.lane}</li>
      ))}
    </ul>
  )
}

export default getHeroList;

export const isLogin = false

export selectedValue = 1

export const getOptions = (val)=>{
if (val === 1) {
  return <div>选项1</div>
}else if (val === 2) {
  return <div>选项2</div>
}else {
  return <div>选项3</div>
 }
}

function App() {
    return (
        // 需要判断两个内容的显示隐藏的时候 可以使用 if else 或是使用简短的三元
    <div>{ isLogin ? '登录成功' : '未登录' }</div> // 未登录
        // 只需判断一个内容显示隐藏,无需使用 else 的时候,可以选择逻辑或 && 来判断,当值为真时,显示,否则反之
    <div>{ isLogin && '登录成功!' }</div>
        // 判断多组内容
        //无法在 jsx 内书写 if else 语句 我们通过调用函数来判断,在函数内进行 if else 判断
     <div>{ getOptions }</div>
    )
}

function myButton () {
    const handleClick = () => alert('喜中500万,请到缅北kk园区兑换!')
    return (
    <button onClick={ handleClick }>开奖</button>
    )
}

export default function App() {
  const handleClick = (e: any, value: object) => {
    console.log(e, value);
  };

  return (
    <>
      <button onClick={(e) => handleClick(e, {name: '123', age: 123})}>点击按钮</button>
    </>
  );
}

const App = () => {
 return (
  <>
  <div>hello</div>
  <User/>
  </>
 )
}

const User = () => {
  return (
    <div>Welcome</div>
  )
}

export default App;

const App = () => {
 return (
  <>
  <div>hello</div>
  <Abc.User/>
  <Abc.Info/>
  </>
 )
}

 const Abc = {
  User() {
    return <div>Welcome</div>
  },
  Info() {
    return <div>Info</div>
  },
}

const App = () => {
  const text = '你好 React！'
  return (
    <>
      <div>
        父组件
        <User
          name='张三'
          text={text}
        /> // 在父组件中使用属性向子组件传值
      </div>
    </>
  )
}

const User = ({ name, text }) => {
  return (
    <>
      <div>子组件：user界面</div>
      <div>{name}</div>
      <div>{text}</div>
    </>
  )
}
export default App

const App = () => {
  const getMsg = () => {
    alert('调用了父组件的方法')
  }
  return (
    <div>
      <h1>父组件</h1>
      <Child onClick={getMsg} />  // 这里的 onClick 相当于就是一个属性用来传递数据的，所以在点击时并不会触发点击事件
    </div>
  )
}
// 使用解构接收这个事件，并绑定在子组件的 button 按钮上
 const Child = ({ onClick }) => {
  return (
    <div>
      <h1>子组件</h1>
      <button onClick={onClick}>点击</button>
    </div>
  )
}

export default App

const App = () => {
  const getData = data => { // 接收子组件传递来的数据并打印
    console.log(data)
  }
  return (
    <div>
      <h1>父组件</h1>
      <Child getData={getData} />  // 向子组件传递了一个自定义函数
    </div>
  )
}
// 使用解构接收这个函数
const Child = ({ getData }) => {
  const text = '来自遥远的子组件的数据'
  return (
    <div>
      <h1>子组件</h1>
      <button onClick={getData(text)}>点击</button> // 在子组件中点击触发这个自定义函数，并传递数据
    </div>
  )
}

export default App

const App = () => {
  const data = {
    name: '张三',
    age: 18,
    gender: '男',
    address: '北京市',
    hobby: ['篮球', '足球', '游泳'],
  }
  return (
    <div>
      <h1>父组件</h1>
      <Child {...data} />
    </div>
  )
}

const Child = ({ name, age, gender, address, hobby }) => {
  return (
    <div>
      <h1>子组件</h1>
      <h3>{name}</h3>
      <h3>{age}</h3>
      <h3>{gender}</h3>
      <h3>{address}</h3>
      <ul>
        {hobby.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  )
}

export default App

const Son = ({children}) => {
  return(
    <div>{children}</div>
  )
}

const App = () => {
  return (
    <>
      <Son>
        <div>子组件中的数据</div>
      </Son>
    </>
  )
}

export default App

import { useState } from 'react'
import Son from './Son'

const App = () => {
  const [msg, setMsg] = useState('hello')
  const getMsg = msg => {
    setMsg(msg)
  }
  return (
    <>
      <div>
        <span>{msg}</span>
        <Son onGetMsg={getMsg} />
      </div>
    </>
  )
}

export default App

 // 在子组件中调用父组件的函数并传递实参
 const Son = ({onGetMsg}) => {
  const msgText: String = 'hello world'
  return (
    <>
      <div>
        this is Son:
        <button onClick={()=>onGetMsg(msgText)}>send</button>
      </div>
    </>
  )
}

export default Son

import { useState } from 'react'
import A from './A'
import B from './B'

const App = () => {
  const [msg, setMsg] = useState("")

  const getMsg = (text)=> {
    setMsg(text)
  }

  return (
    <>
    <A onGetMsg={getMsg} />
    <B msg={msg}/>
    </>
  )
}

export default App

const A  = ({onGetMsg})=> {
  const aText = 'this is a text'
  return (
    <>
    <div>page a</div>
    <button onClick={()=> onGetMsg(aText)}>send</button>
    </>
  )
}

export default A; // export default A;

const B  = ({msg})=> {
  return (
    <>
    <div>page b</div>
    <div>a 页面的数据：{msg}</div>
    </>
  )
}

export default B; // export default B;

const App = () => {
  const number = 100
  const data = 'App组件数据内容'
  return (
    <div>
      <h1>父组件</h1>
      <Child
        number={number}
        data={data}
      />
    </div>
  )
}

const Child = ({ number = 0, data = '默认显示的数据' }) => {
  return (
    <div>
      <h2>子组件</h2>
      {number}
      <hr />
      {data}
    </div>
  )
}

const Child = ({ number, data }) => {
  return (
    <div>
      <h2>子组件</h2>
      {number}
      <hr />
      {data}
    </div>
  )
}

Child.defaultProps = {
  number: 0,
  data: '默认显示的数据',
}
export default App

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
// 你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名
  return (
      <div>
        <div>{count}</div>
        <button onClick={() => setCount(count + 1)}>按钮</button>
      </div>
  )
}

import { useMemo, useState } from 'react'
import './App.css'

const App = () => {
  const [count, setCount] = useState(1)
  // useMemo 有两个参数，
  // 第一个参数是一个计算函数，返回一个经过计算缓存之后的值
  // 第二个参数是一个依赖数组，当依赖数组中的值发生变化时，才会重新计算缓存值

  const double = useMemo(() => {
    return count * 2
  }, [count])
  return (
    <>
      <button onClick={() => setCount(count + 1)}>double</button>
      <div className='fs20'>{double}</div>
    </>
  )
}

export default App

  import { useReducer } from 'react'

  function reducer(state,{type}) {
    if(type === 'inc') {
      return state + 1
    } else if(type === 'dec') {
      return state - 1
    } else {
      return state
    }
   }

function App() {
  const [state,dispatch] = useReducer(reducer,0)

  return (
    <>
      <button onClick={() => dispatch({type: 'dec'})}>-</button>
      &nbsp;
      <span>{state}</span>
      &nbsp;  
      <button onClick={() => dispatch({type: 'inc'})}>+</button>
    </>
  )
}
export default App

import React, { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <Child onClick={increment} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>增加</button>;
}

export default Parent;

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 直接访问 DOM 元素
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default TextInputWithFocusButton;

function App() {
 const inputRef = useRef(null)
 return (
  <>
  <Son ref={inputRef} />
  <button onClick={()=>inputRef.current.focus()}>获取焦点</button> //通过.current获取到组件实例来进行相应的操作
  </>
 )
}

export default App

// forwardRef 返回的还是一个组件
const Son = forwardRef((props,ref)=> {
  return <input ref={ref} />
})

function App() {
 const inputRef = useRef(null)
 // 调用子组件的方法获取焦点
 const focusHandler = () => inputRef.current.focusIpt()
 return (
  <>
  <Son ref={inputRef} />
  <button onClick={focusHandler}>获取焦点</button>
  </>
 )
}

export default App

// forwardRef 返回的还是一个组件
const Son = forwardRef((props,ref)=> {
// 获取dom实现聚焦
const iptRef = useRef(null)
const focusIpt = () => iptRef.current.focus()
// 把聚焦方法暴露出去
useImperativeHandle(ref,()=> {
  return {
    focusIpt
  }
})
  return <input ref={iptRef} />
})

import { useState } from 'react';

export default function MyApp() { 
  // 在 MyApp 组件中定义 count 状态和 handleClick 事件处理函数
  const [count, setCount] = useState(0);

  function handleClick() {
    // 当按钮被点击时，更新 count 状态
    setCount(count + 1);
  }

  return (
    <div>
      <h1>数据更新</h1>
      {/* 将 handleClick 函数和 count 状态通过 props 传递给 MyButton 组件 */}
      <MyButton onClick={ handleClick } count={ count }/>
      <br/>
      <MyButton onClick={ handleClick } count={ count }/>
    </div>
  );
}

// MyButton 组件接收 onClick 和 count 作为 props
function MyButton({ onClick, count }) {
  // 当按钮被点击时，调用父组件传递过来的 onClick 函数
  return (
    <button onClick={ onClick }>
      {/* 显示从父组件传递来的 count 值 */}
      当前数字为：{ count }
    </button>
  );
}

const App = () => {
  return (
    <div>
      <h1>父组件</h1>
      <Child />
    </div>
  )
}

const Child = () => {
  return (
    <div>
      <h2>子组件</h2>
      <Other />
      <List />
    </div>
  )
}

const Other = () => {
  return (
    <div>
      <h3>其他组件</h3>
    </div>
  )
}

const List = () => {
  return (
    <div>
      <h3>列表组件</h3>
    </div>
  )
}

export default App

const App = () => {
  const appData = 'App组件数据内容'
  return (
    <div>
      <h1>父组件</h1>
      <Child />
    </div>
  )
}

const Child = () => {
  const childData = 'Child组件数据内容'
  return (
    <div>
      <h2>子组件</h2>
      <Other data={childData} />
    </div>
  )
}

const Other = ({ data }) => {
  return (
    <div>
      <h3>其他组件 :{data}</h3>
    </div>
  )
}

export default App

const App = () => {
  const data = '父组件数据'
  return (
    <div>
      <h1>父组件</h1>
      <Child>
        <Other data={data} />
      </Child>
    </div>
  )
}

const Child = ({ children }) => {
  return (
    <div>
      <h2>子组件</h2>
      {children}
    </div>
  )
}

const Other = ({ data }) => {
  return (
    <div>
      <h3>其他组件{data}</h3>
    </div>
  )
}

export default App

// app.vue
<script setup lang="ts">
  import son from './components/son.vue'
</script>

<template>
  <son>
    <template #header>
      <h1>我是标题</h1>
    </template>

    <template #default>
      <p>我是内容</p>
    </template>

    <template #footer>
      <p>我是底部</p>
    </template>
  </son>
</template>

// son.vue
<template>
  <div class="root">
    <slot name="header"></slot>
    <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

const App = () => {
  return (
    <div>
      <h1>父组件</h1>
      <Child header={<h4>头部标题</h4>} body={<p>内容</p>} />
    </div>
  )
}

const Child = ({ header,body }) => {
  return (
    <div>
      <h2>子组件</h2>
      {header}
      <hr />
      {body}
    </div>
  )
}

export default App

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>数据更新</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      当前数据： {count}
    </button>
  );
}

import { createContext, useContext } from 'react'
//  1. 使用 createContext 创建一个上下文对象
//  2. 定义一个 Provider 组件，用于提供数据,在顶层组件使用
//  3. 在需要使用的地方通过 useContext 获取上下文中提供的对象，在需要使用数据的地方使用
const Context = createContext('')

const App = () => {
  const msg = '父组件的数据'
  return (
    <div>
      <Context.Provider value={ msg }> // 顶层组件提供数据
        父组件
        <Son />
      </Context.Provider>
    </div>
  )
}

const Son = () => {
  return (
    <div>
      子组件
      <Grandson />
    </div>
  )
}

const Grandson = () => {
  return (
    <div>
      孙子组件
      <Lower />
    </div>
  )
}

const Lower = () => {
  const value = useContext(Context)  // 使用 useContext 获取上下文中的数据
  return (
    <div>
      底层组件
      {value}
    </div>
  )
}
export default App

import { useState } from 'react'
// 把可复用的逻辑写在一个自定义的 hook 中，最后返回设定的值和方法，可以以数组或是对象的形式返回
const useToggle = () => {
  const [value, setValue] = useState(false)
  const toggle = () => setValue(!value)
  return [value, toggle]
}

const App = () => {
  // 使用自定义 hook
  // 调用 useToggle 返回的值和方法
  const [value, toggle] = useToggle()
  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <div>{value && 'Hello World'}</div>
    </div>
  )
}

export default App

// src/store/modules/user.tsx
import { createSlice } from '@reduxjs/toolkit';

// 创建一个包含初始状态、同步方法的 slice
const userSlice = createSlice({
  name: 'user',
  initialState: { token: '00002' },
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    delToken: (state) => {
      state.token = '';
    },
  },
});

// 解构出创建 action 对象的函数
const { setToken, delToken } = userSlice.actions;

// 获取 reducer 函数
const userReducer = userSlice.reducer;

// 导出 action 和 reducer
export { setToken, delToken };
export default userReducer;

// src/store/index.tsx
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './modules/user';

// 配置 Redux store
// 根 store 组装所有子模块 
const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default store;

# main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import {RouterProvider} from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store'
import router from './router'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
   <Provider store={store}>
    <RouterProvider router={router} />
   </Provider>
  </React.StrictMode>
)

import { useSelector, useDispatch } from 'react-redux'
import { setToken, delToken } from '../../store/modules/user'
function App() {
  const { token } = useSelector((state: any) => state.user)
  const dispatch = useDispatch()
  return (
    <>
      <span>{token}</span>
      <br />
      <button onClick={() => dispatch(setToken('123'))}>设置token</button>
      &nbsp;
      <button onClick={() => dispatch(delToken())}>删除token</button>
    </>
  )
}
export default App

pnpm i zustand

// 从 zustand 库导入 create 函数，用于创建新的 store 实例
import { create } from 'zustand';

// 使用 create 函数创建一个新的 store 实例
const userStore = create((set) => {
  // 返回一个对象，作为 store 的初始状态和方法
  return {
    // store 的初始状态，token 被初始化为 '0002'
    token: '0002',
    
    // 定义一个方法 setToken，接收一个 payload 参数，并使用 set 函数更新 token 的值
    setToken: (payload) => set({ token: payload }),
    
    // 定义一个方法 delToken，不接收任何参数，调用后将 token 更新为空字符串 ''
    delToken: () => set({ token: '' })
  }
})

// 将 userStore 导出为默认导出，以便在其他模块中使用
export default userStore;

import userStore from '../../store/modules/user'
function App() {
  const { token, setToken, delToken } = userStore()
  return (
    <>
      <span>{token}</span>
      <br />
      <button onClick={() => setToken('123456')}>设置token</button>
      &nbsp;
      <button onClick={() => delToken()}>删除token</button>
    </>
  )
}
export default App