Part 1 :: เริ่มต้นเรียนรู้ไปกับ React.js app

หลังจากไปงาน Thailand React Meetup มารู้สึกว่าน่าสนใจ เลยลองมาหัดเขียน หัดเรียนรู้ และ หัดเขียน React กันหน่อย ด้วยการลงมือสร้าง app แบบง่าย ๆ แน่นอนว่า ต้องมี Hello World และ App อื่น ๆ ที่ช่วยทำให้เราเข้าใจ React มากยิ่งขึ้น มาเริ่มกันเลย

เริ่มต้นจากมาออกแบบ web ที่เราต้องการสร้างกันดีกว่า (หัวใจของการพัฒนา)

ต้องการสร้าง web portfolio ง่าย ๆ ประกอบไปด้วย 2 ส่วนหลัก คือ

1. Profile
2. List ของ project

แสดงดังรูป

ทำการแบ่งการทำงานในแต่ละส่วนเป็น component

เนื่องจาก React app นั้นจะประกอบไปด้วย component ต่าง ๆ ทำงานร่วมกัน ซึ่งก่อนที่จะลงมือเขียน code นั้น แนะนำให้ออกแบบดี ๆ ก่อนเสมอนะ จากตัวอย่างใน App ประกอบไปด้วย 2 component ย่อย คือ

1. Profile component
2. Projects component

แสงดังรูป ปล. เราสามารถแยกออกเป็น component ย่อย ๆ ไปได้อีกนะ แต่เราเพิ่งศึกษาก็อย่าเยอะ !!

เริ่มต้นด้วยการสร้าง Hello World app

เพื่อทำความรู้จัก และ เข้าใจ การใช้งาน library ต่าง ๆ การสร้าง React component [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_01.html"] จากนั้นทำการสร้าง component แรกกันเลย ดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_02.html"] คำอธิบาย สร้าง component ผ่าน method createClass() ของ class React โดยสามารถทำการส่ง parameter ได้ 1 ตัวเรียกว่า specification object คือ object ที่สามารถมี method ใด ๆ ก็ได้ตามที่เราต้องการ โดยหนึ่งใน method ที่สำคัญคือ render() เพื่อทำการแสดงข้อมูลที่ต้องการออกมา จากตัวอย่างคือ tag div มีข้อมูลว่า Hello World

จากนั้นต้องสั่งให้ทำการแสดงผลจาก App component ผ่าน ReactDOM

ซึ่งเราสามารถส่ง paramater ตัวแรกคือ App component ส่วนตัวที่สองคือ element ที่เราต้องการให้แสดง เมื่อทุกอย่างเรียบร้อยลอง run ผ่าน browser ได้เลย จะแสดงคำว่า Hello World ที่หน้าจอ

มาทำการสร้าง Component อื่น ๆ กันดีกว่า

โดยเราจะทำการสร้าง Profile และ Projects component ดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_03.html"] จากนั้นทำการเพิ่มทั้งสอง component เข้าไปยัง App component หรือ component หลักของเรา ดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_04.html"] ผลการทำงานเป็นดังนี้ มาถึงตรงนี้ ทำให้เราเข้าใจเรื่องของ component มากยิ่งขึ้น ซึ่งพบว่าเราสามารถแบ่งงานใหญ่ออกเป็นงานย่อย ๆ ได้ง่าย นั่นทำให้เราสามารถจัดการระบบได้ง่ายขึ้น (ถ้าออกแบบดีนะ)

ในตอนนี้ส่วนของ Projects component นั้นเรายัง dummy ข้อมูลกันอยู่

ดังนั้นสิ่งที่เราต้องการต่อไปก็คือ ส่งข้อมูล project เข้าไปยัง component แทน โดยที่ React มี data flow หรือการส่งข้อมูลแบบ One direction data flow นั่นหมายความว่าจะส่งข้อมูลจาก Parent component ไปยัง Child component เสมอ และส่งต่อไปยัง Child component ต่อ ๆ ไป ทำให้ง่ายต่อการจัดการ แต่ถ้าออกแบบไม่ดีแล้ว จะทำให้การจัดการยากขึ้นนะ !! แสดงดังรูป จากตัวอย่างก็คือ สามารถส่งข้อมูลเข้าไปยัง Profile และ Projects component ผ่าน App นั่นเอง ดังนั้นในแต่ละ component ของ React มันคือ function ที่รับข้อมูลผ่าน

• Props object ?
• State ? (เอาไว้ก่อน เดี๋ยวยาว)

จากนั้นทำการส่งผลลัพธ์ที่เป็น HTML ออกมา

มาถึงตรงนี้ก็สงสัยว่า props มันคืออะไร ?

มันคือ object หนึ่งที่ทำการเก็บข้อมูลในรูปแบบต่าง ๆ เช่น Array, Object, ตัวเลข และ function เป็นต้น

โดยเป็น immutable object แสดงว่า ไม่สามารถแก้ไขข้อมูลได้ และใช้สำหรับ share ข้อมูลให้กับ component อื่น ๆ

ถ้าทำการเปรียบเทียบกับ tag ของ HTML แล้ว Component คือ tag Props คือ attribute นั่นเอง ตัวอย่างเช่น [code] <Test className=’test.jpg’ onClick={handleClick} /> [/code] คำอธิบาย

• Component ชื่อ Test
• className และ onClick คือ props

ดังนั้นกลับมาที่ App ถ้าต้องการส่งข้อมูลไปยัง Profile component จะทำอย่างไร ?

ทำการส่งข้อมูลจาก App component ด้วยชื่อ profileData [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_05.html"] จากนั้นใน Profile component ทำการดึงข้อมูลผ่าน props object ดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_06.html"] เท่านี้ก็สามารถส่งข้อมูลเข้ามายัง Profile component ได้แล้ว

ลองมาส่งข้อมูล list ของ project เข้าไปยัง Projects component กันต่อ

โดยข้อมูลที่จะส่งเข้าไปเป็น array และให้ส่งจาก App component เข้าไปเหมือนเดิม [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_07.html"] จากนั้นสิ่งที่เราต้องคิดก่อนก็คือ ใน Projects component นั้นจะต้องทำการวน loop เพื่อแสดงข้อมูลของแต่ละ project ซึ่งประกอบไปด้วย รูป และ ชื่อของ project ดังนั้นสิ่งที่ควรจะต้องสร้างเพิ่มคือ ProjectItem ไว้สำหรับจัดการในแต่ละ project นั่นเอง โดยวิธีการจะทำตามคำแนะนำของ React :: Multiple component :: Dynamic children ซึ่งได้ code ดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_08.html"] ดังนั้นรวมทุกอย่างเข้าด้วยกัน เป็นดังนี้ [gist id="b555a4cb8a8f67adc78d41ed3ef60030" file="step_09.html"]

เพียงเท่านี้เราก็สามารถสร้าง React app แรกแบบง่าย ๆ ได้แล้ว

ซึ่งมีเป้าหมายเพื่อ

• การออกแบบ component ซึ่งมีความสำคัญอย่างมาก
• ทำความเข้าใจเกี่ยวกับ React component
• ทำความเข้าใจเกี่ยวกับการส่งข้อมูลระหว่าง component (Data flow)

แต่ยังมีอีกมากมายหลายเรื่องให้เราศึกษา !! โดย code ตัวอย่างอยู่ที่ Github::Up1:React