# Javascript XML
###### tags: `React` `Javascript`
**建立Dom**

constant value = 'valueText';

constant domObject =
(
<div>
<h1>{value.toLowerCase()}</h1>
</div>
)

規則
1. 一個Dom內只能有一個根元素，如果不想要寫最外層則可用<React.Fragment></React.Fragment>或<></>
2. 標籤需要有明確的開始結尾
3. 內容為jsx標籤雖然跟html很像但不是，因此內部屬性會有差異
4. 標籤中混入js表達式要使用 {}
5. 指定class時要用className="xxxx"屬性
6. 指定樣式時要使用style={{width:"100px",border:"1px solid green"}} 外部{} 為表達式，內部{}為物件
7. 標籤規則 若寫小開頭則找html標籤 ，若大寫開頭則找react component

若使用js建立虛擬Dom則需將每個節點個別建立，過程相當繁瑣

constant domObject = React.CreateElement('h1',{id:'testH1'},'inner value');

最後將Dom渲染到畫面上

ReactDom.render(domObject , document.getElementById(...));//渲染到畫面上 ps.非append

在jsx中要顯示陣列資料時需要注意，在{}只能放入js表達式
1. 變數
2. 變數+變數
3. function()
4. arr.map()

而不能放入
for、if、switch

注意使用需要給一個屬性key而這個key為visual Dom唯一標示符號因此必須給值 (沒提到為什麼只有arr.map要寫)

arr.map((val,index)=>{
return '<li key={index}>'+{val}+'</li>'
})

而不建議直接用index。原因後面再說