个人理解：接触的JSX就是在React中render方法里面的js，因为里面只能有一个节点，所以你写的东西都在一个div中，要有js所以通过JSX来表达。（个人菜鸟理解，欢迎指正）

 

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

 

1.在JSX中注释需要下载花括号中，语法  {/*注释*/}

2.在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。

例：

usermane不为空

render(){        //usermane不为空        var username="阿泽大大";        return(                
     
                    
      
这里是主体内容部分
                    {
    /*这是注释的格式*/}                    {
    /*下面三元表达式*/}                     
      
{username=='' ? '用户未登录' : '用户名:'+username}
                
     
            )    }    //运行结果 用户名:阿泽大大  （运行时和前面一样，通过http://localhost:8080运行，webpack-dev-server）

usermane不为空

render(){        //usermane不为空        var username="";        return(                
     
                    
      
这里是主体内容部分
                    {
    /*这是注释的格式*/}                    {
    /*下面三元表达式*/}                     
      
{username=='' ? '用户未登录' : '用户名:'+username}
                
     
            )    }    //运行结果 用户未登录

3.布尔判断 true / false

例：

bool为真

render(){        //bool为真        var bool=true;        return(                
     
                    
      
这里是底部
                    {
    /*通过true/false来控制按钮是否被禁用; disabled={} 不用'',绑带动态属性时不用''*/}                    
      
                
     
            )    }    //运行结果 按钮被禁用

bool为真

render(){        //bool为假        var bool=false;        return(                
     
                    
      
这里是底部
                    {
    /*通过true/false来控制按钮是否被禁用; disabled={} 不用'',绑带动态属性时不用''*/}                    
      
                
     
            )    }    //运行结果 按钮正常使用

4.解析HTML

例：解析空格

render(){        //声明一个html        var html="HELLO WORLD";        return(                
     
                    
      
这是头部
                    
      
{html}
                
     
            );    }    //运行结果 HELLO WORLD 并没有将 解析为html的空格

解决方法1：对html的标记做Unicode转码 （http://tool.chinaz.com/）

render(){        //声明一个html        //进行了unicode转码( ---\u0020)        var html="HELLO\u0020WORLD";        return(                
     
                    
      
这是头部
                    
      
{html}
                
     
            );    }    //运行结果 HELLO WORLD 完成html空格解析

解决方法2：使用参数dangerouslySetInnerHTML进行html解码

render(){        //声明一个html        //进行了unicode转码( ---\u0020)        var html="HELLO WORLD";        return(                
     
                    
      
这是头部
                    {
    /*参数dangerouslySetInnerHTML 可能会造成XSS攻击*/}                    
      
                
     
            );    }    //运行结果 HELLO WORLD 完成html空格解析

还有更多JSX的内置表达式：http://www.runoob.com/react/react-jsx.html