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 ให้เปลี่ยน useเข้มงวด ที่ด้านบนของไฟล์เพื่อใช้ Babel; คุณจะต้องติดตั้ง 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) บูสต์ 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 น่าจะช่วยหาว่าเกิดอะไรขึ้นที่นั่น! เมื่อ Node ได้รับการติดตั้งอย่างถูกต้องในเวอร์ชัน 10+ เราก็พร้อมที่จะดำเนินการสร้างโครงการตั้งแต่เริ่มต้น!

คงที่เทียบกับไดนามิกเทียบกับ PureComponent

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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

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