9 แนวคิดและหัวข้อโครงการตอบโต้ที่น่าตื่นเต้นสำหรับผู้เริ่มต้นปี 2022
เผยแพร่แล้ว: 2021-01-06ดังนั้น คุณจึงเข้าใจพื้นฐานของ React และเข้าใจ JavaScript เป็นอย่างดี ตอนนี้บทช่วยสอนพื้นฐานค่อนข้างง่ายสำหรับคุณแล้ว คุณกำลังคิดที่จะยกระดับขึ้นไปอีกขั้น แต่อย่างไร
นี่เป็นปัญหาที่ React Freshers หลายคนต้องเผชิญเมื่อพวกเขาทำพื้นฐานของไลบรารี React สำเร็จและเข้าสู่ขั้นตอนกลางของการเรียนรู้ วิธีที่ดีที่สุด (และอาจเป็นวิธีที่มีประสิทธิผลมากที่สุด) ในการก้าวไปข้างหน้าคือการมุ่งเน้นที่การพัฒนาโครงการ React
ไม่ เราไม่ได้พูดถึงการทำโปรเจ็กต์อุตสาหกรรมขนาดใหญ่ แต่เป็นโปรเจ็กต์ในโลกแห่งความเป็นจริงที่มีขนาดเล็กกว่า ซึ่งสามารถช่วยให้คุณสร้างทักษะเชิงทฤษฎีของคุณให้เป็นประสบการณ์จริงได้ ด้วยการทำงานในโครงการ React ในโลกแห่งความเป็นจริง คุณสามารถเชื่อมช่องว่างระหว่างการเป็นผู้เริ่มต้นใช้งาน React กับการเป็นนักพัฒนามืออาชีพได้
เรียนรู้การสร้างแอปพลิเคชัน เช่น Swiggy, Quora, IMDB และอื่นๆ
การพัฒนาโครงการ React ไม่เพียงแต่ช่วยให้คุณเสริมทักษะ React ของคุณเท่านั้น แต่ยังช่วยให้คุณสำรวจด้านสร้างสรรค์ของคุณด้วย อย่างไรก็ตาม ก่อนที่เราจะเริ่มต้นพูดคุยเกี่ยวกับโครงการ React ให้เราพูดถึง "ทำไม" และ "อย่างไร" ของการพัฒนาโครงการ React ก่อน
อ่าน: คำถามและคำตอบในการสัมภาษณ์ 20 อันดับแรก
สารบัญ
ทำไมคุณควรทำงานในโครงการ React?
คุณเคยได้ยินคำโบราณว่า “การปฏิบัติทำให้สมบูรณ์แบบ” ใช่ไหม? สถานการณ์นี้ก็เหมือนกัน เมื่อคุณเชี่ยวชาญเกี่ยวกับแนวคิดพื้นฐานของ React แล้ว คุณต้องทำความคุ้นเคยกับการสร้างโปรเจ็กต์ React ในกระบวนการพัฒนาโครงการ React คุณจะได้เรียนรู้วิธีพัฒนาแอพที่ใช้งานได้จริง
ยิ่งไปกว่านั้น เมื่อคุณเริ่มพัฒนาโปรเจ็กต์ React คุณจะได้เรียนรู้ว่าเครื่องมือใดและระบบนิเวศของ React ที่จะใช้สำหรับโปรเจ็กต์ React ใด ข้อได้เปรียบที่ใหญ่ที่สุดของการสร้างแอพด้วย React คือเมื่อคุณปรับใช้ได้สำเร็จ คุณสามารถรวมเข้ากับพอร์ตโฟลิโอของคุณเพื่อสร้างความประทับใจให้ผู้มีโอกาสเป็นนายจ้าง
อย่างไรก็ตาม ส่วนที่ยากที่สุดของกระบวนการคือการค้นหาว่าแอป React ใดที่คุณควรสร้าง เพื่อช่วยคุณแก้ปัญหาด้วยการพัฒนาโครงการ React เราได้รวบรวมรายชื่อโครงการ React สำหรับผู้เริ่มต้น
จะเริ่มกระบวนการพัฒนาแอพ React ได้อย่างไร?
สิ่งแรกที่ต้องจดจำเกี่ยวกับการพัฒนาโครงการ React คือมันเป็นกระบวนการที่กำกับตนเองเป็นส่วนใหญ่ ต่างจากการเรียนรู้พื้นฐานของ React ผ่านบทช่วยสอนออนไลน์และสื่อการเรียนรู้ ไม่มีอะไรจะแนะนำคุณมากนักในการสร้างโครงการ React คุณจะต้องเรียนรู้จากการลองผิดลองถูก
อ่านเพิ่มเติม: แนวคิดโครงการเข้ารหัสแบบเต็มสำหรับผู้เริ่มต้น
แต่นั่นไม่ได้หมายความว่าจะไม่มีอะไรช่วยให้คุณเรียนรู้พื้นฐานของการพัฒนาโครงการด้วย React ได้อย่างแน่นอน คุณสามารถหาเนื้อหามากมายเกี่ยวกับวิธีเริ่มต้นการพัฒนาโครงการ React มีบทความออนไลน์มากมายที่สอนขั้นตอนสำคัญของการพัฒนาแอพพร้อมกับซอร์สโค้ด
ในฐานะผู้เริ่มต้น งานในการพัฒนาโครงการ React ตั้งแต่เริ่มต้นอาจดูท้าทาย แต่มีความลับในการทำให้กระบวนการง่ายขึ้น - แบ่งแอปพลิเคชันออกเป็นส่วนประกอบที่มีขนาดเล็กลง พยายามมุ่งเน้นที่การสร้างคุณลักษณะทีละอย่าง และเชื่อมต่อจุดต่างๆ อย่างต่อเนื่อง ในขณะที่คุณฝึกฝนและทดลองกับเครื่องมือและระบบนิเวศของ React ต่อไป คุณจะเข้าใจรูปแบบทั่วไปของการพัฒนาแอพและเครื่องมือใดที่ดีที่สุดสำหรับการพัฒนาคุณสมบัติเฉพาะของแอพ React
เคล็ดลับเพิ่มเติม : บ่อยครั้ง ผู้เริ่มต้นมักมีความเข้าใจผิดว่าต้องสร้างแบ็กเอนด์ของแอปตั้งแต่ต้นจนจบ แต่ก็ไม่จำเป็น คุณสามารถใช้ประโยชน์จากเทคโนโลยีไร้เซิร์ฟเวอร์ เช่น AWS Amplify, Firebase และ Hasura เพื่อให้แอปของคุณมีแบ็กเอนด์ที่พร้อมใช้งานทันที เครื่องมือเหล่านี้ไม่เพียงแต่ประหยัดเวลาของคุณ แต่ยังช่วยขยายประสิทธิภาพการทำงานของคุณอีกด้วย
เรียนรู้เกี่ยวกับ: เงินเดือนนักพัฒนาเต็มกองในอินเดีย
ตอบสนองแนวคิดโครงการสำหรับผู้เริ่มต้น
1. แอปโซเชียลมีเดีย
อนาคตของการตลาดโซเชียลมีเดียในอินเดียนั้นน่าทึ่งมาก เนื่องจาก แอพโซเชียลมีเดีย เช่น Facebook, Instagram, Snapchat และ Twitter เป็นตัวอย่างที่สำคัญของแอพที่ซับซ้อน แอพเหล่านี้สามารถเป็นแรงบันดาลใจที่ยอดเยี่ยมสำหรับโปรเจ็กต์ React เนื่องจากมีฟีเจอร์ขั้นสูงจำนวนมากขึ้นเรื่อยๆ ส่วนที่ดีที่สุดเกี่ยวกับการสร้างแอปโซเชียลมีเดียโดยใช้ React คือ คุณรู้ว่าต้องรวมฟีเจอร์ประเภทใดในแอป คุณลักษณะทั่วไปบางประการของแอปโซเชียลมีเดียเกือบทั้งหมด ได้แก่:
- การตรวจสอบผู้ใช้
- การแจ้งเตือนและฟีดข่าว
- รวมเข้ากับแพลตฟอร์มอื่นได้ง่าย
- โพสต์ แชร์ และแสดงความคิดเห็น
โดยพื้นฐานแล้ว แอปโซเชียลมีเดียมีขอบเขตเพียงพอสำหรับการทดลอง หลังจากเพิ่มคุณสมบัติพื้นฐานที่สุดแล้ว (ตามที่กล่าวไว้ข้างต้น) คุณสามารถสร้างคุณสมบัติเพิ่มเติมสำหรับการปรับแต่งที่อนุญาตให้ผู้ใช้ปรับแต่งโปรไฟล์และบัญชีตามความต้องการและความชอบของพวกเขา
เทคโนโลยีที่คุณสามารถใช้ได้:
- สร้างแอป React หรือ React Native สำหรับสร้าง UI แบบไดนามิกสำหรับโพสต์ ข้อความ และการถูกใจ
- AWS Amplify หรือ Firebase หรือ Hasura (โดยใช้การสมัครสมาชิก GraphQL) สำหรับข้อมูลแบบเรียลไทม์
- ฟังก์ชัน AWS Lambda หรือ Firebase สำหรับการแจ้งเตือนแอป
- ที่เก็บข้อมูล Firebase หรือ Cloudinary สำหรับการอัปโหลดรูปภาพและวิดีโอ
2. แอปอีคอมเมิร์ซ
นับตั้งแต่อีคอมเมิร์ซบุกเข้าสู่อุตสาหกรรมหลัก แอปอีคอมเมิร์ซ (เช่น Amazon, Flipkart, Nykaa เป็นต้น) ได้กลายเป็นสิ่งที่มีอยู่ทั่วไปทุกหนทุกแห่ง แอพเหล่านี้เป็นส่วนสำคัญในชีวิตของเรา ดังนั้น หากคุณสร้างแอปอีคอมเมิร์ซที่ใช้งานได้จริง แสดงว่าคุณมีทักษะในโลกแห่งความเป็นจริงในการติดตามแนวโน้มล่าสุดในอุตสาหกรรม ไม่จำเป็นต้องพูดว่า คุณจะกลายเป็นผู้สมัครที่ดึงดูดใจต่อหน้าผู้มีโอกาสเป็นนายจ้าง
โปรดทราบว่าเรากำลังพูดถึงการพัฒนาโครงการอีคอมเมิร์ซขนาดเล็กที่เน้นเฉพาะอุตสาหกรรมเฉพาะมากกว่า ไม่ใช่ตลาดขนาดใหญ่อย่าง Amazon หรือ eBay คุณสามารถเลือกอุตสาหกรรมที่คุณสนใจ เช่น อุปกรณ์อิเล็กทรอนิกส์ (โทรศัพท์มือถือ ทีวี แล็ปท็อป ฯลฯ) และพัฒนาแอปอีคอมเมิร์ซของคุณ
แอปอีคอมเมิร์ซของคุณสามารถส่งมอบผลิตภัณฑ์หรือบริการได้ ไม่ว่าในกรณีใด คุณต้องแน่ใจว่านอกเหนือจากการเรียกดูผลิตภัณฑ์หรือบริการ ลูกค้าสามารถเพลิดเพลินกับการบริการลูกค้าที่ราบรื่น นี่เป็นสิ่งสำคัญสำหรับความสำเร็จของแอป การสนับสนุนลูกค้าอย่างรอบด้านและประสบการณ์ลูกค้าที่ดีเป็นองค์ประกอบสำคัญสองประการของแอปที่ประสบความสำเร็จ
เท่าที่เกี่ยวข้องกับคุณสมบัติของแอพ รักษาเลย์เอาต์และอินเทอร์เฟซให้เรียบร้อยและง่ายต่อการนำทาง รวมถึงตัวเลือกตำแหน่งสำหรับการจัดส่ง รวมตะกร้าสินค้าและสิ่งที่อยากได้ ตรวจสอบให้แน่ใจว่ากระบวนการเช็คเอาต์มีตัวเลือกการตรวจสอบสิทธิ์ที่จำเป็น (ในฐานะแขกหรือผู้ใช้ที่ลงทะเบียน)
เทคโนโลยีที่คุณสามารถใช้ได้:
- Create React App หรือ Gatsby เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการสร้างหน้าร้านที่แสดงผลิตภัณฑ์/บริการ
- Algolia เหมาะอย่างยิ่งสำหรับการสร้างอินเทอร์เฟซการค้นหาผลิตภัณฑ์ที่รวดเร็ว
- Netlify/AWS Lambda สำหรับจัดการกระบวนการเช็คเอาต์
- Stripe/react-stripe-elements สำหรับจัดการกระบวนการชำระเงิน
- Snipcart ช่วยให้คุณสร้างรถเข็นและจัดการสินค้าในรถเข็นได้
3. แอพพยากรณ์อากาศ
นี่เป็นโครงการ React ที่สมบูรณ์แบบสำหรับผู้เริ่มต้น เป็นโครงการที่ตรงไปตรงมา - คุณสามารถเขียนโค้ดได้ภายในเวลาไม่กี่ชั่วโมง! ในโปรเจ็กต์นี้ คุณต้องสร้างแอปสภาพอากาศที่สามารถแสดงพยากรณ์อากาศ 5 วันได้ สำหรับแอปนี้ คุณสามารถใช้ประโยชน์จากข้อมูลปลอมที่เข้ารหัสไว้ได้จนกว่าคุณจะแก้ไขคุณสมบัติทั้งหมดให้ถูกต้อง
แอปสภาพอากาศต้องมีฟังก์ชันพื้นฐานทั้งหมด รวมทั้งชื่อเมือง ไอคอนสภาพอากาศปัจจุบัน อุณหภูมิ ความชื้น ความเร็วลม ฯลฯ โดยต้องแสดงการบันทึกอุณหภูมิทั้งสูงและต่ำในแต่ละวัน รวมทั้งภาพที่เหมาะสมสำหรับแดดจัด/ฝนตก/ สภาพอากาศที่มีเมฆมาก/หิมะตก ควรมีการออกแบบที่ตอบสนองและรีเฟรชทุก ๆ ห้านาทีด้วยอุณหภูมิและสภาพอากาศที่แน่นอน
เมื่อคุณมีฟังก์ชันหลักแล้ว คุณสามารถขยายแอปเพิ่มเติมด้วยวิธีต่อไปนี้:
- รวมฟังก์ชันที่ผู้ใช้สามารถคลิกในวันใดวันหนึ่งในสัปดาห์เพื่อดูการพยากรณ์รายชั่วโมง
- เพิ่ม React Router ในแอป (npm ติดตั้ง react-router) ดู คู่มือการเริ่มต้นอย่างรวดเร็ว เพื่อเพิ่มเส้นทาง ตัวอย่างเช่น เส้นทางที่สามารถแสดงการพยากรณ์ 5 วัน พร้อมกับชื่อของวันและการพยากรณ์รายชั่วโมงสำหรับวันนั้น
- ลงชื่อสมัครใช้ Open Weather Map เพื่อรับคีย์ API ฟรีและดึงข้อมูลพยากรณ์อากาศ 5 วัน จากนั้นป้อนข้อมูลนี้ในแอปของคุณ
- หากคุณต้องการให้แอปนี้สนุกยิ่งขึ้นไปอีก คุณสามารถเพิ่มไลบรารีกราฟิก เช่น vx คุณสามารถดู ตัวอย่าง vx เหล่านี้ เพื่อเป็นแรงบันดาลใจได้
ขณะพัฒนาแอปสภาพอากาศนี้ คุณจะได้เรียนรู้วิธีเชื่อมต่อกับ API ภายนอกและแสดงผลลัพธ์ที่เหมาะสม ทักษะที่ใช้งานได้จริงนี้จะมีประโยชน์มากเมื่อคุณพัฒนาแอปหน้าเดียวประเภทอื่นๆ ที่ออกแบบมาเพื่อดึงข้อมูลจากแหล่งภายนอกและแสดงผล
แหล่งที่มา
เทคโนโลยีที่คุณสามารถใช้ได้:
- Node.js และ Bower เป็นสองตัวเลือกที่ยอดเยี่ยมสำหรับแอปนี้
- คุณ สามารถใช้ Gulp Task Runner และ SASS CSS pre-processor
- คุณสามารถตรวจสอบ Erik Flowers สำหรับไอคอนสภาพอากาศ และสำหรับโมดูล "จำเป็น" คุณสามารถ ใช้ Browserify
4. แอพส่งข้อความ
แอพส่งข้อความและบริการรับส่งข้อความเป็นที่นิยมอย่างมากในหมู่ชาวเน็ต อันที่จริง แอพส่งข้อความอย่าง WhatsApp และ Facebook Messenger เป็นส่วนสำคัญในชีวิตประจำวันของเรา ซึ่งเราไม่สามารถจินตนาการได้ว่าวันหนึ่งหากไม่มีสิ่งเหล่านี้ การส่งข้อความโต้ตอบแบบทันทีเป็นวิถีชีวิตในขณะนี้ แม้แต่บริษัท (ใหญ่หรือเล็ก) ก็พึ่งพาพลังของการส่งข้อความโต้ตอบแบบทันทีเพื่อให้การสนับสนุนลูกค้าตลอด 24 ชั่วโมงทุกวันแก่ลูกค้าของตน ดังนั้น การสร้างแอพส่งข้อความเป็นหนึ่งในวิธีที่ดีที่สุดในการสร้างรายได้จากทักษะ React ของคุณ
เมื่อพัฒนาแอพส่งข้อความบนมือถือ สิ่งแรกที่ต้องพิจารณาคือ คุณต้องสร้างแพลตฟอร์มที่สามารถอำนวยความสะดวกในการสนทนาระหว่างคนสองคนขึ้นไปในแบบเรียลไทม์ เรียลไทม์เป็นกุญแจสำคัญที่นี่ เนื่องจากเป็นสาระสำคัญของการส่งข้อความโต้ตอบแบบทันที คุณใช้เครื่องมืออย่างเช่น Firebase หรือ Hasura ที่ส่งข้อมูลผ่าน WebSockets เพื่อแสดงข้อความในการสนทนาได้ทันที React Native เป็นตัวเลือกในอุดมคติสำหรับโครงการนี้
เทคโนโลยีที่จะใช้:
- React Native หรือ React Native Web เนื่องจากทั้งสองสิ่งนี้ยอดเยี่ยมสำหรับการพัฒนาแอพส่งข้อความบนมือถือและแอพส่งข้อความแบบไฮบริด (เว็บ + มือถือ)
- Firebase, AWS Amplify หรือ Hasura สำหรับส่งและรับข้อความแบบเรียลไทม์
- ที่เก็บข้อมูล Cloudinary หรือ Firebase สำหรับส่ง/รับข้อความที่มีเนื้อหารูปภาพหรือวิดีโอ
- แพ็คเกจ npm emoji-mart สำหรับอีโมจิที่ผู้ใช้สามารถรวมไว้ในข้อความของพวกเขาได้
5. แอปเพิ่มประสิทธิภาพ
นี่เป็นหนึ่งในโปรเจ็กต์ที่ง่ายที่สุดในรายการ และด้วยข้อเท็จจริงที่ว่าบทช่วยสอนเกี่ยวกับแอพเพิ่มประสิทธิภาพมีมากมาย โปรเจ็กต์นี้น่าจะค่อนข้างง่ายสำหรับผู้เริ่มต้น ตามชื่อที่แนะนำ แอปเพิ่มประสิทธิภาพคือแอปที่ช่วยเพิ่มประสิทธิภาพการทำงานของคุณ แอปเพิ่มประสิทธิภาพที่ใช้บ่อยที่สุดบางแอป ได้แก่ แอปจดบันทึก แอปการจัดการทีม แอปรายการงาน แอปจัดการเวลา เป็นต้น
แม้ว่าแอปเหล่านี้เป็นแอปเพื่อการทำงานทั่วไป แต่คุณสามารถลองสร้างแอปที่ให้คำแนะนำโดยละเอียดเกี่ยวกับกระบวนการพัฒนาแอปได้ นี่เป็นแนวคิดที่ยอดเยี่ยมสำหรับแอปเพื่อการทำงาน เนื่องจากมีการออกแบบและฟีเจอร์ที่เรียบง่าย ซึ่งจะช่วยให้ผู้ใช้ทำตามขั้นตอนต่างๆ ของการพัฒนาแอปได้
ขณะพัฒนาแอปเพิ่มประสิทธิภาพ คุณต้องถามว่าฟีเจอร์ใดบ้างที่จะช่วยให้กำหนดการประจำวันหรือตารางการเรียนรู้ง่ายขึ้น และนั่นจะเป็นแนวทางในการเริ่มต้น เริ่มต้นด้วยคุณสมบัติง่ายๆ เช่น โปรแกรมแก้ไขข้อความสำหรับเขียนข้อความที่จัดรูปแบบพร้อมมาร์กดาวน์ หลังจากที่คุณพัฒนาฟีเจอร์หลักดังกล่าวได้สำเร็จหนึ่งหรือสองอย่างของแอปแล้ว ให้ค่อยๆ เริ่มขยายตามองค์ประกอบต่างๆ ตัวอย่างเช่น ตัวเลือกในการบันทึกข้อความเป็นไฟล์แต่ละไฟล์ในคอมพิวเตอร์ เพื่อส่งออกการมาร์กดาวน์ข้อความเป็น HTML สำหรับการเขียนอีเมลที่จัดรูปแบบ
เทคโนโลยีที่คุณใช้:
- สร้างแอป React (สำหรับเว็บ) หรือ React Native (สำหรับแพลตฟอร์มมือถือ)
- react-markdown npm package สำหรับแสดง markdown ใน UI ของแอพของคุณ
- react-codemirror2 npm package สำหรับเขียนโค้ดในบันทึกย่อ
- แพ็คเกจ npm ที่ตอบสนองได้สำหรับการเรียงลำดับเนื้อหารายการใหม่ผ่านตัวเลือกการคลิกแล้วลาก
ลองด้วย: แนวคิดโครงการออกแบบเว็บสำหรับผู้เริ่มต้น
6. แอพเพื่อความบันเทิง
เราได้บันทึกแอพที่ครอบคลุมมากที่สุดสำหรับแอพล่าสุด – แอพเพื่อความบันเทิง แอพเพื่อความบันเทิงมุ่งเน้นไปที่เนื้อหาสื่อ ตั้งแต่ภาพยนตร์ไปจนถึงเพลงและพอดแคสต์ Netflix, Audible, Spotify และ Soundcloud คือตัวอย่างบางส่วนของแอปเพื่อความบันเทิง ที่น่าสนใจคือ วันนี้ เรามีแอพความบันเทิงมากมายที่แบ่งปันความสัมพันธ์ที่ใกล้ชิดกับโซเชียลมีเดีย TikTok อาจเป็นตัวอย่างที่ดีที่สุดของแอปความบันเทิงบนโซเชียลมีเดีย มันมีวิดีโอคลิปสั้น ๆ ที่สร้างโดยผู้ใช้และขับเคลื่อนโดยการมีส่วนร่วมของผู้ใช้ระดับสูง จากนั้นคุณมี YouTube ที่ส่งเสริมการมีส่วนร่วมของผู้ใช้ผ่านการติดตาม การชอบ และความคิดเห็น
โครงการของเราจะง่ายกว่าแอปยอดนิยมเหล่านี้มาก เลือกสื่อบันเทิงที่คุณสนใจมากที่สุดและออกแบบแอปของคุณ แนวคิดคือการพัฒนาแอปเพื่อความบันเทิงที่ผู้ใช้สามารถเข้าสู่ระบบเพื่อดูและบันทึกเนื้อหาที่ต้องการได้ เมื่อคุณมีคุณลักษณะพื้นฐานแล้ว คุณสามารถลองใช้องค์ประกอบทางสังคมที่อนุญาตให้ผู้ใช้กดถูกใจ แชร์ และแสดงความคิดเห็นเกี่ยวกับเนื้อหาของแอปได้
เทคโนโลยีที่คุณสามารถใช้ได้:
- สร้างแอป React, Next.js หรือ Gatsby สำหรับ UI ของแอป
- Algolia สำหรับค้นหาสื่อ (ชื่อแทร็กเสียง ภาพยนตร์ พอดแคสต์ ฯลฯ)
- แพ็คเกจ npm ของ react-player สำหรับการเล่นสื่อ
- ที่เก็บข้อมูล Cloudinary/Firebase สำหรับการอัปโหลดเนื้อหาสื่อ
นอกเหนือจากหกโครงการนี้แล้ว ยังมีโครงการง่ายๆ อื่นๆ ที่คุณสามารถลองได้:
7. การ์ดโซเชียล
แม้ว่านี่ไม่ใช่แอปเต็มรูปแบบ แต่เป็นส่วนประกอบของแอป แต่ก็เป็นโครงการที่ดี อินเทอร์เน็ตเต็มไปด้วย UI การ์ดโซเชียลที่หลากหลาย คุณสามารถค้นหาได้ใน Facebook, Twitter และ Pinterest การ์ดโซเชียลเป็นแนวคิดโปรเจ็กต์ในอุดมคติสำหรับมือใหม่ เนื่องจากมันให้คุณฝึกฝนการแยกส่วน UI ออกเป็นส่วนประกอบ React นอกจากนี้ การ์ดโซเชียลยังเป็นการแสดงภาพที่สมบูรณ์แบบ ซึ่งคุณสามารถแสดงภาพพร้อมกับข้อมูลที่เกี่ยวข้องได้
แหล่งที่มา
8. เครื่องคิดเลข
เครื่องคิดเลขเป็นอุปกรณ์ง่ายๆ ที่ใช้ชุดฟังก์ชันทางคณิตศาสตร์พื้นฐาน รวมถึงการบวก การลบ การคูณ การหาร และเปอร์เซ็นต์ นี่จะเป็นแนวคิดเบื้องหลังโครงการของเรา – เครื่องคิดเลขที่ทำหน้าที่สำคัญเหล่านี้ได้ ในการสร้างเครื่องคิดเลขอย่างง่าย คุณต้องสร้างการตั้งค่าสำหรับส่วนประกอบต่างๆ ทั้งหมด สร้างแพลตฟอร์มแบบโต้ตอบร่วมกัน และสร้างระบบสนับสนุนสำหรับการจัดการความล้มเหลว การขัดข้อง และจุดบกพร่อง คุณสามารถใช้แพ็คเกจ Create React App เพื่อสร้างไดเร็กทอรีเพื่อเก็บและเรียกใช้แอพเครื่องคิดเลข
แหล่งที่มา
9. หน้าปัญหา Github
โปรเจ็กต์นี้มีขึ้นเพื่อออกแบบหน้าปัญหาของ Github เวอร์ชันที่เรียบง่าย นี่คือลักษณะที่ควรมีลักษณะดังนี้:
แหล่งที่มา
คุณต้องรักษาขอบเขตของคุณให้เล็ก ละเว้นรายการในส่วนหัว (การค้นหา การกรอง การติดดาว ฯลฯ) และมุ่งเน้นที่การนำรายการปัญหาไปใช้เท่านั้น ในการเริ่มต้นโครงการ อันดับแรก ให้รวบรวมปัญหาที่เปิดอยู่จาก API ของ Github และแสดงในรายการ หลังจากนี้ เพิ่มการควบคุมการแบ่งหน้าเพื่ออำนวยความสะดวกในการนำทางในรายการปัญหาทั้งหมด หากคุณเพิ่ม React Router คุณสามารถนำทางไปยังหน้าที่คุณต้องการได้โดยตรง คุณสามารถเพิ่มความซับซ้อนของหน้าได้โดยใส่หน้ารายละเอียดของปัญหาด้วย
เรียนรู้ หลักสูตรการพัฒนาซอฟต์แวร์ออนไลน์ จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว
บทสรุป
เราหวังว่าบทความนี้จะสร้างแรงบันดาลใจมากพอที่จะนำคุณเข้าสู่กรอบความคิดในการพัฒนาแอป ยิ่งคุณฝึกฝนมากเท่าไหร่ คุณก็จะยิ่งพัฒนาโครงการในโลกแห่งความเป็นจริงได้ดียิ่งขึ้นด้วย React
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการตอบสนอง การพัฒนาแบบเต็มสแต็ก ลองดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และ การมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักที่นำไปปฏิบัติจริง และความช่วยเหลือด้านงานกับบริษัทชั้นนำ
