อีก 9 โปรเจ็กต์เพื่อฝึกฝนทักษะ Front-End ของคุณ

การแนะนำ

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

ตัวอย่างเช่น Take React ซึ่ง Facebook เปิดแหล่งที่มาเมื่อสี่ปีที่แล้ว และได้กลายเป็นตัวเลือกอันดับหนึ่งสำหรับนักพัฒนา JavaScript ทั่วโลก

แน่นอนว่า Vue และ Angular ต่างก็มีฐานแฟนคลับที่ถูกต้องตามกฎหมายเช่นกัน แล้วก็มี Svelte และเฟรมเวิร์กสากลอื่นๆ เช่น Next.js หรือ Nuxt.js แกตสบี้ กริดซัม และควาซาร์... และอื่นๆ อีกมากมาย

หากคุณต้องการพิสูจน์ตัวเองในฐานะนักพัฒนา JavaScript ที่มีประสบการณ์ อย่างน้อยคุณควรมีประสบการณ์เกี่ยวกับเฟรมเวิร์กและไลบรารีต่างๆ บ้าง นอกเหนือจากการทำงานกับ JS เก่าที่ดี

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

บทความนี้ได้รับการแปลโดยได้รับการสนับสนุนจาก EDISON Software ซึ่ง สร้างห้องลองเสื้อผ้าเสมือนจริงสำหรับร้านค้าหลายแบรนด์และ ซอฟต์แวร์ทดสอบ.

แอพค้นหาภาพยนตร์โดยใช้ React (พร้อมตะขอ)

สิ่งแรกที่คุณสามารถเริ่มต้นได้คือสร้างแอปค้นหาภาพยนตร์โดยใช้ React ด้านล่างนี้เป็นภาพของแอปพลิเคชันขั้นสุดท้ายจะมีลักษณะดังนี้:

คุณจะได้เรียนรู้อะไร
ด้วยการสร้างแอปนี้ คุณจะพัฒนาทักษะ React ของคุณได้โดยใช้ Hooks API ที่ค่อนข้างใหม่ โปรเจ็กต์ตัวอย่างใช้ส่วนประกอบ React, hooks จำนวนมาก, API ภายนอก และแน่นอนว่าต้องมีสไตล์ CSS บางอย่าง

กองเทคโนโลยีและคุณสมบัติต่างๆ

• ทำปฏิกิริยากับตะขอ
• สร้าง-react-app
• JSX
• CSS

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

แอพแชทกับ Vue

อีกหนึ่งโปรเจ็กต์ที่ยอดเยี่ยมสำหรับคุณคือการสร้างแอปแชทโดยใช้ไลบรารี JavaScript ที่ฉันชื่นชอบ: VueJS แอปพลิเคชันจะมีลักษณะดังนี้:

คุณจะได้เรียนรู้อะไร
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างแอป Vue ตั้งแต่เริ่มต้น - การสร้างส่วนประกอบ การจัดการสถานะ การสร้างเส้นทาง การเชื่อมต่อกับบริการของบริษัทอื่น และแม้แต่การจัดการการรับรองความถูกต้อง

กองเทคโนโลยีและคุณสมบัติต่างๆ

• ดู
• vuex
• Vue เราเตอร์
• วิวคลิ
• ผู้ยื่น
• CSS

นี่เป็นโครงการที่ยอดเยี่ยมมากสำหรับการเริ่มต้นกับ Vue หรือพัฒนาทักษะที่มีอยู่เพื่อพัฒนาในปี 2020 คุณสามารถหา กวดวิชาที่นี่.

แอพพยากรณ์อากาศที่สวยงามด้วย Angular 8

ตัวอย่างนี้จะช่วยคุณสร้างแอปพยากรณ์อากาศที่สวยงามโดยใช้ Angular 8:

คุณจะได้เรียนรู้อะไร
โปรเจ็กต์นี้จะสอนทักษะอันมีค่าในการสร้างแอปพลิเคชันตั้งแต่เริ่มต้น - ตั้งแต่การออกแบบจนถึงการพัฒนา ไปจนถึงแอปพลิเคชันที่พร้อมปรับใช้

กองเทคโนโลยีและคุณสมบัติต่างๆ

