当前位置: 首页 > news >正文

React Native:使用vite创建react项目并熟悉react语法

目录

前言:

1.使用vite构建

2.点击页面上的图标

3.使用vscode打开项目my-app

4.如何启停vite构建的react服务

5.对源代码做增删改查


前言:

发现想写好react native 的程序,react的语法熟练度还是很重要的,而react 目前最好的构建工具当属vite。我个人之前写的程序绝大多数都是都断的程序,Python ,Java,C等,前端的话写过很多js框架,有些老框架甚至名字都记不起来了。现在虽然不是转向了前端开发,但是基于以前js,cs和html,vue的基础应该应该能很快入手react。那么就让我们开始react的学习和掌握吧!

推荐阅读:从零开始构建 React 应用 – React 中文文档https://zh-hans.react.dev/learn/build-a-react-app-from-scratch

1.使用vite构建

Use rolldown-vite (Experimental) 建议选择 No,因为这个是实验性构建底层工具,不过是未来方向,稍晚些再说。

Install with npm and start now?这句话的意思是说是否需要通过npm工具立刻下载相关的依赖到package.json

选择yes

依赖包下载完成,并默认运行了后端服务,请在浏览器访问服务地址:http://localhost:5173/

2.点击页面上的图标

分别会得到vite的开源网站和react的开源网站,当完成react的项目入门和熟练语法之后,应该更多的进入这两个官网进行学习和借鉴。因为其提供了很多更优美更高级的插件和梯子。

3.使用vscode打开项目my-app

打开app.jsx代码简直就是似曾相识,这不就是js+html+css吗?不过有几个区别或者说是特点:

其一:相较于js,其增加了模块导入功能,关键字文件开头的import

其二:html部分的代码出现在return的返回值中,而在传统的js代码里面是需要通过dom的write或者html()的方法动态的写到页面上去的。

其三:在return中多了一套空白<>组合。<></>据了解是jsx语法规定的

其四:导入css代码就像后端语言导入模块包一样,并不像原来需要link src 这样的链接定位语句

其五:return的html代码中,可以直接引用导入模块的变量,如src={reactLogo}

其六:代码文件末尾增加了export的语法,这个和nodejs的语法很像,比如nodejs的express 框架中非常常见。

其七:在文件中增加了函数的定义,且具备定义新的变量的能力,如

const [count, setCount] = useState(0)

其八:app.css与传统的css文件内部的语法无异,对于像我这样有css基础的会非常的熟悉

其九:打开main.jsx发现其导入了App.jsx,所以判断这个main.jsx应该是项目的主文件

其十:与任何传统的web项目一样,仍然需要index.html此类门户文件,打开index.html,发现其引入js的文件与传统的html发生了变化,type增加了model的模块文件类型,不再是text静态文件类型,且其src直接指向了main.jsx

4.如何启停vite构建的react服务

首先在黑窗口输入h,可以看到命令提示

那么我们选择了q,退出程序之后该如何启动呢?

就是进入my-app的项目目录,然后执行

npm run dev

可以启动vite服务,不过这个是用来做测试的,而不是生产级别的启动,这里先不做讨论。

5.对源代码做增删改查

我在顶级div的框中增加了:<h1>这是我第一次部署React 服务,请大家多多关照哦</h1>的内容,并且在浏览器同步刷新了,至此构建react web的基本流程和代码结构分析和熟悉完毕。

http://www.dtcms.com/a/415325.html

相关文章:

  • LazyLLM 学习
  • 服饰 公司 网站建设新会网页制作公司
  • 做网站开发的营业执照电商货源网站大全
  • Redis 主从同步:原理、配置与实战优化
  • 什么是网站反链企业建设网站风险
  • 毕业设计开题报告网站开发深圳哪家网站设计比较好
  • 常用的Python项目管理工具
  • 网站建设设计技术方案模板linux 下启动 wordpress
  • 温建设文件发布在哪个网站做网站需要ui设计吗
  • 数字孪生背后的通信协议:MQTT、OPC UA选型指南
  • Nest 身份鉴权与权限控制
  • C#系统日志
  • CMakeLists.txt语法(三)
  • 简单flash个人网站山东省建设教育集团网站首页
  • windows多显示器,独立的虚拟桌面
  • 国外的app设计网站企管宝官网
  • 深入解析 Redis 的两种持久化机制:RDB 与 AOF
  • 爱佳倍 北京网站软件外包公司是什么意思
  • SCNet平台—让AI更简单、更高效、更实用
  • 高流量网站设计菏泽网站开发公司
  • 做一个展示型网站要多少钱自己做本市网站
  • SSRF靶场环境命令执行靶场环境
  • 【数字孪生】02-数字孪生在各个领域的应用(1)
  • 网站字体样式重庆唐卡装饰口碑怎么样
  • wgcna 相关性热图中4个颜色 4个共表达模块 的模块基因是否都要做GO/KEGG分析”,核心取决于你的**研究目标和模块的生物学意义*
  • 什么是网站名称文件夹会展设计需要学什么
  • 第十六届蓝桥杯软件赛C组省赛C++题解(京津冀)
  • Spring Cloud 服务网关 Gateway 详解:微服务的 “统一入口” 实战
  • 基于 PyTorch 的模型测试与全局平均池化实践
  • 买软件网站建设福田祥菱v1单排