React — Component

ผมตัดสินใจอยู่นาน ว่าจะหัดเขียนอะไรก่อนดีระหว่าง vue.js หรือ react แต่ก็พอทราบมาบ้างสำหรับคนอยู่นอกวงการอย่างผมว่า vue.js เกิดมาทีหลัง react และกำลังมาแรงมากๆ ที่สำคัญ structure เขียนออกมาดูง่ายสุด แต่พอลองเปรียบเทียบดูแล้วผมกลับชอบ ความเป็น OOP และ JSX ของ React มากกว่า นั้นคงเป็นเพราะผมเป็นโปรแกรมเมอร์สาย OOP มาก่อน ก็ขนาด เขียน python เป็น class ก็คงเข้าเส้นเลือดแล้วล่ะ

เป้าหมายของผมคือกำลังจะทำ app listening test คือ หน้าเวปที่มีเสียงให้ฟัง แล้วให้คนมาฟังแล้วประเมินให้คะแนน จะมีการเก็บข้อมูลลงฐานข้อมูลด้วย ที่สำคัญกำลังมองไปถึง Mobile app ด้วย ว่ามันจะต่อยอดไปได้ง่ายหรือยากขนาดไหน ม่ะ มาเริ่มกันดีกว่า

ขั้นตอนแรกสิ่งที่คุณต้องมีการคือ node.js เข้าไปโหลดและ install ได้ที่

Node.js

หลังจากลงเรียนร้อยแล้ว ผมจะเปิด VSCode และสร้าง Workspace folder “ListeningTest”

เปิด terminal และทำการติดตั้ง create-react-app เสร็จแล้วให้ทำการ init app ที่เราต้องการจะสร้างด้วยคำสั่ง

$npm install -g create-react-app
$npm init react-app app

เราจะได้ โครงสร้าง app เราเป็นแบบรูปด้านล่าง คือ มี public สำหรับไฟล์ html และ src สำหรับไฟล์ js

ทดสอบรันดู

$cd app
$npm start

ตัวรันจะเป็นแบบ auto build จะช่วยให้เราไม่ต้องเสียเวลา restart service เองบ่อยๆ ถือว่าสะดวกมากๆ

คราวนี้ผมอยากได้หน้าว่างๆ ผมจะลบไฟล์ให้เหลือแค่รูปข้างล่างและแก้โคดในไฟล์ App.js ให้ใช้งานได้

ผมจะได้หน้าตาว่างๆ มีข้อความว่า Listening Test ขึ้นมาดังรูป

คราวนี้ถ้าผมเบื่อล่ะ port 3000 อยากกเปลี่ยนเป็น port 8888 ต้องทำอย่างไร

ให้เข้าไปที่ package.json แล้วใส่ “PORT=8888” เข้าไปดังรูป

ข้อดีของ react ที่ผมชอบด้วยความที่มันเป็น component ในหน้า page 1 หน้า มันสามารถ ประกอบไปด้วย class หรือ function หลาย ฟังก์ชั่นได้ เวลาเปลี่ยนหน้า client ไม่จำเป็นต้อง reload ทั้งหมด reload แค่เฉพาะส่วนเท่านั้น ผมจะสร้างหน้า page ให้มี 3 ส่วน คือ ส่วน header ,content และ footer โดยจะแยกแต่ล่ะส่วนเป็น ไฟล์ js

สรุปแล้วหน้าเพจผมจะมี 3 component ด้วยกันคือ header ,content และ footer ผมจะให้สร้าง forms ไว้ในส่วน content และจะให้แสดงผลใน footer

ผมจะให้ App.js เป็น หน้าหลักของเพจ แล้วไปเรียก component Header กับ Content ส่วน footer จะให้แสดงใน Content

import React, { Component } from 'react'
import Header from './header';
import Content from './content';
import './stylesheets/app.css';
export default class App extends Component{
    render() {
        return (
            <div >
                <Header/>
                <Content/>
            </div>
);}}

ใน content.js ผมสร้าง form โดยรับ input name กับ email ที่ได้จาก inputField จะถูกส่งไปให้ footer แสดงผลแบบ realtime (สุดยอดไปเลยไม่ต้องพึ่ง AJAX เลยนะเนี้ย)

ส่วนของ footer รับค่าจาก content มาแสดงผล

import React, { Component } from 'react'
import './stylesheets/app.css';
export default class Footer extends Component{
    render(){
        return (
           <div>
               <h2>Footer</h2>
               <p>name = {this.props.name}</p>
               <p>email = {this.props.email}</p>
           </div>
);}}

ผลที่ได้

ตอนหน้าผมจะมาเขียนเกี่ยวกับ style-component ที่จะทำให้ CSS มีบทบาทลดลง

React — style-component (Part 2)

React — style-component (Part 2)

Reference

https://reactjs.org/
https://www.w3schools.com/