新建react后如何

初始化项目

使用create-react-app初始化新项目，运行以下命令：

npx create-react-app my-app
cd my-app
npm start

项目将自动启动开发服务器，默认地址为http://localhost:3000。

项目结构说明

初始化后的目录结构如下：

my-app/
├── node_modules/       # 依赖库
├── public/             # 静态资源
├── src/                # 主要代码目录
│   ├── App.js          # 根组件
│   ├── index.js        # 入口文件
│   └── ...             # 其他默认文件
├── package.json        # 项目配置
└── ...                 # 其他配置文件

修改根组件

编辑src/App.js以自定义内容。例如替换默认代码为：

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

添加依赖

通过npm或yarn安装额外依赖，例如添加路由库：

npm install react-router-dom

配置基础路由

在src/index.js中设置路由示例：

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

环境变量配置

创建.env文件定义环境变量，变量需以REACT_APP_开头：

REACT_APP_API_URL=https://api.example.com

通过process.env.REACT_APP_API_URL在代码中访问。

生产环境构建

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

npm run build

构建结果位于build/目录，可直接部署到服务器。