มาเขียน React กันดีกว่า [Day2]

มาช้าดีกว่าไม่มาสำหรับการดองงานชิ้นใหญ่ชิ้นนี้ กลับมาสานต่อกับวันที่สองของการเเข่งขันกับตัวเอง

โจทย์ของวันนี้คือการทำ todoList ง่าย จาก React (ง่ายสำหรับคนอื่นเเต่ไม่ได้ง่ายสำหรับเรา ฮ่าๆ)

เราเริ่มกันเลยดีกว่า สร้าง

create-react-app reactjs-todoList

จากนั้นเข้าไปที่ path นั้นที่เราสร้างไว้นะครับ

cd reactjs-todoList

เเล้วก็รันเลย อ่อ ผมเปลี่ยนมาใช้ yarn เเทน npm เเล้วนะคับ

yarn start

ได้มาสมใจอยากเเล้วนะครับ

จากนั้นผมก็เเวะพักฟัง YouTube ก่อน…..เพื่อ ?

ผมจะทำการออกแบบหน้าจอก่อนล่ะกัน โดยผมเขียนใน creately.com

แบ่งเเต่ล่ะส่วน conponent ดังนี้นะ

ส่วนที่ 1 Avatar component

ส่วนที่ 2 Date component

ส่วนที่ 3 TaskList component

ส่วนที่ 4 ส่วนย่อยของ Task

ส่วนที่ 5 Add Button

โดยผมจะ base on โดยใช้ bootstrap ล่ะกันครับ เพราะน่าจะถนัดมากกว่าครับ

yarn add react-bootstrap --save && yarn add bootstrap@3 --save

เเถมไอคอนด้วยก็ดี ฮ่าๆ

yarn add react-fontawesome --save && yarn add font-awesome --save

เเล้วเราก็เข้าไป set ที่ไฟล์ index.js นะครับผม เพื่อประกาศใช้งานครับ

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

ผมสร้าง folder component มาไว้เลยก็ได้ครับ เราจะได้มองได้ง่าย

เปรียบง่ายๆ ก็คือผมจะนำเอาเจ้า App.js เป็น main หลักเอาไว้สำหรับการเรียกใช้งาน

เมื่อสร้างแบบนี้เเล้วเราก็ลองทำโดยวิธีการ mock data ไว้ก่อนนะครับ ไปแบบไม่รีบร้อนนะ เดี๋ยวจะงงกันเปล่าๆ

ขั้นเเรก ผมจะเอาหน้าในส่วน Avatar ขึ้นมาก่อนนะครับ

เริ่มจากสร้าง component Avatar เลย…. (ผมใช้ standard code นะ)

เเล้วลองเรียกใน ไฟล์ App ดูนะ

สิ่งที่ได้คือ โว้วความปลื้มปิติ

สวดยวดดดดด

ต่อไปจะมาทำหน้าจอสำหรับเเสดงวันที่เเละเวลานะครับ นั้นก็คือ Date component นั้นเองล่ะ ฮ่าๆๆ

เเละต่อด้วยการสร้าง tasks component (มันจะยุ่งยากนิดหน่อย)

taskList ---|____tasks
|____tasks
|____tasks

tasks หลายๆ อันประกอบกันจนเป็น taskList component นั้นเอง

จากนั้นผมจะเรียกไปใช้ใน taskList component เเล้วค่อยเอาไปใช้ใน App.js อีกที

จากนั้นเราเราจะลองเรียกใช้งานดูเเต่ เฮ้ยลืม ปุ่มว่ะ ฮ่าๆๆ

ทำ Button component ก่อนนะครับ

จากนั้น เรียกทุกอย่างไปรวมกันใน App.js . ครับ

ไปเราไปดูผลกันนะครับ

ปล. ลองเพิ่มจำนวนของ tasks ใน taskList ดูน่าจะมีการเปลี่ยนแปลง อะไร

โอเค ไว้เเค่นี่ก่อนนะครับ อาทิตย์หน้า จะมาเรียนรู้การทำ props กันเราต้องใช้เเน่นอนเลยล่ะ ฮ่าๆๆ บายย จ้า