react如何设置
设置React开发环境
安装Node.js和npm。React需要Node.js环境,可以从官网下载并安装最新稳定版本。安装完成后,命令行工具输入node -v和npm -v验证安装是否成功。
使用Create React App快速搭建项目。Create React App是官方推荐的脚手架工具,命令行运行npx create-react-app my-app创建新项目,my-app替换为项目名称。创建完成后进入项目目录cd my-app。
启动开发服务器。在项目目录中运行npm start,默认会在浏览器打开http://localhost:3000并显示React欢迎页面。开发服务器支持热重载,代码保存后自动刷新页面。
配置项目结构
src目录存放主要代码。src/index.js是应用入口文件,src/App.js是根组件。根据项目规模可创建components、pages、utils等子目录组织代码。
public目录存放静态资源。public/index.html是应用主页面模板,可修改标题或添加meta标签。静态资源如图片可直接放在public目录并通过绝对路径引用。
配置ESLint和Prettier。安装eslint和prettier相关依赖,创建.eslintrc.json和.prettierrc配置文件统一代码风格。VS Code可安装对应插件实现保存时自动格式化。
添加常用依赖
安装React Router。运行npm install react-router-dom添加路由功能,使用BrowserRouter、Routes和Route组件定义路由结构,实现多页面导航。
安装状态管理工具。Redux或MobX适用于复杂状态管理,运行npm install @reduxjs/toolkit react-redux安装Redux相关包,创建store和slice管理全局状态。
安装UI组件库。Ant Design或Material-UI提供预制组件,运行npm install antd安装Ant Design,按需引入组件加速开发。需配置CSS按需加载避免打包体积过大。
部署生产版本
构建优化代码。运行npm run build生成生产环境代码,工具会自动压缩和优化代码,输出到build目录。构建前可配置.env.production设置生产环境变量。
部署到服务器。将build目录内容上传到Web服务器如Nginx或Apache,配置服务器将所有请求重定向到index.html以支持前端路由。静态资源托管服务如Vercel或Netlify可自动化部署流程。

配置自定义域名。在DNS服务商处添加CNAME记录指向托管服务提供的地址,托管平台配置中添加自定义域名并启用HTTPS,确保应用通过安全连接访问。






