React学习笔记(二)理解JSX_html/css_WEB-ITnose
程序员文章站
2022-04-03 23:50:28
...
摘要
JSX(JavaScriptXML)提供了一种在JavaScript中编写声明式的XML的方法,使用JSX可以提高组件的可读性,React允许做简单的JSX语法转化。
简介
JSX像是在JavaScript代码里直接写XML的语法,每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,React 官方推荐使用JSX,这个看个人习惯, 如果你喜欢纯JavaScript代码也是可以的,只是使用JSX会给我们带来如下好处:
- 是原生的JavaScript;
- 程序结构更容易被直观化;
- 提供更加语义化且易懂的标签;
- 抽象了React Element的创建过程;
- 允许使用熟悉的语法来定义HTML元素树;
- 可以随时掌控HTML标签以及生成这些标签的代码;
定义第一个组件
简单的理解组件就是对数据和方法的简单封装,目的就是模块化功能。在React当中组件是用来分离关注点的,而不是被当做模板或处理显示逻辑的,在使用React开发应用过程中,往往HTML标签以及生成这些标签的代码之间存在着内在的紧密联系,其实这一坨代码就可以理解为是一个组件。
接下来看一个简单的DEMO,定义我们的第一个组件,按照以往的游戏规则,我们就给他起一个文雅又响亮的名字——“HelloWorld”(React的安装包可以到官网去下载):
Hello React
上一篇: javascript怎么删除input
下一篇: js继承之js原型和原型链的详细介绍
推荐阅读
-
React学习笔记之事件处理(二)
-
《深入理解计算机系统》学习笔记(二)2.2~2.3
-
react 学习笔记第二次课
-
CSS学习笔记二_html/css_WEB-ITnose
-
css学习笔记二之inline-block_html/css_WEB-ITnose
-
css学习笔记二之inline-block_html/css_WEB-ITnose
-
HTML DOM(学习笔记二)_html/css_WEB-ITnose
-
React学习笔记之事件处理(二)
-
HTML学习笔记之二(回到顶部 与 回到底部)_html/css_WEB-ITnose
-
算法图解第二章--选择排序法(数组,链表的进一步理解)(学习笔记)