react 如何创建文件
创建 React 文件的基本方法
在 React 项目中，创建文件通常涉及组件文件、样式文件或工具文件。以下是常见操作方式：
手动创建文件 通过文件资源管理器或 IDE（如 VSCode）在项目目录中右键新建文件，命名时遵循 PascalCase（组件）或 kebab-case（其他文件）规范。例如：
MyComponent.jsx（组件）styles.module.css（样式）
命令行快速创建 使用终端命令快速生成文件（需提前进入项目目录）：
# Linux/macOS
touch src/components/MyComponent.jsx
# Windows
type nul > src/components/MyComponent.jsx使用代码生成工具
通过脚手架生成
使用 create-react-app 或 Vite 时，脚手架会自动生成初始文件结构。例如运行：
npx create-react-app my-app会生成 src/App.js、index.js 等核心文件。
组件模板扩展
配置 IDE 的代码片段功能（如 VSCode 的 User Snippets），可快速生成带模板的组件文件。典型 React 组件模板：
import React from 'react';
const ComponentName = () => {
return <div>Content</div>;
};
export default ComponentName;自动化脚本创建
编写 Node.js 脚本自动生成文件结构和基础代码。示例脚本 createFile.js：
const fs = require('fs');
const path = './src/components/NewComponent.jsx';
fs.writeFileSync(path,
`import React from 'react';
const NewComponent = () => {
return (
<div>
{/* 内容 */}
</div>
);
};
export default NewComponent;`
);运行脚本：
node createFile.js文件命名规范建议
- 组件文件：
PascalCase+.jsx扩展名（如Header.jsx） - 工具函数：
camelCase+.js（如formatDate.js） - 样式文件：
kebab-case+.css/.module.css（如main-styles.module.css） - 测试文件：
原文件名.test.js（如Button.test.js）
