Apr 12, 2021
🙌 มาลองเขียน Pure React, React ล้วนๆ ไม่มี JSX ผสมกันเถอะ
เท้าความก่อนว่าส่วนตัวผมเป็นมือใหม่ React ครับ เวลาใช้ผมก็เน้น google หาคำตอบจากชาวบ้านเอา ไม่เน้นพื้นฐานความเป็นมา React สักเท่าไหร่
พอเขียน React ไปสักพัก ผมก็เจอปัญหาจำพวก เจอ code Javascript ดิบๆ หน้าตาไม่คุ้นบ่อยมาก (ถ้าแน่น Javascript ก็คงเฉยๆครับ แต่ผมไม่ค่อยแน่นเลยกลัว) ผมจึงตัดสินปรับพื้นฐาน React สักหน่อยช่วงหยุดยาว
บังเอิญ ผมได้ไปเจอบทเรียนเกี่ยวกับการเขียน React แบบดิบมาก เบื้องต้นสุดๆ โดยการเขียน script tag ลงในไฟล์ html มันน่าสนใจมากครับ เลยไปเรียนแล้วเอามาแชร์ให้อ่านครับ
เริ่มจากสร้างไฟล์ html ธรรมดาๆ
แล้วหลังจากนั้นสร้าง div ที่มี id เป็น root เข้าไปใน body โดยใส่ข้อความข้างในว่า not rendered เพื่อบอกว่า React ยังไม่ทำงานนะ
โหลด React + ReactDOM ฝังเข้าไปในไฟล์ html
โหลดเพื่อใช้งาน React โดยเราจะเขียน script ชี้ไปที่ 2 React กับ ReactDOM
ทำไมต้องโหลดสองตัว 2 ตัว ?
ก็เพราะว่า ReactDOM เนี้ยจะไปเรียกใช้เจ้า React นำไป render เป็นเว็บให้เรา ถ้าเราไม่อยากได้เว็บ แต่อยากได้ App มือถือ ก็ใช้ ReactNative แทน ReactDOM ซึ่งหลักการก็เหมือนกันคือเรียกใช้ React
เช็คกันก่อนว่าไฟล์ html เราเนี่ย มีเจ้า React สิงอยู่ไหม
เราจะเช็คได้โดยการโดยการเปิด console ในเบราเซอร์แล้ว พิมพ์ว่า React ถ้ามี output ออกมาก็แปลว่าพร้อมลุย
โอเค React พร้อมใช้งานแล้ว
เขียน Component ตัวแรก
Component ที่เราเขียนจะเป็น function ชื่อ App โดยเจ้า App เนี่ยเราจะสร้าง Component div ขึ้นมาผ่าน function createElement ของ React ซึ่ง Component ที่ได้ จะใช้กี่ครั้งก็ได้ ตอนไหนก็ได้ ตามใจเลย
แต่ก่อนจะลงลึก createElement เรามาเช็คหน้าเว็บก่อนดีกว่าว่าเป็นยังไง
อ้าวเห้ย ไหน React ผมล่ะ ทำไมยังขึ้น not rendered ละครับ !
คำตอบก็คือ ……
เราสร้าง App component ขึ้นมาแต่เรายังไม่ได้เรียกใช้งาน
การเรียกใช้ก็คือ ใช้ function render ของ ReactDOM แล้วบอกว่า จะ render อะไร แล้วไป render ที่ไหน ในกรณีนี้คือ render Component app ไปที่ div ที่มี id เป็น root
ไหนๆ มาลองดูสิ ว่าหายยัง
ตอนนี้ React ของเราถูก render เรียบร้อยแล้วครับ
คำถามก็คือ แล้ว not rendered ใน div rootไปไหน ?
คำตอบก็คือ มันจะถูกแทนที่ด้วย React ของเราและจากเราไปตลอดกาล
แล้ว createElement มันคืออะไร ทำหน้าที่อะไร ?
createElemetment จะทำการสร้าง Component (เป็น html tag หรือ Component อื่นก็ได้) (argument 1) พร้อมถามว่าอยากใส่ค่า attributes อะไรให้สิ่งที่เราจะสร้างไหม (argument 2) และสุดท้ายก็มอบ child ให้สิ่งที่เราจะสร้าง จะมาแบบเดี่ยวหรือเป็นแก๊ง array ก็ได้ (argument3)
จากตัวอย่างด้านบนก็คือ เราสร้าง Component เป็น div ซึ่งไม่ได้กำหนดค่าอะไรให้ แต่บอกว่าข้างในมี child เป็น Component ของ h1 ที่มี child เป็นข้อความว่า Hello อีกที
ว้าวเป็นยังไงละ ไม่เคยรู้มาก่อนละสิ ( ผมก็เพิ่งรู้ว่า basic มันเป็นแบบนี้)
แล้วมันใช้ซ้ำได้ยังไง
ผมจะโชว์ให้ดูโดยการสร้าง Component ชื่อ Person ขึ้นมา ซึ่งจะเป็น div ที่มี h1 บอกชื่อ h2 บอกอาชีพ และ h3 บอกมหาวิทยาลัย โดยเราจะเรียกใช้ใน App สามครั้งด้วยกัน
มาดูผลลัพธ์กัน
จะเห็นได้ว่า เราเขียนครั้งเดียว แต่เรียกใช้ 3 ครั้งเลย สุดยอดไปเลย
แต่ว่า Component ของเรา เอาไปใช้ซ้ำแต่ปรับแต่งไม่ได้มันก็เท่านั้น
ดังนั้นเราต้องใส่ props ให้มันเพื่อให้ flexible มากขึ้น เช่น เปลี่ยนชื่อ ตำแหน่ง มหาลัย โดยเราจะกำหนดชื่อ ตำแหน่ง และมหาลัยที่ argument ที่ 2 ของเจ้า createElement ที่เรียกใช้ Person นั่นเอง แล้วก็อย่าลืมใส่ props ที่ Person แล้วเรียกใช้ด้วยล่ะ
มาดูผลลัพธ์กันว่าเป็นยังไง
ว้าว ทีนี้เราก็ไม่ต้องสร้าง Component ซ้ำไปซ้ำมาแล้ว แค่เปลี่ยน props ของ Component ง่ายเนอะ
ส่งท้าย
ขอบคุณทุกคนที่อ่านมาถึงตรงนี้นะครับ จริงๆเราไม่ได้เขียน React กันแบบนี้หรอกครับ เพราะมันเสียเวลา และเราจะใช้ JSX แทน แต่ผมมองว่ามันไม่เสียหายที่จะรู้พื้นฐานว่าจริงๆแล้ว React ก็เป็น Javascript ธรรมดา ทำให้เราลดความกลัวเวลาต้องประยุกต์ใช้กับ Module อื่นๆ
ผมหวังว่าจะมีประโยชน์ให้ผู้อ่านนะครับ
ขอบคุณครับ
