如何预览react代码

使用本地开发服务器预览

安装并运行本地开发服务器是最常见的方式。确保已安装Node.js，通过以下命令创建并启动React项目：

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

默认情况下，开发服务器会在浏览器中自动打开 http://localhost:3000。

使用CodeSandbox在线预览

无需本地安装，直接在浏览器中编辑和预览React代码。访问CodeSandbox官网，选择React模板即可开始编写代码并实时预览效果。

通过VS Code插件实时预览

安装VS Code插件如Live Server或React Playground。打开React项目文件夹，右键点击HTML文件选择“Open with Live Server”，即可在浏览器中实时预览。

静态构建后预览

生成生产环境的静态文件后，可通过本地服务器预览：

npm run build
npx serve -s build

默认访问 http://localhost:5000 查看构建后的效果。

使用GitHub Pages部署预览

在package.json中添加homepage字段并运行：

npm install gh-pages --save-dev
npm run deploy

代码将部署到GitHub Pages，通过生成的URL在线预览。