1. 虛擬dom:其實感覺就跟dom是一樣的，只不過是寫在js的結構中，而不是寫在html結構中。 此時需要babel去解析，遇到<認為是html，遇到｛｝認為是js變數。

<script type="text/babel">          //使用babel

　　//建立虛擬DOM，有兩種，一種不常用

　　　　let element1=React.createElement("h1",{id:"haha",className:"haha"},"這是利用createElement建立的dom");  //不常用

　　　　let e2=<h2>這是直接建立的dom</h2>   //寫法簡單，常用，相當於在js中寫html

　　//渲染虛擬dom

　　　　ReactDOM.render(e2,document.getElementById('example'));

</script>

2.https://www.jianshu.com/p/616999666920

虛擬dom是幹什麼用的？當要改變多次dom結構時，瀏覽器會改變一次渲染一次全流程，耗能。而虛擬dom則可以把更新的diff內容存在一個js物件中，最終將這個js物件一次性attach到dom樹上，然後再去通知瀏覽器繪製，避免了無謂的計算。

3.https://www.cnblogs.com/zourong/p/6043914.html

JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來建立虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

如下(JS寫法)

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

等價於(JSX寫法)

var root =(                                                       //js寫法
  <ul className="my-list">　　　　　　　　　　　　　　　　　　　　　　　　//xml的樣子
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);

待續----