รับเขียนโปรแกรม: กุมภาพันธ์ 2020

สำหรับ 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

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

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

fb_ads

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