ก่อนจะเริ่มมาเขียนบทความนี้ ขอกล่าวที่มาที่ไปก่อนครับ ก่อนที่จะเริ่มมาเขียนตัว React.js นั่น ได้ลองเขียนมาหลายๆ ภาษา หลายๆรูปแบบ จนมาถึงโปรเจคที่ต้องจับ จำเป็นต้องใช้ตัว React.js แล้ว มันคืออะไร มันเป็นยังไง แล้วทำยังไง ก็เลยลองๆศึกษาดู เหยย ก็โอเคเลยนะจริงๆมันไม่ใช่แค่จะมีแต่ React.js น๊า Next.js ก็มีด้วย เอาเป็นว่า เรามาเริ่มกันดีกว่า React นั่นคืออะไร? ลองอ่านดูกันครับ อาจจะมีหลายตอน รึตอนเดียว ขึ้นกับคนสนใจเนอะ กับ React.js ฉบับบ้านๆ เขียนเอง ฝึกฝน ทดลองเอง เรามาลองดูกัน
React เป็นภาษา JavaScript library ประเภทหนึ่ง ที่ทีมงานของ Meata หรือเดิมๆที่เรารู้จักกันก็คือ Facebook นั่นเองเป็นผู้พัฒนาขึ้น โดยหากเราดูในหน้า facebook.com เราจะเห็นว่า มีเมนูต่างๆมากมาย หน้าจอต่างๆมากมาย live feed message avata post บลาๆเยอะแยะไปหมด ทาง facebook เลยคิด React.js ขึ้นมาเพื่อใช้สำหรับสร้าง User Interface (UI) ง่ายๆก็พวกส่วนประกอบต่างๆในหน้าจอนั่นแหละบ้านๆดีบอกแบบนี้ ที่ให้ทีมพัฒนาของ facebook เอง สามารถเขียน Code ในการสร้าง UI ที่มีความซับซ้อนที่เกริ่นไปก่อนหน้านี้อะแหละ โดย React.js เนี่ยะ เราสามารถแบ่งเป็นส่วนประกอบเล็กๆ หั่นเป็นส่วนๆ
เราเรียกง่ายๆจำให้ขึ้นใจกันนะว่า Component โดยสามารถแบ่งแยกการทำงานออกจากกันได้เป็นส่วนๆ ซึ่งแต่ละส่วนนั้น โดยสามารถแยกการทำงานออกจากกันได้อย่างอิสระ และ
เราสามารถออกแบบการทำงานโดยนำชิ้นส่วน UI ที่ออกแบบเหล่านั้นนำไปใช้ซ้ำได้อีกด้วย โดย ง่ายๆ Reuse ใช้ซ้ำในหลายๆที่หลายๆหน้า เช่น Component ของ post , Component ของ Message เป็นต้น
โดย React จะแบ่งส่วนประกอบหลัก ๆ มีทั้งหมด 3 ส่วน ดังนี้คือ
- Component คือ ส่วนประกอบต่าง ๆ ในเว็บไซต์ของเรา จะแบ่งเป็น Component เอาเพื่อไว้สำหรับ Reuse หรือใช้ซ้ำได้ในอนาคต
- State คือ ข้อมูลที่จัดเก็บอยู่ภายใน Component แต่ละตัวไม่แบ่งให้ใคร เราเรียกว่า State นั่นเอง
- Props คือ ข้อมูลที่ถูกส่งต่อจาก Component หนึ่งไปยังอีก Component ตัวหนึ่ง โดย React จะเรียกว่า Props (Properties) โดยจะเป็นได้ทั้ง data ประเภท Text อื่นๆหรือ Object Array ได้นะ
การติดตั้งเพื่อเตรียมการใช้งาน React.js
การติดตั้งเพื่อเตรียมการใช้งาน React นั้นมีขั้นตอนดังนี้
- ติดตั้ง npm ไว้ในเครื่องให้เรียบร้อย เข้าไปดาวน์โหลดได้ลิงค์นี้ https://www.npmjs.com/get-npm
- เราจะสร้างโปรเจ็กต์เริ่มต้นขึ้นมาจากเครื่องมือที่ชื่อ create-react-app ที่จะสร้างไฟล์พื้นฐานต่างๆที่จำเป็นในการเขียน React ขึ้นมา ให้ทำการติดตั้งด้วยการพิมพ์คำสั่งที่ Command
npm install -g create-react-app - สร้างโปรเจ็กต์ใหม่ขึ้นมาด้วยการพิมพ์คำสั่งที่ Command
npx create-react-app “ชื่อโปรเจคที่ต้องการ” เช่น px create-react-app My_Project
เราจะได้ไฟล์ต่างๆขึ้นมาประมาณนี้
ลองรันด้วยคำสั่ง
npm start หากสามารถรันขึ้นมาได้ที่ Browser โดยมี URL ดังนี้ http://localhost:3000/
เป็นอันเสร็จสิ้นการทดสอบการติดตั้งโปรเจค
พอเริ่มศึกษาลงไปเรื่อยๆ ในส่วนของ React ก็จะเริ่มมีคำเหล่านี้ขึ้นมา ไม่ว่าจะเป็น
- JSX
- HOOKS
- REDUX
- useState , useEffect คืออะไร
- useSelector , useDispatch คืออะไร
- React สามารถ Debug ได้ไหมน๊อ
- Class Component Vs Function Component
- React life Cycle
คำศัพท์เกี่ยวกับ React ต่างๆที่ได้กล่าวมาข้างบนนั้น เอาเป็นว่ามาต่อกันคราวหน้ากันดีกว่า วันนี้ เอาเป็นแค่หอมปากหอมคอกันเนอะ ว่า React คืออะไร ลองติดตั้ง ทดสอบกันก่อน หรือหากสนใจเพิ่มเติม รึติดตรงไหน แจ้งเข้ามาได้นะ รวมถึงหากสนใจเรื่องไหนเพิ่มเติม มาคุยกันได้ในหัวข้อนี้เลย React คืออะไร แล้วใช้ยังไงกันว้าาา
วันนี้ขอกราบลาพี่น้องชาวหมีเสดพลด้วยเน่อ อย่าลืมกินข้าวกินปลา ด้วยนะ ไม่งั้นจะเหมือนพี่หมีแว่น หิวก็หิว ปวดหลังก็ปวด มัวแต่งม เขียน React อยู่ช่วงแรกเนี่ยะ กว่าจะจบโปรเจคได้ เฮือกกันเลย แต่หลังๆพอจับวิธีการเขียนได้แล้ว ยิ้มมหวานเลยจ้า พี่น้อง
