react學習(三)介紹JSX

標籤：出錯   dom   end   賦值   color   size   函數返回   create   cin   

參考：https://facebook.github.io/react/docs/introducing-jsx.html

一、JSX介紹

ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
紅色部分如果加一層‘‘號，會出錯，JSX既不是字串也不是HTML，它是JavaScript的文法拓展

二、JSX使用

1.使用大括弧嵌入js運算式

let a = "hello world";ReactDOM.render(<div>{a}</div>, document.getElementById(‘root‘));

2.JSX編譯之後是js對象，也就是說，可以賦值給變數，作為參數，或者函數傳回值等等

let a = ‘hello world‘;let b = <div>{a}</div>ReactDOM.render(b, document.getElementById(‘root‘));

3.使用JSX為屬性賦值

let a = ‘world‘;let b = <div className={a}>hello</div>//此處應該使用駝峰命名ReactDOM.render(b, document.getElementById(‘root‘));

4.JSX可以預防XSS攻擊，因為在渲染之前，他會把內容轉換為字串

三、JSX會被編譯成React.createElement()這種形式，來建立元素

 

react學習(三)介紹JSX