• 8 เชิงมุม
• Firebase
• การแสดงผลฝั่งเซิร์ฟเวอร์
• CSS พร้อม Grid และ Flexbox
• เป็นมิตรกับมือถือและการปรับตัว
• โหมดมืด
• อินเทอร์เฟซที่สวยงาม

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

แอปพลิเคชันสิ่งที่ต้องทำโดยใช้ Svelte

Svelte เปรียบเสมือนเด็กใหม่ที่ใช้แนวทางแบบอิงคอมโพเนนต์ - อย่างน้อยก็คล้ายกับ React, Vue และ Angular และนี่คือหนึ่งในผลิตภัณฑ์ใหม่ที่มาแรงที่สุดในปี 2020

แอป To-Do ไม่จำเป็นต้องเป็นหัวข้อที่ร้อนแรงที่สุด แต่จะช่วยให้คุณฝึกฝนทักษะ Svelte ได้อย่างแท้จริง มันจะมีลักษณะเช่นนี้:

คุณจะได้เรียนรู้อะไร
บทช่วยสอนนี้จะแสดงวิธีสร้างแอปพลิเคชันโดยใช้ Svelte 3 ตั้งแต่ต้นจนจบ คุณจะใช้ส่วนประกอบ สไตล์ และตัวจัดการเหตุการณ์

กองเทคโนโลยีและคุณสมบัติต่างๆ

• สเวลต์ 3
• ส่วนประกอบ
• จัดแต่งทรงผมด้วย CSS
• ไวยากรณ์ ES 6

มีโครงการเริ่มต้น Svelte ดีๆ อยู่ไม่มากนัก ดังนั้นฉันจึงพบว่า นี่เป็นตัวเลือกที่ดีในการเริ่มต้น.

แอปอีคอมเมิร์ซโดยใช้ Next.js

Next.js เป็นเฟรมเวิร์กที่ได้รับความนิยมมากที่สุดสำหรับการสร้างแอปพลิเคชัน React ที่รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ทันที

โปรเจ็กต์นี้จะแสดงวิธีสร้างแอปพลิเคชันอีคอมเมิร์ซที่มีลักษณะดังนี้:

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

กองเทคโนโลยีและคุณสมบัติต่างๆ

• เน็กซ์.เจส
• ส่วนประกอบและหน้า
• การสุ่มตัวอย่างข้อมูล
• stylization
• การปรับใช้โครงการ
• SSR และสปา

เป็นเรื่องดีเสมอที่มีตัวอย่างจากโลกแห่งความเป็นจริง เช่น แอปอีคอมเมิร์ซเพื่อเรียนรู้สิ่งใหม่ๆ คุณสามารถ ค้นหาบทช่วยสอนที่นี่.

บล็อกหลายภาษาเต็มรูปแบบพร้อม Nuxt.js

Nuxt.js มีไว้สำหรับ Vue และ Next.js มีไว้สำหรับ React: เฟรมเวิร์กที่ยอดเยี่ยมสำหรับการรวมพลังของการเรนเดอร์ฝั่งเซิร์ฟเวอร์และแอปพลิเคชันหน้าเดียว
แอปพลิเคชันสุดท้ายที่คุณสามารถสร้างได้จะมีลักษณะดังนี้:

คุณจะได้เรียนรู้อะไร

ในโปรเจ็กต์ตัวอย่างนี้ คุณจะได้เรียนรู้วิธีสร้างเว็บไซต์ที่สมบูรณ์โดยใช้ Nuxt.js ตั้งแต่การตั้งค่าเริ่มต้นไปจนถึงการใช้งานขั้นสุดท้าย

ใช้ประโยชน์จากฟีเจอร์เจ๋งๆ มากมายที่ Nuxt นำเสนอ เช่น เพจและส่วนประกอบ และการจัดสไตล์ด้วย SCSS

กองเทคโนโลยีและคุณสมบัติต่างๆ

• Nuxt.js
• ส่วนประกอบและหน้า
• โมดูลสตอรี่บล็อก
• ปลาแฮกฟิช
• Vuex สำหรับการจัดการของรัฐ
• SCSS สำหรับการจัดแต่งทรงผม
• มิดเดิลแวร์ Nuxt

นี่เป็นโครงการที่ยอดเยี่ยมจริงๆซึ่งมีคุณสมบัติที่ยอดเยี่ยมของ Nuxt.js มากมาย โดยส่วนตัวแล้วฉันชอบทำงานกับ Nuxt ดังนั้นคุณควรลองดูเพราะมันจะทำให้คุณเป็นนักพัฒนา Vue ที่ยอดเยี่ยมด้วย

