React入门介绍-JSX

JSX介绍

• React 使用 JSX 来替代常规的 JavaScript， 看起来很像 XML 的 JavaScript 语法扩展
• JSX 可以生成 React “元素”

JSX 中嵌入表达式

你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。以下代码实例

let arr=[1,2,3,4,5,6];
let obj={name:'hehe'}
ReactDOM.render(
    <div>
        <h1 className="active">你好</h1>
        <input type="text"/>
        <div>
            {arr}//得到  123456
            //不能直接放对象，可以放对象的属性,如果要显示对象
            使用JSON.stringify(obj)转一道。
            {JSON.stringify(obj)}  //得到{"name":"hehe"}
        </div>
     </div>,
    document.getElementById('root'),
    ()=>{
        console.log('挂载完成');
    }

)

注意：比起 HTML ， JSX 更接近于 JavaScript ， 所以 React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称。
例如，class 在JSX中变为className