สร้าง Mobile Web Application ด้วย ReactJs + Ionic ตอนที่ 1 Router

สำหรับ Ionic Framework ( Framework สำหรับพัฒนา Mobile Application ด้วย HTML และ Javascript ) นั้นเดิมที่ เราต้องใช้ Angular ควบคู่กับ Ionic Framework แต่ปัจจุบันนี้เราสามารถใช้ Ionic คู่กับ ReactJs ได้แล้ว โดยในตัวอย่างนี้ จะแสดงการใช้งาน Ionic คู่กับ  React Router

รับเขียนโปรแกรม React

รับเขียนโปรแกรม Ionic

1. สร้างโปรเจคด้วยคำสั่ง npx create-react-app react_ionic

2. เข้าไปที่ Folder react_ionic โดยใช้คำสั่ง cd react_ionic และ
เพิ่ม modules react-router-dom โดยใช้คำสั่ง npm install react-router-dom --save




3. เพิ่ม Ionic modules โดยใช้คำสั่ง npm install @ionic/react --save




4. เปิด Code App.js ( ใน D:\react_ionic\src Folder src จะเอาไว้สำหรับเก็บไฟล์ Code ) ด้วย Visual Stidio Code  ด้วยคำสั่ง 

cd src และ
code App.js



 5. ทดลองแก้ code ใน  App.js ดังนี้

/*  ---------------  import component และ css ด่าง --------------------- */

import React from 'react';
import {
  BrowserRouter ,
  HashRouter,
  Switch,
  Route,
  Link,
  useParams,
  useHistory ,
} from "react-router-dom";
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,IonButton } from '@ionic/react';

import '@ionic/react/css/core.css';


import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';


import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/*  ---------------  import component และ css ด่าง --------------------- */


//------ สร้างหน้า Home
function Home()
{
  const  history = useHistory();
    return (<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">

              {/* สร้าง ปุ่ม ไปที่ หน้า about */}
              <IonButton  onClick={e => {
                  e.preventDefault();
                  history.push('/about');
              }} expand="block">
                    About
              </IonButton>
       
      </IonContent>
    </IonPage>);
}


//------ สร้างหน้า About
function About()
{
    const  history = useHistory();
    return (<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>About</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">

            {/* สร้าง ปุ่ม ไปที่ หน้า about */}
            <IonButton  onClick={e => {
                 
                  e.preventDefault();
                  history.goBack();

              }} expand="block">
                    Home
              </IonButton>
        
      </IonContent>
    </IonPage>);
}


function App() {
  return (
    <HashRouter >
       
        {/* สร้าง Roter หน้า Home และหน้า about  */}
        <Switch>

          <Route exact path="/"  children={<Home />}>
          </Route>
          <Route path="/about" children={<About />}>
          </Route>
        
        </Switch>

    </HashRouter>
  );
}

export default App; 

6.  run หน้าเว็บ โดยไปที่ command line npm start




หน้าเว็บจะแสดงผลดังนี้