React+Taro创建小程序

第一步:首先确认是否安装Node.js和npm

如果已安装Node.js和npm,以下可以查询

javascript 复制代码
node -v
npm -v

第二步:安装Taro CLI

javascript 复制代码
npm install -g @tarojs/cli

第三步:创建项目

javascript 复制代码
taro init my-react-taro-app

然后可以看到,下图

第四步:进入到根目录

cd my-react-taro-app 安装依赖,个人建议使用cnpm,也可以使用npm。

javascript 复制代码
cnpm install

项目目录

第五步:启动到开发服务器

你可以通过以下命令启动不同平台的开发模式:

启动到微信小程序,之后可以在根目录看到dist文件,直接用微信开发者工具打开就可以预览效果。

javascript 复制代码
npm run dev:weapp

启动H5 开发环境

javascript 复制代码
npm run dev:h5

第六步:构成生产版本

当你准备发布时,可以使用以下命令进行构建:

复制代码
npm run build:h5

或构建微信小程序:

复制代码
npm run build:weapp

构建后的文件会放在 dist/ 目录中

相关推荐
半个落月4 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js
无人生还5 小时前
第 1 篇:从 Vue3 到 React 的思维转变
前端·vue.js·react.js
breeze jiang6 小时前
从原生事件到 React 组件化:用状态驱动模型加载进度 UI
前端·react.js·ui
名字还没想好☜7 小时前
React setState 连续调用「丢更新」排查:批量更新与函数式更新
前端·javascript·react.js·react·usestate
sugar__salt7 小时前
DeepSeek-R1 WebGPU (1):在浏览器里跑大模型
react.js·reactjs·react·端模型
小羊Yveesss7 小时前
模板建站哪个平台好?模板数量之外还要比较编辑与SEO能力
大数据·人工智能·小程序
张元清8 小时前
React useCookie Hook:把 Cookie 变成响应式状态(2026)
javascript·react.js
2501_916007478 小时前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
郑州光合科技余经理8 小时前
家政O2O平台解析:从0搭建上门预约小程序解决方案
android·java·开发语言·前端·小程序·架构·php
维双云9 小时前
小程序商城制作一个需要多少钱?2026报价明细与成本拆解
小程序