新建react后如何

安装React项目

使用create-react-app快速搭建React项目，确保已安装Node.js（建议版本≥14）。在终端运行以下命令：

npx create-react-app my-app

my-app为项目名称，可自定义。安装完成后进入项目目录：

cd my-app

启动开发服务器

运行以下命令启动本地开发环境：

npm start

默认在浏览器打开http://localhost:3000，修改代码后页面会自动热更新。

项目结构说明

核心目录及文件：

• src/：源代码目录，主入口为index.js和App.js。
• public/：静态资源，如HTML模板和图标。
• package.json：依赖和脚本配置。

添加依赖

通过npm或yarn安装第三方库。例如安装路由库react-router-dom：

npm install react-router-dom

修改组件

编辑src/App.js文件，替换默认代码为自定义组件。例如：

function App() {
  return <div>Hello React</div>;
}
export default App;

构建生产版本

运行构建命令生成优化后的代码：

npm run build

输出文件位于build/目录，可直接部署到服务器。

配置代理（可选）

在package.json中添加代理解决跨域问题：

"proxy": "http://api.example.com"

使用CSS模块

创建.module.css文件实现样式隔离。例如App.module.css：

.title {
  color: red;
}

在组件中引入：

import styles from './App.module.css';
function App() {
  return <h1 className={styles.title}>Hello</h1>;
}