เริ่มต้นเขียน React.js (Reactjs beginner ) Part 1

ต่อจาก Part 0 ที่ได้เริ่มรู้จัก React และสร้างโปรเจคเบื้องต้นไปแล้ว ถ้ายังไม่ได้อ่านลิงค์ข้างล่างนี้

เริ่มต้นเขียน React.js (Reactjs beginner ) Part 0

สิ่งที่จะได้เรียนรู้ใน Part 1

• React 2020
• Functional component ( การเขียน component ในรูปแบบ function )
• Data binding ( การผูก data ใน html element )
• Style in React ( รูปแบบต่างๆของการใช้ style บน React )

1. React 2020
   - React 2020 ได้เปลี่ยนจากเดิมที่เป็นแบบ class component มาเป็น functional component ซึ่ง life cycle ที่ใช้ก็จะมาแทนด้วย react hooks ซึ่งเราจะกล่าวถึงใน Part ต่อๆไป
   ปล. ในบล็อกนี้จะสอนด้วย functional component และ react hooks เป็นหลัก

2. Functional component

• เป็น component ที่สร้างด้วย function และ export function ที่มีการ return html element เพื่อ React DOM ไป render.

• จะสังเกตได้ว่าการ return จะ return html element tag ที่ครอบได้แค่ชุดเดียว เพราะใน react จะไม่สามารถ return html element tag ที่ครอบได้มากกว่าหนึ่งชุด

• จะเห็นได้ว่า React แจ้ง Error ทันที

• แนะนำเพิ่มสามารถใช้ <></> (fragment) ในการครอบได้

3. Data binding

• วิธีการเอา data หรือ ข้อมูล ไปแสดงใน html tag โดยใช้ {} ระหว่าง tag

• ผลลัพธ์

4. Styling

• className
  จะเป็นการใช้ class ใน css ทั่วไปโดยกำหนดชื่อ class และ สร้าง class ใน css file และ import css file ที่เราได้เขียนใว้
• Style in javascript object

จาก code ตัวอย่าง จะเห็นได้ถึงวิธีการใช้ style ใน reactjs แต่ละแบบ

• ข้อสังเกต property ของ css ในรูปแบบ javascript object เปลี่ยนจากเดิม background-color เป็น backgroundColor หรือเปลี่ยนจากใช้ - ไปใช้รูปแบบ camel case นั้นเอง

Credits

https://res.cloudinary.com/practicaldev/image/fetch/s--jaFWlQCW--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/bqc1gncxdhau0zfuxqmp.png

Thank alot of all credits.