Vue から React への変換入門ガイド

関数フォーム() {
  関数handleSubmit(e) {
    e.preventDefault();
    console.log('送信をクリックしました。');
  }
  戻る （
    <フォームonSubmit={handleSubmit}>
      <button type="submit">送信</button>
    </フォーム>
  );
}

//ネイティブ イベント <form v-on:submit.prevent="onSubmit"></form>
//カスタム イベント <my-component @my-event="handleThis(123, $event)"></my-component>

与える（） {
  className = 'menu';とします。
  if (this.props.isActive) {
    className += 'メニューアクティブ';
  }
  <span className={className}>メニュー</span> を返す
}

<div
  クラス="static"
  :class="{ active: isActive, 'text-danger': hasError }"
</div>

 
<div :class="[{ active: isActive }, errorClass]"></div>

<div style={{color: 'red', fontWeight: 'bold'}} />

<div :style="[baseStyles, overridingStyles]"></div>

<ul>
  {props.posts.map((投稿) =>
    <li キー = {投稿 ID}>
      {投稿タイトル}
    </li>
  )}
</ul>

<li v-for="item in items" :key="item.message">
  {{アイテム.メッセージ}}
</li>

<div className={'FancyBorder FancyBorder-' + props.color}>
  {props.children}
</div>

<div className="SplitPane">
  <div className="SplitPane-left">
    {props.left}
  </div>
  <div className="SplitPane-right">
    {props.right}
  </div>
</div>

<SplitPane 左={<連絡先 />} 右={<チャット />} />

<メイン>
  <スロット></スロット>
</メイン>

<ヘッダー>
  <スロット名="ヘッダー"></スロット>
</ヘッダー>

クラスMyComponentはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.myRef = React.createRef();
  }
  与える（） {
    <div ref={this.myRef} /> を返します。
  }
}

<div ref="div">こんにちは</div>

this.$refs.p.offsetHeight

├── config # ルーティング、ビルド、その他の構成を含む umi 構成│ ├── config.ts # プロジェクト構成.umirc.ts の方が優先度が高く、この方法では .umirc.ts を削除する必要があります
│ ├──routes.ts # ルーティング設定│ ├──defaultSettings.ts # システム設定│ └──proxy.ts # プロキシ設定├──mock # このディレクトリ内のすべてのjsおよびtsファイルは、モックファイルとして解析されます├──public # このディレクトリ内のすべてのファイルは出力パスにコピーされます。ハッシュが設定されていても追加されません├──src
│ ├── アセット # ローカル静的リソース│ ├── コンポーネント # ビジネス共通コンポーネント│ ├── e2e # 統合テストケース│ ├── レイアウト # 従来のルーティングのグローバルレイアウトファイル│ ├── モデル # グローバル dva モデル
│ ├── pages # すべてのルーティングコンポーネントはここに保存されます│ │ └── document.ejs # このファイルが存在する場合は、デフォルトのテンプレートとして使用することに同意します│ ├── services # バックエンドインターフェースサービス│ ├── utils # ツールライブラリ│ ├── locales # 国際リソース│ ├── global.less # グローバルスタイル│ ├── global.ts # グローバル JS
│ └── app.ts # ルートの変更、レンダリングメソッドの変更などのランタイム構成ファイル。 ├── README.md
└── package.json

├── mock # プロジェクトのモックシミュレーションデータ├── public # 静的リソース│ └── index.html # HTML テンプレート├── src # ソースコード│ ├── api # すべてのリクエスト│ ├── asset # テーマフォントとその他の静的リソース│ ├── components # グローバルパブリックコンポーネント│ ├── directive # グローバルディレクティブ│ ├── filters # グローバルフィルター
│ ├── レイアウト # グローバルレイアウト
│ ├── router # ルーティング│ ├── store # グローバルストア管理│ ├── utils # グローバルパブリックメソッド│ ├── views # 全ページのビュー│ ├── App.vue # エントリページ│ └── main.js # エントリファイルの読み込みコンポーネントの初期化など├── tests # テスト├── vue.config.js # プロキシ、圧縮画像などの vue-cli 設定└── package.json # package.json

{
  パス： '/'、
  コンポーネント: '@/layouts/index',
  ルート: [
    { パス: '/list'、コンポーネント: 'list' },
    { パス: '/admin'、コンポーネント: 'admin' },
  ]、
}

<div style={{ padding: 20 }}>{ props.children }</div>

{
  パス: '/user/:id',
  コンポーネント: ユーザー、
  子供たち： [
    {
      パス: 'プロファイル',
      コンポーネント: UserProfile
    },
    {
      パス: '投稿',
      コンポーネント: UserPosts
    }
  ]
}

<div id="アプリ">
  <ルータービュー></ルータービュー>
</div>

<NavLink exact to="/profile" activeClassName="selected">プロフィール</NavLink>
履歴.push(`/list?id=${id}`)

<router-link to="/about">について</router-link>
this.$router.push({パス: '/list', クエリ: {id}})

 const ルーター = 新しい VueRouter({...})
 router.beforeEach((to, from, next) => {
   // ...
 })

 router.afterEach((to, from) => {
   // ...
 })

// 新しいモデル: models/products.js
エクスポートデフォルト{
  名前空間: '製品',
  州： []、
  リデューサー: {
    'delete'(状態、{ ペイロード: id }) {
      state.filter(item => item.id !== id) を返します。
    },
  },
};
//モデルを接続
エクスポートデフォルトconnect(({製品}) => ({
  製品、
}））（製品）;

//ディスパッチモデルを減らす
ディスパッチモデルreduce({
  タイプ: 'products/delete'、
  ペイロード: ID、
})

// 新しいモジュール
定数ストア = 新しい Vuex.Store({
  州： {
    カウント: 1
  },
  突然変異:
    増分(状態) {
      状態.count++
    }
  },
  アクション: {
    インクリメント(コンテキスト) {
      context.commit('増分')
    }
  }
})
//UIをバインド
<input v-model="$store.state[モデル名].name"/>
//モジュールの変更をコミットする 
store.commit('増分')

ストア.ディスパッチ({
  タイプ: 'incrementAsync'、
  数量: 10
})