使用react脚手架初始化项目并启动项目

很久没有写了,兄弟们,我老王回来了。。。哈哈哈
vscode搭建脚手架,好兄弟们,一起干他
放在vscode的terminal里,为了防止忘记。一定要写清楚点
npx create-react-app my-app
搭建脚手架命令
安装好之后最后就是下面这个样子
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd my-app
npm start

Happy hacking!
然后就可以进行下一步了
进入到创建的my-app里
输入cd my-app
(yarn start)注意了,不是这个
应该输入npm start就成功了

my-app@0.1.0 start
react-scripts start


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用! 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。在使用过程中,如有问题或建议,请及时私信沟通。 5.期待你能在项目中找到乐趣和灵感,也欢迎你的分享和反馈! 【资源说明】 基于Nodejs和React hooks实现的知乎日报WebApp系统源码+详细项目说明.zip 知乎日报-WebApp zhihu 技术栈:create-react-app、React18、redux/react-redux「你可以使用mobx或者reduxjs/toolkit」、react-router-dom V6、Fetch、less、AntdMobile... 从零开始构建React项目「本项目不采用任何系解决方案(例如:淘系),就是基于最纯正的React实现开发」 1. 基于create-react-app创建工程化项目 $ npm i create-react-app -g $ create-react-app 项目名 --- $ yarn eject 暴露webpack配置项 修改脚手架默认的配置 + 配置less:less/less-loader@8 + 配置别名 @ 代表 src 目录「选配」 + 配置浏览器兼容 + 配置客户端启动服务的信息 + 配置跨域代理:http-proxy-middleware + 配置REM响应式布局的处理:lib-flexible、postcss-pxtorem + 配置打包优化 + ... 2. 准备一些项目开发必备的材料 src/api/http.js:fetch请求的二次封装 src/assets: + reset.min.css 清除浏览器默认样式 + images 静态资源图片 + utils.js 自己封装的常用方法库 + ... 3. 配置好REM响应式布局 && 样式处理 lib-flexible 设置REM和PX换算比例的 + 根据设备宽度的变化自动计算 + html.style.fontSize=设备的宽度/10+'px'; + 750设计稿中 1REM=75PX : 初始换算比例 + 375设备上 1REM=37.5PX postcss-pxtorem 可以把我们写的PX单位,按照当时的换算比例,自动转换为REM,不需要我们自己算了 ---- @1 假设设计稿还是750的,我们测出来多少尺寸,我们写样式的时候,就写多少尺寸,并且不需要手动转换为REM「我们在webpack中,针对postcss-pxtorem做配置,让插件帮我们自动转换」 const px2rem = require('postcss-pxtorem'); px2rem({ rootValue: 75, // 基于lib-flexible,750设计稿,就会设置为1REM=75PX;此时在webpack编译的时候,我们也需要让px2rem插件,按照1REM=75PX,把我们测出来的并且编写的PX样式,自动转换为REM; propList: ['*'] // 对所有文件中的样式都生效{AntdMobile组件库中的样式} }) @2 在入口中,我们导入lib-flexible,确保在不同的设备上,可以等比例的对REM的换算比例进行缩放!! @3 手动设置:设备宽度超过750PX后,不再继续放大!! 4. 配置路由管理 5. 配置redux架子 6. 其它的基础框架配置 7. 逐一开发项目,注意组件的抽离封装 8. 开发完毕后 + 项目优化 + 封装提取 + 内部测试 + 部署上线 知乎日报-后端 zhihu_admin 后端的数据接口分为两部分 + 从知乎日报官方实时拉取数据「新闻、新闻详情、新闻的评论数...」 + 自己研发的个人中心系统「登录/注册、发送验证码、个人信息获取和修改、收藏体系...」 后端技术栈: + Node、Express

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值