React: คู่มือฉบับสมบูรณ์สำหรับผู้เริ่มต้นใช้งาน ReactJS

คุณเคยได้ยินเกี่ยวกับ ReactJS แต่ไม่รู้ว่าจะเริ่มต้นอย่างไร คุณเคยเริ่มเล่น ReactJS แต่ไม่แน่ใจว่าจะใช้มันอย่างไรในชีวิตประจำวันของคุณ? บทความนี้จะเป็นแนวทางของคุณในการเรียนรู้และควบคุมไลบรารี React JavaScript ซึ่งเป็นไลบรารียอดนิยมที่นักพัฒนาใช้ในปัจจุบัน ฉันจะแสดงให้คุณเห็นอย่างชัดเจนถึงวิธีเริ่มต้นใช้งาน ReactJS และวิธีรวมเข้ากับเวิร์กโฟลว์ของคุณ เพื่อให้คุณสามารถสร้างส่วนต่อประสานผู้ใช้แบบไดนามิกมากขึ้นโดยไม่ต้องอ้อมโดยไม่จำเป็นผ่านเฟรมเวิร์กหรือไลบรารีอื่น มาเริ่มกันเลย!

ReactJS คืออะไร?

React เป็นไลบรารีการพัฒนาส่วนหน้าที่สนับสนุนให้คุณสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ หากคุณกำลังมองหาวิธีที่มีประสิทธิภาพในการสร้างอินเทอร์เฟซผู้ใช้ React อาจเป็นสิ่งที่คุณต้องการ เมื่อสร้างอินเทอร์เฟซผู้ใช้ด้วย Vanilla JavaScript หรือ jQuery โค้ดของคุณอาจซับซ้อนและเทอะทะอย่างรวดเร็ว ด้วยการใช้ React และวิธีการพัฒนาตามคอมโพเนนต์ที่ต้องการ โค้ดของคุณจะใช้ซ้ำและบำรุงรักษาได้ง่ายกว่ามาก

ในความเป็นจริง เมื่อคุณสร้างคอมโพเนนต์บางส่วนแล้ว มันค่อนข้างง่ายสำหรับนักพัฒนาคนอื่นๆ ในทีมของคุณที่จะเข้าร่วมและมีส่วนร่วมกับโค้ดโดยไม่ต้องมีประสบการณ์ใดๆ กับ (หรือมีความรู้เรื่อง) React ใดๆ เลย!

แนะนำสำหรับคุณ: 5 เคล็ดลับที่ควรค่าแก่การเพิ่มประสิทธิภาพของ React Native App

ทำไมต้องใช้ ReactJS?

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

สำหรับนักพัฒนาที่เคยทำงานกับ jQuery หรือ Vanilla JavaScript จนถึงตอนนี้ การเรียนรู้วิธีทำงานกับเทคโนโลยีใหม่อาจเป็นเรื่องที่น่าหงุดหงิด ในบางกรณี นักพัฒนาซอฟต์แวร์อาจต้องการโค้ดหลายร้อยบรรทัดเพื่อสร้างกล่องโมดอลหรือแถบนำทางอย่างง่าย เนื่องจาก React ใช้ DOM เสมือนแทนการเขียนและเขียนใหม่องค์ประกอบ DOM จริงทุกครั้งที่มีการเปลี่ยนแปลงในสถานะ (เช่นเดียวกับที่ทำกันบ่อยๆ ใน Angular) การใช้ React จะช่วยประหยัดเวลาอันมีค่าโดยให้โค้ดน้อยลงในขณะเดียวกันก็ทำให้แอปพลิเคชันของคุณเร็วขึ้นกว่าเดิม ก่อน.

ติดตั้งในเบราว์เซอร์

ก่อนที่คุณจะสามารถใช้ React ในเบราว์เซอร์ได้ คุณต้องติดตั้งก่อน โชคดีที่มันเป็นกระบวนการง่ายๆ ต้องขอบคุณ npm และ Browserify ใช้โหนดหรือสภาพแวดล้อมฝั่งเซิร์ฟเวอร์อื่นหรือไม่ คุณสามารถใช้ npm และ Browserify ได้เช่นกัน เมื่อคุณติดตั้งทุกอย่างแล้ว ให้สร้างไฟล์ HTML ด้วยโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ มิฉะนั้น ให้ใช้ตัวสร้างสำเร็จรูป เช่น Create-React-App ที่สร้างโปรเจ็กต์เริ่มต้นพื้นฐานสำหรับคุณซึ่งมีการตั้งค่าสิ่งเหล่านี้ทั้งหมดไว้แล้ว

