# 基礎語法 ## 安裝 使用`npm`來安裝。需要安裝 `react`和`react-dom`。 `react `這個包，是專門用來創建React組件、組件生命周期等這些東西的； `react-dom` 里面主要封裝了和 DOM 操作相關的包，比如，要把 組件渲染到頁面上。 ## 使用JS的創建虛擬DOM節點 >在 react 中，如要要創建 DOM 元素了，只能使用 React 提供的 JS API 來創建，不能【直接】像 Vue 中那樣，手寫 HTML 元素 ### 語法 > React.createElement() 方法，用于創建 虛擬DOM 對象，它接收 3個及以上的參數 > 參數1： 是個字符串類型的參數，表示要創建的元素類型 > 參數2： 是一個屬性對象，表示 創建的這個元素上，有哪些屬性 > 參數3： 從第三個參數的位置開始，后面可以放好多的虛擬DOM對象，這寫參數，表示當前元素的子節點 舉例： 創建一個html結構` <div title="this is a div" id="mydiv">這是一個div</div> `通過 React.createElement()來創建 ```js var myH1 = React.createElement('h1', null, '這是一個大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '這是一個div', myH1) ``` ### 注意 創建完畢的元素并不會直接顯示到html元素中。使用 ReactDOM 把元素渲染到頁面指定的容器中. ## ReactDOM >里面主要封裝了和 DOM 操作相關的包，比如，要把 組件渲染到頁面上或者卸載組件等等 ## 語法 `ReactDOM.render(虛擬DOM或組件,顯示的位置)` ### 注意： ReactDOM.render() 方法的第二個參數，和vue不一樣，不接受 "#app" 這樣的字符串，而是需要傳遞一個 原生的 DOM 對象 舉例： ``` ReactDOM.render(myDiv, document.getElementById('app'))``` ## 相關代碼 <iframe width="100%" height="300" src="//jsrun.net/LFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ``` import React from 'react' import ReactDOM from 'react-dom' var myH1 = React.createElement('h1', null, '這是一個大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '這是一個div', myH1) ReactDOM.render(myDiv, document.getElementById('app')) ``` ## 總結 `React.createElement(參數1，參數2，參數3) ` > 參數1： 是個字符串類型的參數，表示要創建的元素類型 > 參數2： 是一個屬性對象，表示 創建的這個元素上，有哪些屬性 > 參數3： 從第三個參數的位置開始，后面可以放好多的虛擬DOM對象，這寫參數，表示當前元素的子節點 `ReactDOM.render(虛擬DOM或組件,顯示的位置,回調函數)`