React基础——JSX语法

JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。

虽然你可以完全不使用JSX语法,只使用JS语法,但还是推荐使用JSX,可以定义包含属性的树状结构的语法,类似HTML标签那样的使用,而且更便于代码的阅读。

使用JSX语法后,你必须要引入babel的JSX解析器,把JSX转化成JS语法,这个工作会由babel自动完成。同时引入babel后,你就可以使用新的es6语法,babel会帮你把es6语法转化成es5语法,兼容更多的浏览器。

我们从最简单的一个官网例子helloworld开始:

  
    
    
      
      Hello React!
      
      
      
    
    
      

在这个简单的例子中,看不出来有任何jsx语法的地方,当其中

Hello,world

就是使用到了jsx语法。HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。如果转化成纯JavaScript 的话,就是:

    

在上述JSX语法中有两个要注意的地方:

你可能感兴趣的:(前端,React.js,React.js,jsx)