React -- HTML文件編寫react

1、基本概念

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

<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元素的容器html

<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值就是在元素上自定義的值：如namejava

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

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

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的方式，不能直接.方法獲取es6

2、渲染react元素

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

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

這樣就至關於把建立的App這個組件渲染到了頁面ID爲root的根元素裏面，展現在頁面，至於組件裏面用的數據就直接寫在元素上面，注意經過{}把數據包裹起來 react組件能夠嵌套的，像class這種方式是繼承，嵌套的話就是在另外一個組件中想要展現另外一個組件的地方直接書寫這個react組件便可瀏覽器