React06: Web Application - Multiple Pages

หลังจากที่ได้ลองสร้าง React Application แบบเป็นเว็บหน้าเดียวกันไปใน 

• React02: Create and Run React Application 
• React03: Simple Web Application - People Counter 
• React04: Simple Web Application - People Counter 2
• React05: Web Application - Dictionary

ในบทความนี้ เราจะมาทดลองทำ Web application สำหรับเป็นเว็บร้านค้าแบบมีหลาย ๆ หน้าแบบง่าย ๆ ด้วย react-router ซึ่งเป็น component ตัวหนึ่งของ React ที่เราสามารถประกาศ routing ในแอปได้เลย โดย react-router จะตรวจสอบ URL แล้วเอา component ที่กำหนดมาแสดงให้แบบอัตโนมัติ  

เตรียมตัวก่อนเริ่มทำ

1. เปิดโปรแกรม Command Prompt หรือ Terminal แล้วสร้าง React application ด้วยคำสั่ง

2. พิมพ์คำสั่งต่อไปนี้เพื่อเข้าไปที่โฟลเดอร์แอปพลิเคชันที่สร้าง ติดตั้ง bootstrap และ react-router แล้วทำการจำลองเครื่องให้เป็น server เพื่อทดสอบการทำงานของแอปที่สร้าง

3. เปิดโฟลเดอร์ src ของแอปพลิเคชันขึ้นมา เช่นในตัวอย่างนี้คือ D:\w721\re_ws_14\src 

• สร้างไฟล์ชื่อ About.js สำหรับเป็นหน้าแสดงข้อความเกี่ยวกับร้านค้า
• สร้างไฟล์ชื่อ Home.js สำหรับเป็นหน้าแรกของเว็บ
• สร้างไฟล์ชื่อ Page404.js สำหรับเป็นหน้าเพื่อแสดงเวลาผู้ใช้งานใส่ URL ที่ไม่มีอยู่ในระบบ
• สร้างไฟล์ชื่อ Product.js สำหรับเป็น Component แสดงรายละเอียดสินค้า
• สร้างไฟล์ชื่อ ProductDetail.js สำหรับเป็นหน้าแสดงรายละเอียดสินค้าตาม id
• สร้างไฟล์ชื่อ ProductList.js สำหรับเป็นหน้าแสดงรายการสินค้าทั้งหมดที่มี
• สร้างไฟล์ชื่อ sample.json สำหรับเก็บข้อมูลรายการสินค้า

ดังนั้นโครงสร้างไฟล์ทั้งหมดในโฟลเดอร์นี้จะเป็นดังภาพ

Design

Code Part

ในการเขียน Code นั้นจะแบ่งออกเป็นส่วนหลัก ๆ ดังนี้ 

• ไฟล์ Home.js, About.js, Page404.js: เป็นหน้าสำหรับแสดงข้อความเพื่อทดสอบการเปลี่ยนหน้าธรรมดา ผู้เรียนจะใส่เนื้อหาอะไรก็ได้ให้รู้ว่าหน้านั้น ๆ เป็นหน้าอะไรก็พอ
• ไฟล์ sample.json: เป็นไฟล์สำหรับใส่ข้อมูลสินค้าเพื่อทดสอบการแสดงผล ผู้เรียนสามารถเพิ่มหรือแก้ไขข้อมูลเองได้ตามใจแต่ต้องอยู่ในรูปแบบตามตัวอย่าง และตัวเลข id ของสินค้าแต่ละชนิดห้ามซ้ำกันเด็ดขาด
• ไฟล์ Product.js: เป็น Component ย่อยสำหรับแสดงรายละเอียดของสินค้า 1 ชนิด 
• ไฟล์ ProductDetail.js: จะรับพารามิเตอร์ id มาจาก URL แล้วทำการ filter สินค้าจากไฟล์ sample.json เพื่อเอาสินค้าแรกที่มี id ตรงกับพารามิเตอร์ที่รับเข้ามาแสดง
• ไฟล์ ProductList.js: จะดึงข้อมูลสินค้าทั้งหมดจากไฟล์ sample.json ในรูปแบบอาร์เรย์ แล้วใช้ฟังก์ชัน map เพื่อแปลงอาร์เรย์ให้อยู่ในรูป JSX แล้วส่งค่าผ่าน props ไปยัง Component Product เพื่อแสดงผลสินค้าแต่ละชนิด 
• ไฟล์ App.js: สร้างแถบเมนูด้านบนพร้อมทั้งกำหนด Route path ให้แสดง Component ดังนี้

  Route path	Component	Description
  /	Home	แสดงหน้าเว็บหลัก
  /about	About	แสดงหน้าเว็บเกี่ยวกับร้านค้า
  /products	ProductList	แสดงข้อมูลสินค้าทั้งหมด
  /product/:id	ProductDetail	รับพารามิเตอร์ id แล้วแสดงข้อมูลสินค้า id นั้น
  อื่น ๆ	Page404	แสดงหน้าแจ้ง Error

   

1. ในไฟล์ Home.js ให้เขียนโค้ดดังนี้ 

import React from 'react';
const Home = () => {
    return(
        <div className="container-fluid m-2">
            <h1>Welcome to EPT shop!</h1>
        </div>
    )
}
export default Home;

2. ในไฟล์ About.js ให้เขียนโค้ดดังนี้

import React from 'react';
const About = () => {
    return(
        <div className="container-fluid m-2">
            <h1>About us</h1>
            <p>At EPT, we all come to work for creating the best product.</p>
        </div>
    )
}
export default About;

3. ในไฟล์ Page404.js ให้เขียนโค้ดดังนี้

