React -- HTML文件編寫react

一、基本概念

要想在html文件里面書寫和使用react，必須要明白三個方法和概念
React這個是react的核心語法，是關鍵
ReactDOM這個是react操作DOM的特殊方法，ReactDOM.render()
Babel這個是解析es6語法的工具，讓老舊瀏覽器能夠識別
那要獲取這三個方法和概念，可以去下載響應的文件引入，也可以通過CDN引入，推薦CDN引入

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

接下里就是在html文件里面創建一個根元素，這個根元素就是react用來插入並渲染所有react元素的容器

<div id="root"></div>

最后就可以在script標簽里面寫react代碼了，但是這里有個重點，那就是script標簽的類型type，正常的script標簽類型是type="text/javascript"，而一般寫模板語法時，寫的類型是type="text/html"，但是react的script標簽的類型是type="text/babel"**記住一定要寫成這個類型，否則會報錯，解讀不了react代碼
react也是主要模塊化，組件化開發，所以可以把每一個功能或者方法寫成一個組件，react封裝組件的方法有兩種：
JS寫法
正常的JS寫法，類似於JS函數，一個函數就可以看成是一個組件，但是不同的是react里面函數名不再是調用函數的，而是react元素名，而且必須大寫開頭，因為react默認小寫開頭的元素為html原生語法，如div，'span'等，只有大寫開頭的元素才會解析成react元素（即組件），注意這個元素里面有個props對象參數，組件所需要的所有數據都是從這個參數里面獲取的，key值就是在元素上自定義的值：如name

function App (props) {
    return (
        <h1>Hello {props.name} !</h1>
    )
}

class寫法
class寫法其實就是typescript的類，通過extends繼承react組件，在這里面可以寫react的生命周期，隨意寫自己想要寫的東西，constructor方法是必須要有的，這個方法有個props參數，用來讓App組件可以使用元素上的定義的值，否則App拿不到值，而要App能夠使用props，必須通過super方法掛載一下

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render () {
        return (
            <h1>Hello {this.props.name} !</h1>
        )
    }
}

Tips
通過上面兩個寫法比較，可以發現有一點不同：
1、函數寫法的組件直接返回react元素，不需要render函數去渲染一下，在class方法里面渲染react元素，則需要通過render函數去轉換一下
2、函數寫法的組件獲取props對象的數據是直接通過.方法，但是在class里面則需要通過this.props.key的方式，不能直接.方法獲取

二、渲染react元素

想要將react元素渲染到DOM中，顯示出來則需要通過ReactDOM對象的render()方法

ReactDOM.render(<App name={react} />, document.getElementById('root'))

這樣就相當於把創建的App這個組件渲染到了頁面ID為root的根元素里面，展示在頁面，至於組件里面用的數據就直接寫在元素上面，注意通過{}把數據包裹起來
react組件可以嵌套的，像class這種方式是繼承，嵌套的話就是在另一個組件中想要展示另一個組件的地方直接書寫這個react組件即可