reactjs - ionic-react で常に .tsx の代わりに .jsx を使用することの欠点はありますか?

Question

ionic-react で jsx 構文を記述するとどうなりますか? はstate={}オブジェクトでありprops、.tsx ファイルで有効です。.tsx の代わりに .jsx ファイルを使用してフロント エンドを作成します。デプロイで問題が発生しますか? タイプスクリプトに頼らずにそれを克服するにはどうすればよいですか?

import React, { Component } from "react";
import { IonGrid, IonRow, IonCol, IonButton } from "@ionic/react";
import LocationComp from "../comon/locationComp";

class Tab1_react extends Component {
  state = {
    province: [{ id: 1, name: "Western province" }],

    district: [
      { id: 1, name: "Kaluthara" },
      { id: 2, name: "Colombo" },
      { id: 3, name: "Gampaha" },
    ],
  };

  render() {
    return (
      <IonGrid>
        {/* 1 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.province}
              type="Province"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 2 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.district}
              type="District"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 3 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={[{ id: 1, name: "Not Yet" }]}
              type="Town"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 4 row */}
        <IonRow>
          <IonCol>
            <IonButton fill="outline" expand="block" color="primary">
              Search
            </IonButton>
          </IonCol>
        </IonRow>

      </IonGrid>
    );
  }
}

export default Tab1_react;

反応コンポーネント呼び出しを行いました locationComp

import React, { Component } from "react";
import {
  IonButton,
  IonSelect,
  IonSelectOption,
  IonItem,
  IonLabel,
} from "@ionic/react";

class LocationComp extends Component {
  state = {};


  render() {

    const {data,name,id,type} = this.props;

    return (
      <IonItem>
        <IonLabel>{type}</IonLabel>
        <IonSelect
          //value={gender}
          placeholder="Select One"
          //   onIonChange={(e) => setGender(e.detail.value)}
        >
            {data.map(e=>(
                <IonSelectOption key={e["id"]} value="female">{e["name"]}</IonSelectOption>
            ))}

        </IonSelect>
      </IonItem>
    );
  }
}

export default LocationComp;