หลังจากไปงาน Thailand React Meetup มารู้สึกว่าน่าสนใจ
เลยลองมาหัดเขียน หัดเรียนรู้ และ หัดเขียน React กันหน่อย
ด้วยการลงมือสร้าง app แบบง่าย ๆ
แน่นอนว่า ต้องมี Hello World
และ App อื่น ๆ ที่ช่วยทำให้เราเข้าใจ React มากยิ่งขึ้น
มาเริ่มกันเลย
เริ่มต้นจากมาออกแบบ web ที่เราต้องการสร้างกันดีกว่า (หัวใจของการพัฒนา)
ต้องการสร้าง web portfolio ง่าย ๆ ประกอบไปด้วย 2 ส่วนหลัก คือ
- Profile
- List ของ project
แสดงดังรูป
ทำการแบ่งการทำงานในแต่ละส่วนเป็น component
เนื่องจาก React app นั้นจะประกอบไปด้วย component ต่าง ๆ ทำงานร่วมกัน
ซึ่งก่อนที่จะลงมือเขียน code นั้น
แนะนำให้ออกแบบดี ๆ ก่อนเสมอนะ
จากตัวอย่างใน App ประกอบไปด้วย 2 component ย่อย คือ
- Profile component
- Projects component
แสงดังรูป
ปล. เราสามารถแยกออกเป็น component ย่อย ๆ ไปได้อีกนะ
แต่เราเพิ่งศึกษาก็อย่าเยอะ !!
เริ่มต้นด้วยการสร้าง Hello World app
เพื่อทำความรู้จัก และ เข้าใจ
การใช้งาน library ต่าง ๆ
การสร้าง React component
จากนั้นทำการสร้าง component แรกกันเลย ดังนี้
คำอธิบาย
สร้าง 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 ดังนี้
จากนั้นทำการเพิ่มทั้งสอง component เข้าไปยัง App component หรือ component หลักของเรา
ดังนี้
ผลการทำงานเป็นดังนี้
มาถึงตรงนี้ ทำให้เราเข้าใจเรื่องของ 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 นั่นเอง
ตัวอย่างเช่น
<Test className=’test.jpg’ onClick={handleClick} />
คำอธิบาย
- Component ชื่อ Test
- className และ onClick คือ props
ดังนั้นกลับมาที่ App ถ้าต้องการส่งข้อมูลไปยัง Profile component จะทำอย่างไร ?
ทำการส่งข้อมูลจาก App component ด้วยชื่อ profileData
จากนั้นใน Profile component ทำการดึงข้อมูลผ่าน props object ดังนี้
เท่านี้ก็สามารถส่งข้อมูลเข้ามายัง Profile component ได้แล้ว
ลองมาส่งข้อมูล list ของ project เข้าไปยัง Projects component กันต่อ
โดยข้อมูลที่จะส่งเข้าไปเป็น array
และให้ส่งจาก App component เข้าไปเหมือนเดิม
จากนั้นสิ่งที่เราต้องคิดก่อนก็คือ
ใน Projects component นั้นจะต้องทำการวน loop
เพื่อแสดงข้อมูลของแต่ละ project
ซึ่งประกอบไปด้วย รูป และ ชื่อของ project
ดังนั้นสิ่งที่ควรจะต้องสร้างเพิ่มคือ ProjectItem
ไว้สำหรับจัดการในแต่ละ project นั่นเอง
โดยวิธีการจะทำตามคำแนะนำของ React :: Multiple component :: Dynamic children
ซึ่งได้ code ดังนี้
ดังนั้นรวมทุกอย่างเข้าด้วยกัน เป็นดังนี้
เพียงเท่านี้เราก็สามารถสร้าง React app แรกแบบง่าย ๆ ได้แล้ว
ซึ่งมีเป้าหมายเพื่อ
- การออกแบบ component ซึ่งมีความสำคัญอย่างมาก
- ทำความเข้าใจเกี่ยวกับ React component
- ทำความเข้าใจเกี่ยวกับการส่งข้อมูลระหว่าง component (Data flow)
แต่ยังมีอีกมากมายหลายเรื่องให้เราศึกษา !!
โดย code ตัวอย่างอยู่ที่ Github::Up1:React
