React 支持
Nasti 内置 React 支持,无需额外安装插件。
特性
- 使用 OXC 进行 JSX/TSX 转译(比 Babel 快 20-50x)
- 自动 JSX runtime(
react/jsx-runtime,无需手动 import React) - React Fast Refresh 热更新(开发模式下组件状态保持)
- TypeScript 原生支持
快速开始
# 初始化项目
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:
- 组件内部状态在更新后保持
- 非组件文件的修改会触发页面完整刷新
- 语法错误会显示错误覆盖层