ReactはType ScriptとMobxを結合して初めて体験します.

なぜType Scriptを使いますか?
誤りを偵察する
静的タイプの検出によって、プログラムに隠されている論理エラーが早く検出されます.JavaScriptのダイナミックな弱タイプの言語に対しては、柔軟性が高いですが、初心者にとっては、JavaScript内部の言語メカニズムに慣れていないと、隠し事故を起こしやすいです.しかし、Type Scriptによる静的タイプ検出は、これらの問題を回避することができ、変数によって生成されるタイプを制約することができるからである.IDEエディタを結合すると、変数に対応するタイプと内部の構造を導出し、コードのロバスト性とメンテナンス性を向上させます.
抽象的
タイプシステムは標準プログラミングを強化できます.Type Scriptは定義インターフェースを提供します.大きな複雑なアプリケーションを開発するには非常に重要であり、一つのシステムモジュールはType Script定義のインターフェースとして抽象的に見ることができる.設計を実現から逸脱させ、最終的にIDL(インターフェース定義言語、Interface Define Language)を体現し、プログラム設計を本質に回帰させる.
文書
Type Scriptは、タイプ別に自動的にドキュメントを作成します.簡単な機能の実現にはコメントを作成する必要はありません.
なぜMobxを使うのですか?
MobXとReduxの比較
まずmobxとreduxの位置付けが違います.reduxが管理するのは(STORE->VIEW->ACTION)の全閉ループであり、mobxはSTORE->VIEWの部分だけに関心を持っている.
Reduxの長所と短所:

データストリームは、任意のdispatchがブロードキャストをトリガするので、オブジェクト参照の変化に応じて、粒度の更新を制御するのが自然である.

は、時間遡及の特徴を十分に利用することにより、業務の予測可能性と誤測位能力を高めることができる.

時間は、毎回参照を更新しますので、コードの複雑さを追加しない限り、またはimmutableを使用します.

時間遡るもう一つの価格はactionとreducerが完全に逸脱しているため、遡及できることは必然的に引用関係を保証できないからです.

は中間部品を導入し、非同期による副作用を解決し、業務ロジックは多かれ少なかれmagicに入り混じっている.

ミドルウェアを活用することで、多くの複雑な仕事が約束されています.

はtypescriptに対してサポートが困難です.

Mobxの長所と短所:

データストリームの流れは不自然で、使用したデータだけがバインディングを引き起こし、局所的に正確に更新されるが、粒度制御の悩みは回避される.

はトレース能力がないです.データは一つの参照しかないからです.最初から最後まで引用はimmutableを必要とせず、コピー対象の追加オーバーヘッドもありません.

データの流れは、関数によって呼び出されて一気に書き上げられ、調整が容易である.

業務開発は頭脳労働ではなく、体力活動であり、少し少ないmagicであり、より多くの効率があります.

magicがないので、中間部品の仕組みがなく、magicを通じて作業効率を上げることができませんでした.

typescriptを完璧にサポートします.

SO:先端データの流れが複雑ではない場合、Mobxを使うと、より明確で、メンテナンスにも便利です.先端データの流れが極度に複雑であれば、Reduxを慎重に使用し、中間部品を通じて巨大な業務の複雑さを緩和することを提案します.
Creat-rect-Appを使ってType Scriptの環境を作ります.

npm i -g create-react-app
create-react-app tinylog-ui --scripts-version=react-scripts-ts
cd tinylog-ui/
npm start
npm run eject

TPS:最後の命令はejectを使って、すべての内部建設の配置を暴露します.
creat-react-apを通じて、プロジェクト全体に環境初期化を簡単に行うことができます.Type Scriptとwebpackを苦しめたいなら、ここでwebpackとType Scriptの環境構築過程を無視して、creat-react-apを使って環境構築を実現します.
React-Routerを追加します
どのように1ページのアプリケーションは、フロントエンドのルートがないので、React-Roturに参加したいです.ここで使っているReact-Routerのバージョンはv 4.2.0です.
ルート設定使用姿勢
React-Routerに対して、ここで使用しているモジュールはRouter,Route,Switchがあります.
React Routerはhistoryに建立されました.簡単に言うと、1つのhistoryはブラウザのアドレスバーの変化をどうやって監聴するかを知り、このURLを解析してlocationオブジェクトに変換し、routerはそれを使ってルートにマッチングし、最後に対応するコンポーネントを正確にレンダリングする.
コードは以下の通りです

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';

const history = createBrowserHistory();

