React 起步

React 常用版本

• 16 版本：一些项目用的比较多
• 17 版本：语法没变，底层处理机制升级了
• 18 版本：机制和语法都有区别

React 项目中，默认会安装

• react：语法核心
• react-dom：视图渲染
• react-native：构建和渲染 APP
• react-scripts：封装了一些打包命令，会调用node_modules的webpack处理

创建项目

• 使用vite创建

npm create vite@latest

• 使用create-react-app创建

npx create-react-app my-app
cd my-app
npm start

组件必须以大写开头

function MyButton() {
  return <button>我是一个按钮</button>
}

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  )
}

JSX 编写标签

多个标签时，需要有一个根标签，<></>相当于Vue中的templete

function AboutPage() {
  return (
    <>
      <h1>关于</h1>
      <p>你好。<br />最近怎么样？</p>
    </>
  );
}

添加样式

需要用className

<img className="avatar" />

展示数据

用单括号里面为 js 变量

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  )
}

条件渲染

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>

循环

return (
  <ul>
    {products.map(product => (
      <li key={product.id}>{product.title}</li>
    ))}
  </ul>
)

响应事件

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}

注意

onClick={handleClick}的结尾没有小括号！不要调用事件处理函数：只需把函数传递给事件即可。

更新界面 useState

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>
}

props 接收参数

能接收到count与onClick

export default function MyApp() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <h1>共同更新的计数器</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>点了 {count} 次</button>
}