创建react移动端项目教程

最新推荐文章于 2024-02-20 09:04:59 发布
最新推荐文章于 2024-02-20 09:04:59 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 学习 文章标签： react.js typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42862581/article/details/122854655
版权
本文是一篇关于创建React移动端（H5）项目的教程，内容包括使用TypeScript初始化项目，集成Ant Design Mobile组件库，配置路由，以及添加Sass样式支持的步骤。
摘要由CSDN通过智能技术生成

创建react移动端（H5）项目教程：

1、创建项目并使用TypeScript

npx create-react-app antd-demo-ts --template typescript
或
yarn create react-app antd-demo-ts --template typescript

2、安装Ant Design Mobile组件库

npm install antd-mobile --save

3、安装路由

npm i react-router-dom@5.2
最低0.47元/天 解锁文章
小雪Margain
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react - 从脚手架开始建立一个移动端mobile项目
weixin_53532986的博客
11-05 1512
react -从脚手架开始建立一个移动端mobile项目 react （脚手架） 脚手架的安装，会使用yarn的建议使用yarn 1、npm install -g create-react-app 2、create-react-app my-app （my-app）为自己的demo名称 注：目录名不要使用大写，这样作只要是为了严谨性 成功安装之后运行npm start 即可。 假如打开页面没有出来 F12 调试器中报错 问题：用create-react-app工具生成react项
react项目搭建流程
m0_70156176的博客
04-08 143
target: "http://localhost:3000", // 后台服务地址以及端口号。changeOrigin: true, // 是否开启代理。"/api": "", // 代理名称。然后直接使用即可，无需下载@type/antd，antd中自带类型文件。推荐使用module的形式引入scss文件。使用插件设置代理来解决跨域问题。：同时写多个class。
react学习笔记--一--移动端项目搭建
weixin_42349568的博客
05-19 1287
一，初始项目搭建 npx create-react-app my-app cd my-app npm start 二，项目的目录结构设计 1，新建项目后把src下的东西全删除 2，然后创建相关的目录结构： 三，初始化配置移动端项目文件 1，引入antd-mobile 官网：https://mobile.ant.design/docs/react/introduce-cn 安装： npm install antd-mobile --save 2,index.html配置移动端参数 <meta n
react移动端项目基础搭建流程
weixin_44779945的博客
03-30 1283
一、react项目流程 create react app文档 1、安装 npm i create-react-app -g create-react-app myapp 或者 npx i create-react-app myapp 2、创建基本目录，将App.jsx移入layout中 入口找布局，布局找页面，页面找组件 -[myreactapp] 项目名 ---[src] -----[co...
React移动端项目准备（ts版）
最新发布
XiaoSen125_的博客
02-20 701
React移动端项目准备
手摸手！带你搭建react移动端项目环境。
weixin_43330752的博客
07-17 3328
最近有需求,需要开发一套react的webapp项目。所以自己搭建一套环境。具体如下 一：react项目构建使用脚手架：create-react-app 执行以下命令搭建项目 npm install -g create-react-app create-react-app my-app cd my-app npm start 创建后的结构如下。 此处注意！...
使用 React Native 构建跨平台移动应用的经验分享
韩进的博客
04-11 201
本文介绍了使用 React Native 构建跨平台移动应用的经验和技巧，包括开发环境搭建、页面布局和应用运行等方面。React Native 是一种简单易用、高效快捷的移动应用开发框架，适用于快速开发原生应用。
如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目
anli4451的博客
08-21 152
引言： 　　create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目。 　　通常我们开始做一个react项目的时候，都会自己利用 npm或者 yarn 安装项目所需要的一些依赖，再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码。 　　现在，如果你想要搭建一个完整的 react 项目环境，已...
React v16.9 H5 template
非著名程序猿
10-29 575
文章目录1、前言2、命令行3、修改UI稿尺寸原始匹配大小4、如何==自动生成雪碧图==5、React 书写规范6、当前文件目录解读7、==sentry异常代码监控==8、==eruda手机端调试面板==9、==hammer手势库==10、生成分析报告==Report==11、bundle生成tar包，并备份 1、前言 本项目适用于移动端H5混合开发的React项目，功能包括： 采用VW，字体自...
React+TypeScript+Mobx+AntDesignMobile进行移动端项目搭建
大灰狼的小绵羊哥哥的博客
07-19 1834
前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技术栈,使用Create-React-App脚手架进行一个移动端项目搭建，主要介绍项目搭建过程和相关配置,以及状态管理工具Mobx的使用,最后实现点击按钮数字+1和一个简单的TodoList小功能,希望能对大家有所帮助。GitHub代码地址 项目搭建具体步骤: 安装Create-React-App脚手架...
react快速开始(二)-使用脚手架Create React App创建react应用
西京刀客
01-29 8128
文章目录react快速开始(二)-Create React App入门什么是Create React App快速开始 react快速开始(二)-Create React App入门 什么是Create React App 英文官网：https://create-react-app.dev/ 中文：https://create-react-app.bootcss.com/ Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpa
React项目搭建的基本流程
qq_56989560的博客
07-28 1339
React项目搭建的基本流程
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
aoliei的博客
03-17 1820
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..
【营销App】—— react/ant design mobile项目爬坑
柳柳66的博客
11-29 141
一、H5制作 - 图片文本的动画效果 bug：打开一个模板，添加图片，添加动画效果，若先选定动画效果，再调节动画时间和延迟时间，则动画和延迟时间没有改变；若先调节动画时间和延迟时间在选定动画效果，则动画和延迟时间可以实现。 期望：先选定动画效果，再调节动画时间和延迟时间，动画和延迟时间也能实现。 问题原因：原代码中的动画数据保存时机设置在选择动画类型的时候 ...
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
react在移动端的自适应布局
沐光之辰
05-30 8139
1、移动端基本可以无阻碍的进行flex的弹性布局，这边对flex就不进行深究 2、可以进行依据窗口进行vw、vh、vmin、vmax单位的布局 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 具体描述如下： vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh...
React学习（一）——基础项目搭建以及环境配置
daxiazouyizou的博客
03-29 6万+
    大家好，我是凯文，本篇文章将介绍React前端框架的环境配置以及项目搭建方法，其中涉及到了node.js（js运行平台）、npm（依赖包管理工具）等内容。网上已经有许多类似的教程，这篇文章可以给各位做个参考，同时给我自己当做一个笔记。    React作为时下较为热门的前端框架，由facebook公司开创，用于搭建响应式的前端页面，这里不作太多介绍。下面我们直接开始搭建React框架运行环...
React移动端项目基础搭建流程（一）
WHTGS的博客
04-27 1040
1、框架安装 npx create-react-app ./ 安装结束，yarn start 测试项目是否能正常运行 2 分析项目 --重要 1、 哪些公共组件需要封装处理 2、要用到哪些技术，处理css用什么（styled-components，css，scss等）ui库用什么（ant-design等） 3、移动端适配问题处理 rem 还是postcss-px-to-viewport等方法 4...
create-react-app搭建react项目
马娟的博客
09-11 2757
1.全局安装create-react-app npm install -g create-react-app 2.创建项目 create-react-app 项目文件夹名 3.进入项目 3.1 cd 项目文件夹名 创建之后的项目目录 3.2运行项目 npm start 或npm run start 打开http://localhost:3000/查看运行成功后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值