React学习笔记（二）理解JSX_html/css_WEB-ITnose

摘要

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的安装包可以到官网去下载）：