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/ 目录中

相关推荐
小林攻城狮7 小时前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js
前端缘梦7 小时前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)
前端·react.js·全栈
张元清8 小时前
React useIntersectionObserver Hook:懒加载与可见性检测(2026)
javascript·react.js
用户2986985301412 小时前
在 React 中使用 JavaScript 将 Excel 转换为 PDF
javascript·react.js·webassembly
木木剑光14 小时前
我开源了一个 React 组件库,沉淀了多个高频组件和实用 Hooks
前端·javascript·react.js
Csvn15 小时前
React 19 `use()` 来了:以后数据加载可以不用 useEffect?
前端·react.js
许我半盏清茶16 小时前
前端路由:理解 hash 路由和 history 路由原理
前端·react.js
老王以为2 天前
React Renderer 分离的多平台架构
前端·react native·react.js
张元清2 天前
React useDebounce Hook:给状态和回调做防抖(2026)
javascript·react.js
YFF菲菲兔2 天前
useState 源码解析
react.js