การแปลง App.js เพื่อใช้ ReactJS

ขณะนี้โค้ดทั้งหมดของเราอยู่ในไฟล์เดียวชื่อ App.js แต่นั่นทำให้ยากต่อการทดสอบ ดังนั้นขอแยกออกเป็นหลายไฟล์ เราจะเริ่มต้นด้วยการแปลงส่วนประกอบหนึ่งจากการเขียนใน ES6 เป็นการเขียนใน JSX จะง่ายที่สุดหากเราเก็บส่วนประกอบ React ทั้งหมดไว้ในไดเร็กทอรีเดียว (ซึ่งคุณควรทำ) มาสร้างไดเร็กทอรี src/components ว่างๆ แล้วย้าย App.js เข้าไป: mv app/App.js src/components/app-react.js จากนั้นเปลี่ยนชื่อเป็น app-react.js

หากต้องการใช้ React แทนที่จะใช้แค่ ES6 ให้เปลี่ยนการใช้แบบเข้มงวด ที่ด้านบนของไฟล์ของคุณเพื่อใช้บาเบล คุณจะต้องติดตั้ง Babel ผ่าน npm install –save babel-CLI babel-preset-es2015 babel-preset-react ซึ่งจะทำให้ Babel รวบรวมไวยากรณ์ JSX ใหม่ของคุณ

เริ่มสร้างด้วยแอปตัวอย่างของเรา

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

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

ตัวอย่างพื้นฐานการใช้ส่วนประกอบ

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

คุณอาจชอบ: Facebook JavaScript Engine (Hermes) Boosts React Native บน Android

รู้เบื้องต้นเกี่ยวกับไวยากรณ์ JSX

JSX ไม่ใช่ภาษาโปรแกรมเช่น JavaScript หรือ TypeScript แต่เป็นไวยากรณ์ที่ได้รับการออกแบบให้เป็นส่วนขยายของ JavaScript ด้วยเหตุนี้ ผู้พัฒนารายใหม่จึงจำเป็นต้องเข้าใจวิธีการทำงานและสถานที่ที่คุณสามารถใช้ได้ โค้ด JSX เขียนในลักษณะที่คล้ายกับ HTML มาก ทำให้โค้ด JSX เป็นขั้นตอนแรกที่ยอดเยี่ยมสำหรับนักพัฒนามือใหม่ที่กำลังเรียนรู้ทั้งสองภาษาพร้อมกัน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่ทำให้ JSX ไม่เหมือนใครและวิธีที่คุณสามารถเชี่ยวชาญได้อย่างง่ายดาย อ่านบทช่วยสอน ReactJS ฉบับเต็มของเรา!

ในการเริ่มสร้างโปรเจ็กต์ React แรกของคุณ ให้สร้างไดเร็กทอรีใหม่โดยพิมพ์ mkdir react_tutorial ภายในเทอร์มินัลของคุณ เมื่อดำเนินการเสร็จสิ้น ให้ไปที่ไดเร็กทอรีที่สร้างขึ้นใหม่โดยพิมพ์ cd react_tutorial จากนั้นเปิดเทอร์มินัลของคุณและเริ่มต้น Node.js โดยพิมพ์ node -v

คุณควรเห็น v10.x แสดงอยู่ข้าง Node หากคุณติดตั้ง Node สำเร็จ ถ้าไม่ ให้ลองใช้ nvm install 10 หากคุณใช้ macOS หรือ Linux หากไม่ได้ผล Google ควรจะสามารถช่วยค้นหาว่าเกิดอะไรขึ้นที่นั่น! เมื่อติดตั้งโหนดเวอร์ชัน 10+ อย่างถูกต้องแล้ว เราก็พร้อมที่จะดำเนินการสร้างโครงการตั้งแต่เริ่มต้น!

คงที่ vs ไดนามิก vs PureComponent

เมื่อสร้างเว็บแอปด้วย JavaScript ที่ทันสมัย ​​คุณมีตัวเลือกหลักสามตัวเลือกในการสร้างส่วนประกอบ UI สิ่งเหล่านี้รวมถึง HTML แบบสแตติก (มาร์กอัปปฏิกิริยา) คำขอ AJAX แบบไดนามิก (ข้อมูลปฏิกิริยา) และการนำองค์ประกอบ DOM ที่มีอยู่กลับมาใช้ใหม่ (ปฏิกิริยาบริสุทธิ์) แต่ละวิธีมีข้อดีของตัวเองและสามารถนำไปใช้ได้แตกต่างกันขึ้นอยู่กับกรณีการใช้งานเฉพาะของคุณ

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

