React 支持

Nasti 内置 React 支持,无需额外安装插件。

特性

快速开始

# 初始化项目
npm init -y
npm install react react-dom
npm install -D @nasti-toolchain/nasti @types/react @types/react-dom typescript

配置

// nasti.config.ts
import { defineConfig } from 'nasti-build'

export default defineConfig({
  framework: 'react',
})
TIP:framework 设为 'auto'(默认值)时, Nasti 会检测 package.json 中是否有 react 依赖来自动启用。

入口文件

// src/main.tsx
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)
// src/App.tsx
import { useState } from 'react'

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

  return (
    <div>
      <h1>Nasti + React</h1>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
    </div>
  )
}

HMR 行为

开发模式下,React 组件文件(.jsx / .tsx)的修改会触发 Fast Refresh: