什么是JSX?

JSX = JavaScriptXML

 jsx是一种基于Ecmascript的一种新特性,
 是一种定义带属性树结构的语法,树结构就是我们的dom结构,属性就是dom节点中的属性

 jsx不是xml或者Html,不是一种限制。

在react中,我们可以使用jsx来编写代码,也可以使用纯javascript来编写代码,所以说即使你不学jsx也可以正常使用react 。

JSX的特点:

  1. 类XML语法容易接受
  2. 增强js语义
  3. 结构清晰
  4. 抽象程度高
  5. 代码模块化
 var SubSubComp = React.createClass({
        render:function(){
            console.log(this.props);
            return(
                

你想表达啥?

你喜欢React么?

) } }) React.render(,document.getElementById('app'));

 从上面的代码中,我们可以看出,jsx其实本质上就是js,他和js的区别就是可以直接在里面编写html标签,这在普通的js中是无法实现的,要想实现只能采用字符串的形式来拼接标签,但是在jsx中,可以原生的支持html标签。

注意: 

  1. react对于首字母的大小写是敏感的,如果一个组件的首字母是大写,那么react就知道他是一个自定义的组件,如果是小写,react就会把它当做自带dom的自带元素名
  2. 组件和组件之间,就像dom和dom之间,可以进行嵌套
  3. jsx标签使用的是驼峰命名
  4. 两个特殊的属性。html的标签中可以使用html属性和class属性,但是我们现在是在js的上下文中区编写html文件,html和class是js得保留字和关键字,所以我们不能直接把他写在js中,jsx解决这个问题的办法就是使用两个别名来代替他们,也就是htmlFor和className,如果我们要使用html和class属性,我们实际要写的是htmlFor和className

你可能感兴趣的:(React,reactjs,前端)