React 启航

全球指数2024年12月13日...大约 3 分钟

学习 React 的好处

就业：全球 Web 开发首选框架、全栈工程师的首选
React：全球第一，既能构建 Web 应用，又能构建原生应用。
- 用组件创建用户界面、用代码和标签编写组件、可在任何 HTML 页面中添加 React
- 全栈 React 开发框架：Next.js、Remix
- 社区有数百万人
React vs Vue
React vs Vue

React 开发环境

Node 环境搭建

安装 fnm

# 安装 fnm (Fast Node Manager)
curl -fsSL https://fnm.vercel.app/install | bash
# 激活 fnm
source ~/.bashrc

安装 Node.js

# 安装并使用 Node.js v22
fnm use --install-if-missing 22
# 验证 Node.js 和 npm 版本
node -v
npm -v

使用 Corepack 安装 pnpm（pnpm 更快更省空间）
```
corepack enable pnpm
```

Node 环境一键升级脚本：node-upgrade.sh

#!/bin/bash

function fnmUpgrade() {
  local ver0=$(fnm --version)
  echo "upgrade: fnm $ver0"
  curl -fsSL https://fnm.vercel.app/install | bash -s -- --skip-shell
  local ver=$(fnm --version)
  if [ "$ver0" = "$ver" ]; then
    echo "fnm $ver0 nothing to change"
  else
    echo "fnm $ver0 upgrade to $ver"
  fi
}

function nodeUpgrade() {
  local ver=$(fnm ls-remote --latest)
  if [ ! -z "$(fnm ls|grep $ver)" ]; then
    echo "node $ver is latest"
    return 0
  fi
  
  local old="node: $(node -v), npm: $(npm -v)"
  fnm install $ver
  fnm default $ver
  local now="node: $(node -v), npm: $(npm -v)"
  
  echo "node upgrade from"
  echo "\t$old"
  echo "\t$now"
}

function pmUpgrade() {
  echo "pnpm: $(corepack pnpm -v)"
  corepack use pnpm@latest
  corepack enable pnpm
}

fnmUpgrade
nodeUpgrade
pmUpgrade

IDE

推荐安装：vscode
在线 IDE：react.new

React 项目搭建

使用 vite 创建 React 项目

# bash 中执行，项目名称：my-app，模板：react-swc-ts
pnpm create vite my-app --template react-swc-ts

# 创建成功后，进入项目目录启动项目
cd my-app
pnpm i
pnpm run dev

打开测试：http://localhost:5173/
使用.在当前目录创建项目：pnpm create vite . --template react-swc-ts
使用 vite 一步一步创建项目：pnpm create vite

升级 React 19

pnpm i react@latest react-dom@latest
pnpm i -D @types/react@latest @types/react-dom@latest \
  @vitejs/plugin-react-swc@latest eslint-plugin-react-hooks@latest \
  eslint-plugin-react-refresh@latest

升级所有的包

pnpm i react@latest react-dom@latest
pnpm i -D @eslint/js@latest @types/react@latest @types/react-dom@latest \
  @vitejs/plugin-react-swc@latest \
  eslint@latest eslint-plugin-react-hooks@latest eslint-plugin-react-refresh@latest \
  globals@latest typescript@latest typescript-eslint@latest \
  vite@latest

集成 tailwindcss

tailwindcss

# 进入项目目录
cd my-app

# 添加依赖
pnpm install -D tailwindcss postcss autoprefixer

# 创建 tailwind 和 postcss 配置文件
## tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p

配置：tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

新建 scss 文件：src/assets/styles/tailwind.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.tsx 中引入
```
import "./assets/styles/tailwind.scss";
```

测试效果，修改： App.tsx 内容如下

function App() {
  return (
    <div className="bg-red-800 text-white text-bold text-3xl">
      Hello world!
    </div>
  )
}
export default App

tailwind Editor 安装：Tailwind CSS IntelliSense

集成 shadcn-ui

shadcn/ui：Github、安装
vite 集成 shadcn-ui

修改 tsconfig.json 添加 compilerOptions

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

修改 tsconfig.app.json

{
  "compilerOptions": {
    // ...
    // 集成 shadcn-ui
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
  },
  // ...
}

修改 vite.config.ts

安装依赖：pnpm i -D @types/node