素人の言語の活字体では（5） - プロジェクトの活字体で反応に使用

序文

では第二のセクション、私たちは、この次のセクションでWebプロジェクトの活字体の作成の使用を議論し、我々はどのように組み合わせるかについて議論活字プロジェクトとアプリケーションの種類を作成するために反応します。

レディ

プロジェクトの第二の部分に基づいてWebPACKの構成は、いくつかの変更を行います

反応し、タイプ@ /反応-DOM /タイプ@、反応し、反応し-DOM：依存リアクトを追加

WebPACKの構成ファイルを変更

次のようにwebpack.base.config.js、ファイルの残りの部分と第2部分一貫性の改正を変更します。

CONST HtmlWebpackPlugin =必要とする（ 'HTML-のWebPACK-プラグイン'）

module.exportsは= { 
    エントリ：{ 
        'アプリ'： './src/index.tsx' 
    }、
    出力：{ 
        ファイル名：「[名] [chunkhash：8 ]の.js' 
    }、
    解決：{ 
        拡張：[ 'の.js'、' .TS'、 '.tsx'] 
    }、
    モジュール：{ 
        ルール：[ 
            { 
                テスト：/\.tsx?$/i、
                使用：[ { 
                    ローダ： 'のTS-ローダ' 
                }]、
                除外する：/ node_modules / 
            } 
        ] 
    }、
    プラグイン：[ 
        新しいHtmlWebpackPlugin（{[ 
            テンプレート： './src/index.html'
        }）
    ]、
    最適化：{//拆包
        splitChunks：{ 
            チャンク：[すべて] 
        } 
    } 
}

　　

私たちは、エントランスこれが私たちのリアクト入口アセンブリであるindex.tsxします。

インデックスコンポーネントを変更

私たちは、次のように改正index.tsの2番目のセクションになります。

// CONSTこんにちは：文字列= 'こんにちはTypeScripy' 
// document.querySelectorAll（」アプリ'）[0] .innerHTML =ハロー

インポートからリアクト'反応' 
'反応-DOMを'からインポートReactDom 

' ./Helloからハローインポート' 

ReactDom.render（
    <ハローNAME ='タイプ'/>、
    document.querySelectorAll（'アプリ'）[0] 
）

　　

こんにちはコンポーネント

インポートからの反応「REACT」

挨拶{インタフェース
    名：文字列
}インタフェースタイプを定義するために使用//小道具

：=>の<div> props.nameハロー{} </ div> CONSTハロー=（グリーティング小道具）を

エクスポートハローをデフォルト

　　

tsconfig.jsファイルを変更します

サポートコンパイラオプションは、JSXとして修正される：「反応します」

プロジェクトの実行

NPMは、あなたが彼らのプロジェクトが稼働してきた見ることができます開始します。

githubのプロジェクト住所：  https://github.com/qixingduanyan/ts-react

あなたは、このようなReduxの-佐賀、Reduxの-サンクとして、自分のReduxの、ルータと非同期要求のミドルウェアを構成することができます

私も、単純な非同期要求の足場を構成し：https://github.com/qixingduanyan/typescript-react-app

概要

この記事ではまず、プロジェクトを反応させるの活字体を使用し、その中の原則を探求するために、彼らの知識を適用する方法を探ることです。

あなたは活字体プロジェクトでやりたい場合は、この第5節では、どのような活字体の使用はい理解しておく必要があり、あなたがより多くの標準TSXコードを記述できるようにする必要があります。

私のブログのアドレス：http://www.gaoyunjiao.fun/?p=140