React+TypeScript入門

本文面向讀者：具備必定的javascript基礎的開發人員

參考資料以下：

1.關於初始化環境配置請參見這位大佬的文章

2.React中文文檔

相關文章
React+TypeScript入門
TypeScript+React入門-----引入css
React+TypeScript入門-----BrowserRouter
Q：什麼是TypeScript？
A：TypeScript是JavaScript的超集，它能夠編譯成純JavaScript.

Q：爲什要使用TypeScript?
A:TypeScript有不少好處，說都說不完哈哈哈哈哈哈哈....

Q：TypeScript是如何調用React.js的？
A：TypeScript是經過react.d.ts聲明文件媒介來調用React.js的，
在TypeScript中若是要調用.js模塊，須要對應的.d.ts才能夠
如下是關於使用TypeScript的入門介紹了
首先根據參考文章配置好一個簡單的開發環境，配置完成以後文件目錄結構以下

首先咱們寫一個簡單的示例

import * as React from 'react';
import * as ReactDOM from 'react-dom';
class Demo {
    name:string = "";
    constructor(){
        this.name = "Hello World";
    }
}
const render = () => {

    ReactDOM.render(
        <div>           
            {new Demo().name}
        </div>,
        document.querySelector('#app')
    )
}
render();

打開瀏覽器localhost:8080就能夠看到Hello World了

接下來建立一個不帶任何參數和狀態的組件User

class User extends React.Component{
    render(){
        return <div>我是User組件</div>
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User />
        </div>,
        document.querySelector('#app')
    )
}

只須要很簡單的幾行代碼就能夠搞定

接下給組件添加傳遞props,和JavaScript不一樣的是，如今須要經過參數的形式顯示傳遞props，組件才能夠獲取到。state也是如此
User繼承自React.Component，React.Component是個泛型,接收三個參數P={},S={},SS=any，其中P表明props，S表明state,
SS我尚未搞清楚什麼意思

interface UserState{
    createTime:Date
}
interface UserProp{
    name:string
}
class User extends React.Component<UserProp,UserState>{
    constructor(props:UserProp){
        super(props);
        this.state = {createTime: new Date()};        
    }
    render(){
        return <div>
                <p>我是User組件</p>
                <p>個人名字是{this.props.name}</p>
                <p>個人建立時間是{this.state.createTime.toString()}</p>                                
               </div>   
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User name="李雷"/>
            <User name="韓梅梅"/>
        </div>,
        document.querySelector('#app')
    )
}

若是你使用的是vscode，能夠將鼠標移到React.Component上就會看到

入門就寫先到這裏吧