วิธีวงจรชีวิตในส่วนประกอบ ReactJS

มีวิธีวงจรชีวิตไม่กี่วิธีที่คุณสามารถใช้ภายในส่วนประกอบของคุณเพื่อควบคุมส่วนต่างๆ ของวงจรชีวิต เมธอด componentWillMount() ถูกเรียกใช้ทันทีก่อนที่ส่วนประกอบจะถูกเรนเดอร์เป็นครั้งแรก ภายในนั้น คุณสามารถเพิ่มการเริ่มต้นใดๆ ที่คุณต้องการสำหรับคอมโพเนนต์ของคุณ เช่น การบันทึกข้อมูลโดยใช้ localStorage เมธอด componentDidMount() จะถูกเรียกใช้ทันทีหลังจากติดตั้งและแสดงผลส่วนประกอบแล้ว ที่นี่ คุณสามารถเพิ่มโค้ดที่ควรรันเมื่อคอมโพเนนต์ได้รับการเตรียมใช้งานโดยสมบูรณ์แล้ว (เช่น การสร้างคำขอเครือข่ายใหม่)

สถานะการจัดการในส่วนประกอบ

วิธีที่ Reacts เข้าถึงการจัดการสถานะนั้นค่อนข้างไม่เหมือนใคร เพื่อให้เข้าใจว่าทำไมเราต้องพิจารณาก่อนว่าเฟรมเวิร์กส่วนใหญ่จัดการสถานะอย่างไร

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

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

ส่งผ่านข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อย

มีสองวิธีในการส่งผ่านข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อย: ผ่านอุปกรณ์ประกอบฉากหรือสถานะ การส่งผ่านข้อมูลผ่านอุปกรณ์ประกอบฉากอาจมีประโยชน์สำหรับการกำหนดตัวแปรสำหรับส่วนประกอบของคุณ เช่น การกำหนดจำนวนรายการในอาร์เรย์ ในทางกลับกัน การส่งข้อมูลผ่านสถานะจะมีประโยชน์ถ้าคุณต้องการส่งผ่านวัตถุขนาดใหญ่ (ซึ่งอาจทำให้แอปพลิเคชันของคุณทำงานช้าลง) หรือกำหนดฟังก์ชันที่คุณต้องการเรียกจากภายในส่วนประกอบย่อยของคุณ มาดูทั้งสองวิธีและดูว่าเหมาะสมที่จะใช้ในโค้ดของเราเมื่อใด!

คุณอาจชอบ: อะไรคือการปรับปรุงที่ตอบสนองต่อข้อเสนอของ JS ใน Headless WordPress?

บทสรุป

เมื่อคุณจ้าง ReactJS Developer อย่าลืมเลือกฟรีแลนซ์ที่มีประสบการณ์ในการทำงานกับ JavaScript, CSS, HTML และ Node.js มานานกว่า 5 ปี สิ่งสำคัญคือผู้พัฒนาของคุณสามารถแสดงความเชี่ยวชาญของพวกเขาโดยให้ตัวอย่างโครงการและออกแบบโครงการที่เกี่ยวข้องกับความต้องการเฉพาะของคุณ สิ่งนี้จะช่วยให้พวกเขาเข้าใจเป้าหมายและวัตถุประสงค์ทางธุรกิจของคุณได้อย่างง่ายดาย

ผู้เชี่ยวชาญคนใดจะเริ่มต้นด้วยการถามคำถามก่อนเริ่มงานเสมอ ดังนั้น การจ้างผู้เชี่ยวชาญที่ถามคำถามในเวลาที่เหมาะสมจึงเป็นสิ่งจำเป็นในขณะที่สร้างเว็บไซต์โดยใช้กรอบการตอบสนอง ต้นทุนการจ้างงานโดยเฉลี่ยของนักพัฒนา ReactJS จะอยู่ระหว่าง $40-$100 ต่อชั่วโมง แต่ผู้เชี่ยวชาญคิดค่าใช้จ่ายสูงกว่าปกติ ดังนั้น โปรดระลึกไว้เสมอเมื่อกำหนดงบประมาณสำหรับการตั้งค่าเว็บไซต์โดยใช้เฟรมเวิร์กการพัฒนา ReactJS

 บทความนี้เขียนโดย Rahul Kalsariya จาก Tagline Infotech LLP