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

                  Hello React                                                            /script>                     Hello World!          ` 标签，然后通过Babel转换成在浏览器中真正执行的内容-->                     // 定义组件HelloWorld           var HelloWorld = React.createClass({                render : function(){                    return (                        
                            
this.props.children

      
查看更多关于React学习笔记（二）理解JSX_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115107