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

React入门案例-Hello React案例

需求

为了演练React,我们可以提出一个小的需求:
在界面显示一个文本:Hello World
点击下方的一个按钮,点击后文本改变为Hello React
但是,我们使用React实现之前,先使用原生代码来实现,这样更加方便大家对比React和原生:
当然,你也可以使用jQuery和Vue来实现,对它们分别进行对比学习

一.React开发依赖

开发React必须依赖三个库:
   react:包含react所必须的核心代码
   react-dom:react渲染在不同平台所需要的核心代码
   babel:将jsx转换成React代码的工具
  第一次接触React会被它繁琐的依赖搞蒙,对于Vue来说,我们只是依赖一个vue.js文件即可,但是react居然要依赖三个库。
其实呢,这三个库是各司其职的,目的就是让每一个库只单纯做自己的事情:
在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里。
为什么要进行拆分呢?原因就是react-native。
react包中包含了react和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同:
web端:react-dom会讲jsx最终渲染成真实的DOM,显示在浏览器中
native端:react-dom会讲jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIB

http://www.kler.cn/a/559503.html

相关文章:

  • 图论 之 弗洛伊德算法求解全源最短路径
  • QT闲记-工具栏
  • ICRA2024:CoLRIO,用于机器人群体的激光雷达测距-惯性集中状态估计
  • Linux | 进程控制(进程终止与进程等待)
  • Springboot中分析SQL性能的两种方式
  • TIKTOK矩阵系统的软件服务
  • C#上位机--循环语句
  • Unity VRoid+Blender+Unity 3D人物模型导入使用
  • DeepSeek掘金——基于DeepSeek-R1构建文档问答机器人
  • Linux 实用指令
  • ubuntu新系统使用指南
  • Ollama Open WebUI
  • 【Transformer架构】
  • AI知识架构之数据采集
  • React AJAX:深入理解与高效实践
  • matlab-17dof列车横向动力学模型
  • Unity Shader Graph 2D - 一个简单的魔法阵激活效果
  • 改BUG:Mock测试服务层的时候,应注入服务类的实现,而不是接口。
  • 生活教练项目_Trae
  • 【Java消息队列】应对消息丢失、重复、顺序与积压的全面策略