2

if we write jsx syntax in ionic-react what would happen? is state={} objects and props are valid in .tsx file. I create front end by using .jsx files instead of .tsx, will it cause trouble in deployment and if it so. how do I overcome that without leaning typescript? 

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;

I made a react component call 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;
wentjun
  • 40,384
  • 10
  • 95
  • 107
Nilupul Heshan
  • 580
  • 1
  • 5
  • 18

1 Answers1

2

As ionic uses TypeScript by default, there are a couple of options for you if you wish to stick to plain JavaScript:

1) Without the need to rename all of your .tsx/.tx files into .jsx/.js respectively -

On your tsconfig.json, you can simply set the strict option to false, which will essentially disable type checking.

"strict": false

2) Explicitly telling TypeScript that JavaScript files should be allowed -

A seemingly simpler option would be to set allowJs to true on your tsconfig.json

"allowJs": true

You can choose to use either one, or both of the above options, depending on your project. At the end of the day, TypeScript is a superset of JavaScript, and regular JavaScript should run on TypeScript files as long as you disable the additional features that comes along with the usage of TypeScript.

wentjun
  • 40,384
  • 10
  • 95
  • 107
  • yes, I've already changed the extensions. But still doubt that state, component did mount methods will work or not. – Nilupul Heshan May 15 '20 at 12:18
  • Hmm.. I've not used ionic, but I have used plenty of react/typescript. It should work, from my observation. Have you tested it out? – wentjun May 15 '20 at 13:24