react的H5移动端工具（SPA\MPA都有）

置顶 已于 2024-07-08 20:28:23 修改
阅读量773 收藏 6
点赞数 7
文章标签： 前端框架 javascript react.js
于 2023-12-29 11:32:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36899949/article/details/135287112
版权

GitHub - lnjdsg/h5_framework: 基于react的H5移动端开发模版

能满足大部分H5移动端开发，有需要的可以下下来看看哈，点个star支持一下，也会持续更新

SPA 已路由形式实现页面跳转

MPA已MOBX状态管理（暂时不打算使用路由，看后面是否想搞了）

H5移动端开发解决方案

内置性能检测 错误检测 lighthouse集成 npm run 路径/webPerformance.js

会在更目录下 添加webPerformance.html文件查看性能跑分

launchPerformance.js frontendMonitoring.js 分别提供运行时FCP,LCP等数据 错误捕捉

更多功能 clone项目 慢慢去发现吧

前端语言JavaScript ， 前端框架React.js ， 状态处理工具 MobX

node版本v14-v16都可以 ， React版本确保16.8以上版本，确保支持Hooks API，当前React版本 v18

数据管理中心在store.js 通过makeAutoObservable自动观察

弹窗层modalStore 独立悬挂在App.jsx 和 页面层同级，但是层级 +1

打包工具webpack ， webpack版本^4.46.0

ui组件库引用 antd-mobile

registry=https://registry.npmmirror.com/

npm i安装依赖，如有版本兼容问题！运行npm install --legacy-peer-deps 兼容升降版本冲突

微醺rrrrrr
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-基于antdmobile的react项目模版
08-15
基于 antd mobile 的 react 项目模版
react+antd-mobile+vite移动端H5前端项目
qq_24229141的博客
01-08 704
react18+redux+antd-mobile+vite
React(6)，2024年最新移动端页面开发模版
最新发布
2401_84104439的博客
04-20 282
引入 react-dom 用于支持react操作DOM。引入prop-types 用于对组件标签属性进行限制。引入prop-types 用于对组件标签属性进行限制。引入babel，用于将jsx转为js。引入babel，用于将jsx转为js。此处一定要写babel。生产环境中不建议使用。引入react核心库。生产环境中不建议使用。组件实例对象属性ref。
React 开发一个移动端项目（1）
wbskb的博客
09-09 1400
react移动端项目（1）- react 常用技术栈、如何搭建一个 react 项目 、yarn 的基本使用、如何调整目录结构、Gitee/ Git 的基本使用
React v16.9 H5 template
非著名程序猿
10-29 565
文章目录1、前言2、命令行3、修改UI稿尺寸原始匹配大小4、如何==自动生成雪碧图==5、React 书写规范6、当前文件目录解读7、==sentry异常代码监控==8、==eruda手机端调试面板==9、==hammer手势库==10、生成分析报告==Report==11、bundle生成tar包，并备份 1、前言 本项目适用于移动端H5混合开发的React项目，功能包括： 采用VW，字体自...
从零开始搭建一套完整的基于 React 框架的 H5 项目「下载即用、收藏不亏」
XH_jing的博客
06-07 5064
最近需要新开一个基于 React 移动端的项目。由于网上完整的 H5 初始化项目比较少，所以在此总结一下如何从 0—1 开发一套基于 React 框架的 H5 初始化项目，下载就可以直接进行开发，欢迎大家点赞收藏。............
react-mobile:基于react的移动端H5框架
05-08
基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- webpack.release.js 发布配置 |-- docs 项目说明文档 |-- mocks 模拟数据服务 |-- src 项目开发目录 我们的代码从这里开始 |-- config 配置文件 |-- pages 页面模块 |-- styles 样式文件 |-- utils 工具函数文件夹
react-board:React H5 移动端项目模板
05-26
从零搭建 React 开发 H5 模板 项目创建 创建项目文件夹 mkdir react-demo cd react-demo npm init -y 依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev webpack 配置 区分开发环境 development 和生产环境 productio
轻松地React模板：简单易用的React工程化模板，适用于h5，webapp，混合开发
02-05
轻松地React模板 描述： react-template-easily是一套以React技术建造的项目模板，适用于移动端H5 ， webapp和hybirdApp开发。其中包含常用的20+常用组件，精细计算的rem，以及许多项目的实践。 网址： 演示： 大家可以看到Preact和React的Demo，都完美运行，目前不能改变 React运行时大小 精确的运行时大小 大家可以看到，同样的结构在压缩后（gizip），react的大小是preact包的2.68倍，差异在100kb 技术栈 React：16.4.2 react-dom：16.4.2 react-router-dom：4
React H5移动端实现原图对比特效
XloveL2021924的博客
11-05 331
react 移动端实现原图对比特效
react做h5 例子_从零搭建 React 开发 H5 模板
weixin_39737492的博客
12-21 1435
项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add react react-domyarn add webpack webpack-cli webpack-dev-server webpack-mergebabel-core babel-loader babel-polyfill babel-preset-env babe...
react 框架搭建
01-25
react 框架搭建，包含react,react-redux,expession等等等
react-基于Reactjs的移动端Web组件库使开发者只需专注js业务逻辑无需H5CSS开发
08-14
基于 React.js 的移动端 Web 组件库,使开发者只需专注js业务逻辑,无需H5,CSS开发
react-利用react全家桶以及蚂蚁金服antdmobile开发H5页面
08-15
利用react全家桶以及蚂蚁金服antd-mobile开发H5页面
基于react的H5移动端开发模版.zip
04-07
在IT行业中，React.js是一种非常流行的JavaScript库，用于构建用户界面，特别是在开发单页应用程序（SPA）时。这个“基于react的H5移动端开发模版.zip”文件显然提供了一个预配置的开发环境，专为创建面向移动设备的...
reactH5:react 全家桶 实现react 移动端项目
05-29
网上有很多针对vue封装的移动端UI组件库，但react的移动端UI组件库貌似只有Google的 material UI和阿里的 ant design mobile。阿里的下拉刷新又不符合项目的风格,只能 自己实现了。 采用better-scroll+react实现。 ...
H5移动端商城网站模板
04-17
2. **响应式设计**：H5移动端商城需采用响应式设计，确保在不同尺寸和分辨率的设备上都能正常显示和操作。这通常通过媒体查询（Media Queries）和弹性布局（Flexbox或Grid）来实现。 3. **移动优先策略**：由于...
一个H5页面中直接使用React的示例与说明
技术的学习与积累是个技术活
03-14 721
H5页面直接使用React的示例与原理说明
移动端 h5-table react版本支持虚拟列表
weixin_45485922的博客
01-19 1100
react h5 表格组件
react适配移动端
08-23
在React中适配移动端可以采用响应式设计的方式，使得应用在不同设备上都能有良好的显示效果和用户体验。可以CSS媒体查询来根据不同的屏幕尺寸应用不同的样式。例如，可以使用@media规则来定义适应不同屏幕尺寸的CSS样式。通过设置媒体查询的断点，可以针对不同的设备尺寸应用不同的样式。另外，可以使用React的移动端组件库，如Ant Design Mobile或React Native Elements，来快速搭建移动端界面，这些组件库已经对移动端的布局和交互做了优化，可以提高开发效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [移动端适配知识（react--张天禹）](https://blog.csdn.net/qq_44917015/article/details/121725516)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值