บล็อกกับแกสบี้

Gatsby เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่ที่ยอดเยี่ยมโดยใช้ React และ GraphQL นี่คือผลลัพธ์ของโครงการ:

คุณจะได้เรียนรู้อะไร

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีใช้ Gatsby เพื่อสร้างบล็อกที่คุณจะใช้ในการเขียนบทความของคุณเองโดยใช้ React และ GraphQL

กองเทคโนโลยีและคุณสมบัติต่างๆ

• Gatsby
• เกิดปฏิกิริยา
• GraphQL
• ปลั๊กอินและธีม
• MDX/มาร์กดาวน์
• CSS บูตสแตรป
• แม่แบบ

หากคุณเคยต้องการที่จะเริ่มต้นบล็อก นี่เป็นตัวอย่างที่ดี เกี่ยวกับวิธีการสร้างมันด้วย React และ GraphQL

ฉันไม่ได้บอกว่า WordPress เป็นตัวเลือกที่ไม่ดี แต่ด้วย Gatsby คุณสามารถสร้างเว็บไซต์ประสิทธิภาพสูงโดยใช้ React ซึ่งเป็นการผสมผสานที่น่าทึ่ง

บล็อกกับ Gridsome

Gridsome สำหรับ Vue... เอาล่ะ เรามีสิ่งนี้กับ Next/Nuxt แล้ว
แต่ Gridsome และ Gatsby ก็เช่นเดียวกัน ทั้งคู่ใช้ GraphQL เป็นชั้นข้อมูล แต่ Gridsome ใช้ VueJS นี่เป็นเครื่องมือสร้างไซต์คงที่ที่น่าทึ่งซึ่งจะช่วยคุณสร้างบล็อกที่ยอดเยี่ยม:

คุณจะได้เรียนรู้อะไร

โปรเจ็กต์นี้จะสอนวิธีสร้างบล็อกง่ายๆ เพื่อเริ่มต้นใช้งาน Gridsome, GraphQL และ Markdown นอกจากนี้ยังครอบคลุมถึงวิธีการปรับใช้แอปพลิเคชันผ่าน Netlify

กองเทคโนโลยีและคุณสมบัติต่างๆ

• น่าสยดสยอง
• ดู
• GraphQL
• Markdown
• netlify

นี่ไม่ใช่บทช่วยสอนที่ครอบคลุมที่สุดอย่างแน่นอน แต่ครอบคลุมแนวคิดพื้นฐานของ Gridsome และ Markdown อาจเป็นจุดเริ่มต้นที่ดี.

เครื่องเล่นเสียงเหมือน SoundCloud โดยใช้ Quasar

Quasar เป็นอีกหนึ่งเฟรมเวิร์ก Vue ที่สามารถใช้ในการสร้างแอปพลิเคชันบนมือถือ ในโปรเจ็กต์นี้ คุณจะสร้างแอปพลิเคชันเครื่องเล่นเสียง เช่น:

คุณจะได้เรียนรู้อะไร

ในขณะที่โปรเจ็กต์อื่นๆ มุ่งเน้นไปที่เว็บแอปพลิเคชันเป็นหลัก แต่โปรเจ็กต์นี้จะแสดงวิธีสร้างแอปพลิเคชันมือถือโดยใช้ Vue และเฟรมเวิร์ก Quasar
คุณควรให้ Cordova ทำงานโดยกำหนดค่า Android Studio/Xcode ไว้แล้ว ถ้าไม่เช่นนั้น คู่มือจะมีลิงก์ไปยังเว็บไซต์ Quasar ซึ่งจะแสดงวิธีการตั้งค่าทุกอย่างให้คุณ

กองเทคโนโลยีและคุณสมบัติต่างๆ

• ดวงดาวที่ห่างจากโลกสีร้อยสิบพันปีแสง
• ดู
• คอร์โดวา
• เวฟเซิร์ฟเฟอร์
• ส่วนประกอบ UI

โครงการขนาดเล็กแสดงให้เห็นถึงความสามารถของ Quasar ในการสร้างแอปพลิเคชั่นบนมือถือ

ที่มา: will.com