ReactDOM.render(
  
    
      
        
        
        
      
    
  ,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

ページの作成
ここでContinerというコンポーネントの作成を説明します.

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
import App from '../App';
import Website from '../Website';

//       ，        ，   react-rotuer 4.0       prop   
interface Container extends RouteComponentProps {
}

class Container extends React.Component {
  render () {
    return (
      

        

        
          
          
        
      
    )
  }
}

export default Container;

このように、私達がurlを訪問する時は、デフォルトはContinerに入ります.その中のContinerの中は1階のサブページで、urlに一致します.urlが'/website'であれば、Websiteページに入ります.'/'であれば、Appページに入ります.
具体的にはReact-Routerの使用についてはReact-Router文書を読んでください.
Mobxを追加

npm i mobx react-mobx mobx-react-router -S 

index.tsxのエントリプロファイルを再修正します.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import { useStrict } from 'mobx';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
//         store          
import { 
  TokenStore, 
  AuthStore, 
  HostStore, 
  OverViewStore,
  AssetsStore,
  CommonDataStore,
  PageStore,
  RealTimeStore  
} from './stores';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';
//   Echarts
import './macarons';
import 'echarts/map/js/world';

//   mobx     ，           action   
useStrict(true);

const browserHistory = createBrowserHistory();
const routerStore =  new RouterStore();
//      mobx     
const history = syncHistoryWithStore(browserHistory, routerStore);
const rootStore = {
  token: new TokenStore(),
  auth: new AuthStore(),
  host: new HostStore(),
  overview: new OverViewStore(),
  assets: new AssetsStore(),
  commmon: new CommonDataStore(),
  page: new PageStore(),
  realtime: new RealTimeStore(),
  router: routerStore
};

ReactDOM.render(
  
    
      
        
          
          
          
        
      
    
  ,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

コンタイナー容器の修正

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
//   inject observer              
import { inject, observer } from 'mobx-react';
import App from '../App';
import Website from '../Website';

interface Container extends IAuth {
}

@inject('router', 'auth')
@observer
class Container extends React.Component {
  render () {
    return (
      

        

        
          
          
        
      
    )
  }
}

export default Container;

@observableはインスタンスフィールドと属性getterで使用できます.対象のどの部分が観察できるようになる必要があるかについて、@observableは細粒度の制御を提供しています.
@injectはProviderの高次コンポーネントに相当します.Reactのcontextからstoreをpropとしてターゲットコンポーネントに送るために使用できます.
コンポーネントのインターフェース定義

import { RouteComponentProps } from 'react-router';
import {
  RouterStore,
  AuthStore
} from '../stores';

export interface IBase extends RouteComponentProps {
  router: RouterStore;
}

export interface IAuth extends IBase {
  auth: AuthStore;
}

Storeの設定
まずRouter Storeを見てください.

import { History } from 'history';
import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router';

//       
class RouterStore extends BaseRouterStore {
  public history;
  constructor(history?: History) {
    super();
    if (history) {
      this.history = syncHistoryWithStore(history, this);
    }
  }
}

export default RouterStore;

そしてAuthStore:

import { ISignIn, ISignUp } from './../interfaces/index';
import { observable, action } from 'mobx';
import api from '../api/auth'; 
import { IUser } from '../models';

//       
class AuthStore {
  @observable token;
  @observable id;
  @observable email;
  constructor () {
    this.id = '';
    this.token = '';
    this.email = '';
  }
  setLocalStorage ({ id, token, email }: IUser) {
    localStorage.setItem('id', id);
    localStorage.setItem('token', token);
    localStorage.setItem('email', email);
  }
  clearStorage () {
    localStorage.clear();
  }
  @action async signIn (data: ISignIn) {
    try {
      const { data: res } = await api.signIn(data);
      this.id = res.data.id;
      this.token = res.data.token;
      this.email = res.data.email;
      this.setLocalStorage({
        id: this.id,
        token: this.token,
        email: this.email
      });
      return res;
    } catch (error) {
      return error;
    }
  }
  
  @action async signUp (data: ISignUp) {
    try {
      const { data: res } = await api.signUp(data);
      this.id = res.data.id;
      this.token = res.data.token;
      this.email = res.data.email;
      this.setLocalStorage({
        id: this.id,
        token: this.token,
        email: this.email
      });
      return res;
    } catch (error) {
      return error;
    }
  }

  @action signOut () {
    this.id = '';
    this.token = '';
    this.email = '';
    this.clearStorage()
  }
}

export default AuthStore;

Authは、ウェブサイトの登録イベントおよび対応するTokenのデータ状態の保存、ログイン登録イベントのインターフェース要求などのための操作である.
具体的なMobxの使い方はMobx文書を読んでください.
ディレクトリ構造

app
├── api                        
├── components              
├── config                    
├── constants           
├── interfaces          
├── layout              
├── stores          mobx       
├── index.css           
├── index.tsx           
├── reset.css              

本プロジェクトは、Ant-Designを依存のコンポーネントライブラリとして使用していますが、具体的にどのように使用しますか?構成は、Ant-Designを参照してください.
ここに来て、ReactのType ScriptにReact-RouterとMobxを結合する構成を完成しました.具体的な業務モジュールはどのように編纂しますか?
個人の表現能力は限られていますので、はっきりとは説明できません.ご了承ください.