React+Type Script入門

本論文は読者に向けて:一定のjavascript基礎を持つ開発者
参考資料は以下の通りです.
1.初期化環境設定については、このオーディの記事を参照してください.
2.React中国語文書
関連記事React+TypeScript入門Type Script+React入門-----cssReact+TypeScript入門を導入します.A:Type ScriptはJavaScriptのオーバーセットです.純粋なJavaScriptにコンパイルできます.
Q:何のためにType Scriptを使いますか?
Q:Type ScriptはどうやってReact.jsを呼び出しますか?A:Type Scriptはreact.d.ts声明ファイル媒体を通じてReact.jsを呼び出すもので、Type Scriptで呼び出したい場合は、jsモジュールに対応が必要です.d.tsは以下のようにType Scriptを使用する入門について紹介しました.まず参考記事に基づいて簡単な開発環境を配置してください.配置が完了したら、ファイルディレクトリの構造は以下のようになります.
まず簡単な例を書きます.

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

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

ブラウザのlocal hostを開けます.8080でハローワールドが見えます.
次に、パラメータと状態を持たないコンポーネントUserを作成します.

class User extends React.Component{
    render(){
        return 
  User  
    };
}

const render = () => {
    ReactDOM.render(
        
           
            {new Demo().name}
            
        
,
        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{
    constructor(props:UserProp){
        super(props);
        this.state = {createTime: new Date()};        
    }
    render(){
        return 

                
  User  
                
     {this.props.name}
                
       {this.state.createTime.toString()}
                                
               
   
    };
}

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

vscodeを使うと、マウスをReact.Componentに移すことができます.
入門はここまで書いてください.