Ionic react without using typescript

Ionic Framework Ionic React
1

hello, can i use ionic react without typescript, same way we built with react js?

1 Like
2

Sure, you could, you just need to rename the file from .tsx to .js, remove the tsconfig, and remove typescript.

Though I do not suggest doing this as typescript provides a better and safer development experience compared to traditional Javascript.

1 Like
3

Hello, thank you for your respond .
i really like ionic, but i see it not working good on react, and it work randomly .
let me explain what i mean.
in my app , i have button

1-

<IonButton
  color="primary"
  size="large"
  onClick={() => {
    history.push(`/virtual/${product._id}`, {
      id: product._id,
    });
  }}
>
  360 tour
</IonButton>;

where this button is sending the product._id like props to second screen…

2- where in app.js
i defined this

 <Route path="/virtual/:id">
  <Threesixty />
</Route>

3- and inside the <Threesixty /> component i used

import { useHistory, useParams } from 'react-router-dom';
  const { id } = useParams();

<IonText color="primary">

          <h1>{id}</h1>

        </IonText>

the id showing randomly … i think there is kind of bug here !!
the id not shows … where in desktio while testing it shows .

can you advice me ?

1 Like
4

Can you make this into a demo app and push a git repo to github? From the sound of things, it’s doesn’t appear to be an ionic specific issue, but probably something in your code.

5

Hi.
please check this

6

Ooook, so a few things…

  1. Pages vs Components: Right now you have the Home Page which, has a page, header, and content area. Then you load the Product List, which also has it’s own page, header, and content. You should not be nesting pages/header/content like this.

You’re product list component should just be something like…

export default function AllProductList({ products }) {
...
return (
    <>
      {products.map((product, index) => ( <IonCard>...</IonCard> )}
    </>
  )
}

The same comment would go for your MainProductCard component

  1. Your HomePage’s loading indicator. Inlineing conditional render should be done withint the IonContent. Otherwise, you are creating multiple element that may or may not be transistioned in.

What the dom shows with your original example.

999Ă—518 308 KB

TO clean it up, just move the “loading” part into the ion-content.

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        {loading ? (
          <IonText>loading...</IonText>
        ) : (
          <AllProductList products={products} />
        )}
      </IonContent>
    </IonPage>
  );
7

Hello, thank you for this support … i really like the way you support me … very professional.
i appreciate your efforts.
that why Ionic has a lot of users … and it is a very good platform.
i have some questions, cause i amionic new in this platform.
1- everything used in react js can be used here also? mean can i choose external npm that works with react js ?
2- with Ionic react can i built big applications, with a lot of data?
3- is capacitor export really native apps?
4- all the Native APIs - Ionic Documentation ,
ionic native working with ionic react , mean i can use them ?

Best regards
Elias

8

  1. Yep! Ionic and react make full use of the web. So any web npm package can be used.

  2. Yep, you just need to be carefully loading too much data at one time. This is generally just a best practice in any app setup.

  3. Yes, capacitor builds native apps for you. I’d suggest taking a look at the docs here.

  1. So you can use ionic-native in a capacitor app, more as a migration process here
    Capacitor - build cross platform apps with the web
9

will it affect some app performance?? using v7