import React from 'react';
const Page404 = () => {
    return(
        <div className="container-fluid m-2">
            <h1>404</h1>
            <h4>Page not found</h4>
        </div>
    )
}
export default Page404;

4. ในไฟล์ Product.js ให้เขียนโค้ดดังนี้

import React from "react";
const Product = (props) => {
    return(
        <div className="card m-2">
            <p><b>{props.name}</b></p>
            <span>{props.detail}</span>
            <p><b>Price: </b>{props.price}</p>
        </div>
    )
}
export default Product;

5. ในไฟล์ ProductDetail.js ให้เขียนโค้ดดังนี้

import React from "react";
import Product from "./Product";
import productSample from "./sample.json";

const ProductDetail = (props) => {

    const id = props.match.params.id;
    let content = null;
    if(id != null && id > 0) {
        let pros = productSample.filter(function (p) {
            return (p.id === id);
        });

        if(pros.length > 0) {
            let pro = pros[0];
            content = (
                <Product name={pro.name} detail={pro.detail} price={pro.price} />
            );
        }
        else {
            content = (<p>Product id {id}: not found!</p>);
        }

    }

    return(
        <div className="container-fluid m-2">
        <h1>Our products</h1>
        {content}
        </div>
    )
}
export default ProductDetail;

6. ในไฟล์ ProductList.js ให้เขียนโค้ดดังนี้

import React, {useState} from "react";
import Product from "./Product";
import productSample from "./sample.json";

const ProductList = () => {
    const [productState, setProductState] = useState(
        {
            products: productSample
        }
    )
    return(
        <div className="container-fluid m-2">
        <h1>Our products</h1>
        {productState.products.map(pro => (
            <Product name={pro.name} detail={pro.detail} price={pro.price} />
        ))}
        </div>
    )
}
export default ProductList;

7. ในไฟล์ sample.json ให้สร้างข้อมูลสำหรับทดสอบดังต่อไปนี้ ทั้งนี้ผู้เรียนสามารถเพิ่มข้อมูลเองได้ตามใจแต่ต้องอยู่ในรูปแบบตามตัวอย่าง และตัวเลข id ของสินค้าแต่ละชนิดห้ามซ้ำกันเด็ดขาด

[
  {
    "id": "1",
    "name": "Cat Food",
    "detail": "high grade food",
    "price": "50"
  },
  {
    "id": "2",
    "name": "Cat Toy",
    "detail": "30 pieces kitten toys",
    "price": "100"
  }
]

8. ในไฟล์ App.js ให้แก้โค้ดเป็นดังนี้

import React from 'react';
import Home from "./Home";
import About from "./About";
import ProductDetail from "./ProductDetail";
import ProductList from "./ProductList";
import Page404 from "./Page404";
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter, Route, NavLink, Switch} from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
        <div>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <ul className="navbar-nav">
                  <li className="nav-item">
                    <NavLink className="nav-link" to="/">Home</NavLink>
                  </li>
                  <li className="nav-item">
                    <NavLink className="nav-link" to="/about">About us</NavLink>
                  </li>
                  <li className="nav-item">
                    <NavLink className="nav-link" to="/products">
                    Our products</NavLink>
                  </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/about" component={About} />
                <Route path="/products" component={ProductList} />
                <Route path="/product/:id" component={ProductDetail} />
                <Route path="/" component={Home} />
                <Route component={Page404} />
            </Switch>
        </div>
        </BrowserRouter>
    );
}
export default App;

9. หลังจากบันทึกไฟล์เรียบร้อยแล้ว หากปิด Server ไปแล้วให้พิมพ์คำสั่ง npm start เพื่อทดสอบการทำงานของแอปที่สร้าง แล้วไปที่หน้าเว็บ http://localhost:3000 จากนั้นทดลองกดเมนูด้านบนเพื่อไปยังหน้าต่าง ๆ

รวมทั้งทดลองใส่ URL เพื่อดูรายละเอียดสินค้า เช่น http://localhost:3000/product/1 เพื่อดูสินค้า id 1

และทดลองใส่ URL ที่ไม่มีอยู่จริง เช่น http://localhost:3000/test แล้วดูผลลัพธ์ที่เว็บแสดงออกมา

เสร็จแล้วครับ เว็บร้านค้าแบบมีหลายหน้าง่าย ๆ

Challenge สำหรับผู้เรียนที่อยากทำอะไรเพิ่มเติม

• ในไฟล์ Product.js, ProductDetail.js และ ProductList.js ให้เพิ่มรูปของสินค้าด้วย
• ในไฟล์ ProductList.js ให้เพิ่มลิงก์ของสินค้าแต่ละช่อง ซึ่งเมื่อผู้ใช้งานกดให้แสดงหน้ารายละเอียดของสินค้าชิ้นนั้น ๆ

ถ้าใครสนใจอยากเรียนเรื่อง React ให้ลึกซึ้งยิ่งขึ้นก็ขอแนะนำ คอร์สเรียนเขียนโปรแกรม React ฉบับไม่โหด (W721) แต่ถ้าผู้อ่านยังไม่มีพื้นฐานการทำเว็บมากก่อนขอแนะนำคอร์ส Web Programming ของทาง EPT ซึ่งจะสอนตั้งแต่พื้นฐานครับ สามารถคลิกที่นี่เพื่อดูรายละเอียดคอร์ส Web Programming หรือติดต่อได้ที่ 085-350-7540

ในบทความต่อไป เราจะมาลองทำเว็บแบบมีหลายหน้าพร้อมเรียก APIs กัน แล้วพบกันใหม่บทความหน้านะครับ