วิธีเริ่มต้นใช้งาน React

React เป็นไลบรารีจาวาสคริปต์ที่ได้รับความนิยมอย่างมากซึ่งส่วนใหญ่ใช้เพื่อสร้างเว็บแอปพลิเคชันแบบหน้าเดียว มีหลายสิ่งที่คุณสามารถทำได้ด้วย React และมีบทช่วยสอนมากมายทางออนไลน์ แต่ที่นี่ฉันจะพูดถึงขั้นตอนที่ต้องปฏิบัติตามเพื่อเปลี่ยนจากศูนย์ไปเป็นส่วนประกอบปฏิกิริยาแรกของคุณเท่านั้น

ก่อนเริ่ม

คุณต้องใช้ NodeJs เวอร์ชันล่าสุด คุณสามารถติดตั้งเวอร์ชันล่าสุดได้จากnodesource

นอกจากนี้ หากคุณไม่คุ้นเคยกับไวยากรณ์ JSX ให้ตรวจสอบลิงก์นี้

การตั้งค่าสภาพแวดล้อมการพัฒนา

คุณสามารถลองใช้ React ได้ทันที เพียงแค่ใส่แท็กสคริปต์ในหน้าเว็บของคุณที่โหลดไฟล์ .js ที่พร้อมใช้งาน แต่ฉันไม่คิดว่านี่เป็นวิธีที่จะไป เพราะคุณไม่ต้องการลอง คุณต้องการใช้มัน

การใช้เครื่องมือcreate-react-appคุณสามารถตั้งค่าสำเร็จรูป ที่ช่วยให้คุณเห็นว่าแอปตอบโต้พื้นฐานมีลักษณะอย่างไร และคอมไพเลอร์แบบสดที่แสดงผลลัพธ์ของโค้ดของคุณทันทีที่คุณบันทึกไฟล์

เมื่อติดตั้งทุกอย่างเรียบร้อยแล้ว คุณก็แค่ไปที่โฟลเดอร์แอพ แล้วพิมพ์: npm start

ทำความเข้าใจส่วนประกอบและอุปกรณ์ประกอบฉาก

วัตถุประสงค์ขององค์ประกอบคือการแสดงบางสิ่งเพื่อแสดงทุกครั้งที่มีเหตุการณ์เฉพาะเกิดขึ้น ต้องกำหนดเหตุการณ์ที่ทำให้เกิดการแสดงผลซ้ำ เราพูดถึง "การเปลี่ยนสถานะ" ของส่วนประกอบ

props เป็นอ็อบเจ็กต์ที่มีคุณสมบัติที่ส่งผ่านไปยังฟังก์ชันคอมโพเนนต์ผ่านตัวแปรเป็นแอตทริบิวต์ html

เข้าใจตะขอ

React คลาสที่ใช้ครั้งแรกเพื่อกำหนดส่วนประกอบ แต่เมื่อเร็ว ๆ นี้มันเป็นไปได้ที่จะใช้ฟังก์ชันเพื่อกำหนดพวกมัน และ hooks คือสิ่งที่ช่วยให้คุณเข้าถึงฟังก์ชันต่างๆ ของ React ภายในฟังก์ชันเหล่านี้

สถานะเป็นฟังก์ชันพื้นฐานที่สุด ดังนั้นเบ็ดแรกที่คุณต้องการคือuseState

องค์ประกอบแรกของคุณ

ค้นหาไฟล์ app.js (หรือ app.tsx หากคุณใช้ typescript) ในโฟลเดอร์ src และเปิดขึ้นมา: ฟังก์ชัน App( ) จะเป็นองค์ประกอบแรกของคุณ ลบสิ่งที่อยู่ภายใน return( ) และสิ่งที่อยู่ด้านบนด้วย จากนั้นมาลองทำสิ่งง่ายๆ กัน:

ใส่รหัสนี้ใน return( )

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render( ) คือสิ่งที่อนุญาตให้ React "เขียน" ส่วนประกอบบนเว็บเพจ คุณจะพบมันภายใน index.js (หรือ index.tsx)

เพื่อให้เข้าใจการเปลี่ยนแปลงของรัฐ บทช่วยสอนส่วนใหญ่จะแสดงวิธีสร้างตัวนับที่เพิ่มมูลค่าทุกครั้งที่คุณคลิกปุ่ม

ปลั๊กอินแรกของคุณ

ทุกคนสามารถสร้าง hooks ของตัวเองได้ และมี hooks แบบกำหนดเองจำนวนมากที่พร้อมใช้งานเป็น “plugins” หนึ่งในนั้นคือreact-hook-formซึ่งจัดการการแสดงแบบฟอร์มและการตรวจสอบความถูกต้อง

ใน RHF useStateจะถูกแทนที่ด้วยuseFormซึ่งมีฟังก์ชันที่พร้อมใช้งานที่ได้รับการบันทึกไว้เป็นอย่างดี