9 ໂຄງການເພີ່ມເຕີມເພື່ອຍົກລະດັບທັກສະ Front-End ຂອງທ່ານ

ການນໍາສະເຫນີ

ບໍ່ວ່າທ່ານຈະເປັນຄົນໃໝ່ໃນການຂຽນໂປລແກລມ ຫຼືນັກພັດທະນາທີ່ມີລະດູການ, ການຮຽນຮູ້ແນວຄວາມຄິດ ແລະພາສາ/ກອບວຽກໃໝ່ໆແມ່ນເປັນສິ່ງຈຳເປັນໃນອຸດສາຫະກຳນີ້ເພື່ອຮັກສາແນວໂນ້ມ.

ຕົວຢ່າງເຊັ່ນ, ເອົາ React, ເຊິ່ງເຟສບຸກເປີດພຽງແຕ່ສີ່ປີກ່ອນຫນ້ານີ້ແລະໄດ້ກາຍເປັນທາງເລືອກອັນດັບຫນຶ່ງສໍາລັບນັກພັດທະນາ JavaScript ທົ່ວໂລກ.

Vue ແລະ Angular, ແນ່ນອນ, ຍັງມີຖານພັດລົມທີ່ຖືກຕ້ອງຕາມກົດໝາຍຂອງຕົນເອງ. ແລະຫຼັງຈາກນັ້ນມີ Svelte ແລະກອບທົ່ວໄປອື່ນໆເຊັ່ນ Next.js ຫຼື Nuxt.js. ແລະ Gatsby, ແລະ Gridsome, ແລະ Quasar ... ແລະອື່ນໆອີກ.

ຖ້າທ່ານຕ້ອງການພິສູດຕົວເອງວ່າເປັນນັກພັດທະນາ JavaScript ທີ່ມີປະສົບການ, ທ່ານຄວນມີປະສົບການຢ່າງຫນ້ອຍກັບກອບແລະຫ້ອງສະຫມຸດຕ່າງໆ - ນອກເຫນືອຈາກການເຮັດວຽກກັບ JS ເກົ່າທີ່ດີ.

ເພື່ອຊ່ວຍໃຫ້ເຈົ້າກາຍເປັນນາຍຫນ້າໃນປີ 2020, ຂ້າພະເຈົ້າໄດ້ລວມເອົາ XNUMX ໂຄງການທີ່ແຕກຕ່າງກັນ, ແຕ່ລະຄົນສຸມໃສ່ກອບ JavaScript ແລະຫ້ອງສະຫມຸດທີ່ແຕກຕ່າງກັນເປັນ stack ເຕັກໂນໂລຢີທີ່ທ່ານສາມາດສ້າງແລະເພີ່ມເຂົ້າໃນຫຼັກຊັບຂອງທ່ານ. ຈົ່ງຈື່ໄວ້ວ່າບໍ່ມີຫຍັງຊ່ວຍເຈົ້າໄດ້ຫຼາຍກວ່າການສ້າງສິ່ງທີ່ເປັນຈິງ, ດັ່ງນັ້ນຈົ່ງກ້າວໄປຂ້າງຫນ້າ, ໃຊ້ຄວາມຄິດຂອງເຈົ້າແລະເຮັດໃຫ້ມັນເກີດຂຶ້ນ

ບົດຄວາມໄດ້ຖືກແປດ້ວຍການສະຫນັບສະຫນູນຂອງຊອບແວ EDISON, ເຊິ່ງ ເຮັດໃຫ້ຫ້ອງ fitting virtual ສໍາລັບຮ້ານຄ້າຫຼາຍຍີ່ຫໍ້ແລະ ຊອບ​ແວ​ການ​ທົດ​ສອບ​.

ແອັບຊອກຫາຮູບເງົາໂດຍໃຊ້ React (ມີ hooks)

ສິ່ງທໍາອິດທີ່ທ່ານສາມາດເລີ່ມຕົ້ນດ້ວຍແມ່ນການສ້າງແອັບຯຄົ້ນຫາຮູບເງົາໂດຍໃຊ້ React. ຂ້າງລຸ່ມນີ້ແມ່ນຮູບພາບຂອງສິ່ງທີ່ຄໍາຮ້ອງສະຫມັກສຸດທ້າຍຈະຄື:

ເຈົ້າຈະຮຽນຫຍັງ
ໂດຍການສ້າງແອັບຯນີ້, ທ່ານຈະປັບປຸງທັກສະ React ຂອງທ່ານໂດຍໃຊ້ Hooks API ທີ່ຂ້ອນຂ້າງໃຫມ່. ໂຄງການຕົວຢ່າງໃຊ້ອົງປະກອບ React, hooks ຫຼາຍ, API ພາຍນອກ, ແລະແນ່ນອນບາງຄໍເຕົ້າໄຂ່ທີ່ CSS.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ປະຕິກິລິຍາດ້ວຍ hooks
• ສ້າງ, react-app
• JSX
• CSS

ໂດຍບໍ່ຕ້ອງໃຊ້ຫ້ອງຮຽນໃດໆ, ໂຄງການເຫຼົ່ານີ້ຈະໃຫ້ທ່ານເປັນຈຸດເຂົ້າສູ່ React ທີ່ສົມບູນແບບ ແລະຈະຊ່ວຍເຈົ້າໄດ້ໃນປີ 2020. ທ່ານສາມາດຊອກຫາ ໂຄງການຕົວຢ່າງທີ່ນີ້. ປະຕິບັດຕາມຄໍາແນະນໍາຫຼືເຮັດໃຫ້ມັນເປັນຂອງຕົນເອງ.

ແອັບສົນທະນາກັບ Vue

ໂຄງການທີ່ດີອີກອັນໜຶ່ງທີ່ເຈົ້າຕ້ອງເຮັດຄືການສ້າງແອັບສົນທະນາໂດຍໃຊ້ຫ້ອງສະໝຸດ JavaScript ທີ່ຂ້ອຍມັກ: VueJS. ຄໍາຮ້ອງສະຫມັກຈະມີລັກສະນະຄ້າຍຄືນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
ໃນບົດສອນນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການສ້າງແອັບຯ Vue ຕັ້ງແຕ່ເລີ່ມຕົ້ນ - ການສ້າງອົງປະກອບ, ການຈັດການສະຖານະ, ການສ້າງເສັ້ນທາງ, ການເຊື່ອມຕໍ່ກັບບໍລິການພາກສ່ວນທີສາມ, ແລະແມ້ກະທັ້ງການຈັດການການພິສູດຢືນຢັນ.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• Vue
• vuex
• ວອດເຕີ
• Vue CLI
• ຄົນຂັບລົດ
• CSS

ນີ້​ແມ່ນ​ໂຄງ​ການ​ທີ່​ດີ​ຫຼາຍ​ທີ່​ຈະ​ເລີ່ມ​ຕົ້ນ​ກັບ Vue ຫຼື​ປັບ​ປຸງ​ຄວາມ​ສາ​ມາດ​ທີ່​ມີ​ຢູ່​ແລ້ວ​ຂອງ​ທ່ານ​ເພື່ອ​ເຂົ້າ​ໄປ​ໃນ​ການ​ພັດ​ທະ​ນາ​ໃນ​ປີ 2020. ທ່ານສາມາດຊອກຫາ tutorial ທີ່ນີ້.

ແອັບສະພາບອາກາດທີ່ສວຍງາມກັບ Angular 8

ຕົວຢ່າງນີ້ຈະຊ່ວຍໃຫ້ທ່ານສ້າງແອັບຯສະພາບອາກາດທີ່ສວຍງາມໂດຍໃຊ້ Angular 8:

ເຈົ້າຈະຮຽນຫຍັງ
ໂຄງ​ການ​ນີ້​ຈະ​ສອນ​ໃຫ້​ທ່ານ​ມີ​ຄວາມ​ສາ​ມາດ​ທີ່​ມີ​ຄຸນ​ຄ່າ​ໃນ​ການ​ກໍ່​ສ້າງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ຈາກ​ການ​ເລີ່ມ​ຕົ້ນ - ຈາກ​ການ​ອອກ​ແບບ​ໂດຍ​ຜ່ານ​ການ​ພັດ​ທະ​ນາ​, ທຸກ​ວິ​ທີ​ການ​ເພື່ອ​ເປັນ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ທີ່​ມີ​ການ​ປັບ​ໃຊ້​.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ມຸມ 8
• Firebase
• ການສະແດງຜົນຂ້າງເຊີບເວີ
• CSS ກັບ Grid ແລະ Flexbox
• ມືຖືທີ່ເປັນມິດ ແລະສາມາດປັບຕົວໄດ້
• ຮູບແບບມືດ
• ການໂຕ້ຕອບທີ່ສວຍງາມ

ສິ່ງທີ່ຂ້ອຍຮັກແທ້ໆກ່ຽວກັບໂຄງການທີ່ສົມບູນແບບນີ້ແມ່ນວ່າທ່ານບໍ່ໄດ້ສຶກສາສິ່ງທີ່ຢູ່ໂດດດ່ຽວ. ແທນທີ່ຈະ, ທ່ານໄດ້ຮຽນຮູ້ຂະບວນການພັດທະນາທັງຫມົດ, ຈາກການອອກແບບຈົນເຖິງການນໍາໃຊ້ສຸດທ້າຍ.

ຄໍາຮ້ອງສະຫມັກທີ່ຕ້ອງເຮັດໂດຍໃຊ້ Svelte

Svelte ແມ່ນຄ້າຍຄືເດັກນ້ອຍໃຫມ່ໃນວິທີການທີ່ອີງໃສ່ອົງປະກອບ - ຢ່າງຫນ້ອຍຄ້າຍຄືກັນກັບ React, Vue ແລະ Angular. ແລະນີ້ແມ່ນຫນຶ່ງໃນຜະລິດຕະພັນໃຫມ່ທີ່ຮ້ອນທີ່ສຸດສໍາລັບປີ 2020.

ແອັບ To-Do ບໍ່ຈໍາເປັນຕ້ອງເປັນຫົວຂໍ້ທີ່ຮ້ອນແຮງທີ່ສຸດ, ແຕ່ມັນຈະຊ່ວຍໃຫ້ທ່ານສ້າງທັກສະ Svelte ຂອງທ່ານຢ່າງແທ້ຈິງ. ມັນຈະມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
tutorial ນີ້​ຈະ​ສະ​ແດງ​ໃຫ້​ທ່ານ​ວິ​ທີ​ການ​ສ້າງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ໂດຍ​ການ​ນໍາ​ໃຊ້ Svelte 3​, ຈາກ​ເລີ່ມ​ຕົ້ນ​ຈົນ​ສໍາ​ເລັດ​ຮູບ​. ເຈົ້າຈະໃຊ້ອົງປະກອບ, ຮູບແບບສີສັນ ແລະຕົວຈັດການເຫດການ

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ສະເວດ 3
• Components
• ການຈັດຮູບແບບດ້ວຍ CSS
• ES 6 syntax

ບໍ່ມີໂຄງການເລີ່ມຕົ້ນ Svelte ທີ່ດີຫຼາຍ, ສະນັ້ນຂ້າພະເຈົ້າພົບເຫັນ ນີ້ແມ່ນທາງເລືອກທີ່ດີທີ່ຈະເລີ່ມຕົ້ນດ້ວຍ.

ແອັບຯອີຄອມເມີຊໂດຍໃຊ້ Next.js

Next.js ແມ່ນກອບທີ່ນິຍົມທີ່ສຸດສໍາລັບການກໍ່ສ້າງຄໍາຮ້ອງສະຫມັກ React ທີ່ສະຫນັບສະຫນູນການສະແດງຜົນຂ້າງເຊີບເວີອອກຈາກກ່ອງ.

ໂຄງການນີ້ຈະສະແດງໃຫ້ທ່ານເຫັນວິທີການສ້າງຄໍາຮ້ອງສະຫມັກ e-commerce ທີ່ມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
ໃນໂຄງການນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການພັດທະນາດ້ວຍ Next.js—ສ້າງໜ້າ ແລະອົງປະກອບໃໝ່, ແຍກຂໍ້ມູນ, ແລະຮູບແບບ ແລະນຳໃຊ້ແອັບພລິເຄຊັນ Next.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ຕໍ່ໄປ
• ອົງປະກອບແລະຫນ້າ
• ການເກັບຕົວຢ່າງຂໍ້ມູນ
• ການເປັນ ໝັນ
• ການນຳໃຊ້ໂຄງການ
• SSR ແລະ SPA

ມັນເປັນການດີສະເຫມີທີ່ຈະມີຕົວຢ່າງທີ່ແທ້ຈິງເຊັ່ນ app e-commerce ເພື່ອຮຽນຮູ້ສິ່ງໃຫມ່. ເຈົ້າ​ສາ​ມາດ ຊອກຫາ tutorial ທີ່ນີ້.

ບລັອກຫຼາຍພາສາເຕັມຮູບແບບດ້ວຍ Nuxt.js

Nuxt.js ແມ່ນສໍາລັບ Vue, ສິ່ງທີ່ Next.js ແມ່ນສໍາລັບ React: ກອບທີ່ດີສໍາລັບການລວມເອົາອໍານາດຂອງການສະແດງຜົນຂ້າງເຊີບເວີແລະຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ.
ຄໍາຮ້ອງສະຫມັກສຸດທ້າຍທີ່ທ່ານສາມາດສ້າງຈະມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນໂຄງການຕົວຢ່າງນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການສ້າງເວັບໄຊທ໌ທີ່ສົມບູນໂດຍໃຊ້ Nuxt.js, ຈາກການຕິດຕັ້ງເບື້ອງຕົ້ນຈົນເຖິງການນໍາໃຊ້ສຸດທ້າຍ.

ມັນໃຊ້ປະໂຍດຈາກຫຼາຍລັກສະນະເຢັນທີ່ Nuxt ມີໃຫ້, ເຊັ່ນ: ຫນ້າແລະອົງປະກອບ, ແລະຄໍເຕົ້າໄຂ່ທີ່ SCSS.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• Nuxt.js
• ອົງປະກອບແລະຫນ້າ
• ໂມດູນ Storyblock
• ປາແດກ
• Vuex ສໍາລັບການຄຸ້ມຄອງລັດ
• SCSS ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່
• Nuxt middlewares

ນີ້ແມ່ນໂຄງການທີ່ເຢັນແທ້ໆ, ເຊິ່ງລວມມີຄຸນສົມບັດ Nuxt.js ທີ່ຍິ່ງໃຫຍ່ຫຼາຍອັນ. ສ່ວນຕົວຂ້ອຍມັກເຮັດວຽກກັບ Nuxt ສະນັ້ນເຈົ້າຄວນລອງມັນເບິ່ງ ເພາະມັນຈະເຮັດໃຫ້ເຈົ້າເປັນນັກພັດທະນາ Vue ທີ່ດີເລີດ.

ບລັອກກັບ Gatsby

Gatsby ເປັນເຄື່ອງສ້າງເວັບໄຊສະຖິດທີ່ດີເລີດໂດຍໃຊ້ React ແລະ GraphQL. ນີ້ແມ່ນຜົນໄດ້ຮັບຂອງໂຄງການ:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນບົດສອນນີ້, ທ່ານຈະຮຽນຮູ້ວິທີການໃຊ້ Gatsby ເພື່ອສ້າງ blog ທີ່ທ່ານຈະໃຊ້ເພື່ອຂຽນບົດຄວາມຂອງທ່ານເອງໂດຍໃຊ້ React ແລະ GraphQL.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ແກສບີ
• React
• ກຣາຟQL
• ປລັກອິນ ແລະຮູບແບບສີສັນ
• MDX/Markdown
• Bootstrap CSS
• ຮູບແບບ

ຖ້າທ່ານເຄີຍຕ້ອງການເລີ່ມຕົ້ນ blog, ນີ້ແມ່ນຕົວຢ່າງທີ່ຍິ່ງໃຫຍ່ ກ່ຽວກັບວິທີການເຮັດໃຫ້ມັນໂດຍໃຊ້ React ແລະ GraphQL.

ຂ້າພະເຈົ້າບໍ່ໄດ້ເວົ້າວ່າ WordPress ເປັນທາງເລືອກທີ່ບໍ່ດີ, ແຕ່ກັບ Gatsby ທ່ານສາມາດສ້າງເວັບໄຊທ໌ທີ່ມີປະສິດທິພາບສູງໂດຍໃຊ້ React - ເຊິ່ງເປັນການປະສົມປະສານທີ່ຫນ້າປະຫລາດໃຈ.

ບລັອກກັບ Gridsome

Gridsome ສໍາລັບ Vue... ຕົກລົງ, ພວກເຮົາມີອັນນີ້ກັບ Next/Nuxt ແລ້ວ.
ແຕ່ຄືກັນສໍາລັບ Gridsome ແລະ Gatsby. ທັງສອງໃຊ້ GraphQL ເປັນຊັ້ນຂໍ້ມູນຂອງພວກເຂົາ, ແຕ່ Gridsome ໃຊ້ VueJS. ນີ້ຍັງເປັນຕົວສ້າງເວັບໄຊທ໌ຄົງທີ່ທີ່ຫນ້າປະຫລາດໃຈທີ່ຈະຊ່ວຍໃຫ້ທ່ານສ້າງ blogs ທີ່ຍິ່ງໃຫຍ່:

ເຈົ້າຈະຮຽນຫຍັງ

ໂຄງການນີ້ຈະສອນທ່ານກ່ຽວກັບວິທີການສ້າງ blog ງ່າຍໆເພື່ອເລີ່ມຕົ້ນດ້ວຍ Gridsome, GraphQL ແລະ Markdown. ມັນຍັງກວມເອົາວິທີການຕິດຕັ້ງແອັບພລິເຄຊັນຜ່ານ Netlify.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ຕາໜ່າງ
• Vue
• ກຣາຟQL
• markdown
• Netlify

ນີ້ແມ່ນແນ່ນອນບໍ່ແມ່ນການສອນທີ່ສົມບູນແບບທີ່ສຸດ, ແຕ່ມັນກວມເອົາແນວຄວາມຄິດພື້ນຖານຂອງ Gridsome ແລະ Markdown ອາດຈະເປັນຈຸດເລີ່ມຕົ້ນທີ່ດີ.

ເຄື່ອງຫຼິ້ນສຽງຄ້າຍຄື SoundCloud ໂດຍໃຊ້ Quasar

Quasar ເປັນກອບ Vue ອື່ນທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອສ້າງຄໍາຮ້ອງສະຫມັກມືຖື. ໃນໂຄງການນີ້ທ່ານຈະສ້າງຄໍາຮ້ອງສະຫມັກຜູ້ນສຽງ, ສໍາລັບການຍົກຕົວຢ່າງ:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນຂະນະທີ່ໂຄງການອື່ນໆສຸມໃສ່ຄໍາຮ້ອງສະຫມັກເວັບໄຊຕ໌ເປັນສ່ວນໃຫຍ່, ອັນນີ້ຈະສະແດງໃຫ້ທ່ານເຫັນວິທີການສ້າງແອັບພລິເຄຊັນມືຖືໂດຍໃຊ້ Vue ແລະ Quasar framework.
ທ່ານຄວນມີ Cordova ແລ່ນກັບ Android Studio/Xcode ທີ່ຖືກຕັ້ງຄ່າແລ້ວ. ຖ້າບໍ່ແມ່ນ, ຄູ່ມືມີການເຊື່ອມຕໍ່ກັບເວັບໄຊທ໌ Quasar ທີ່ພວກເຂົາສະແດງໃຫ້ທ່ານເຫັນວິທີການຕັ້ງຄ່າທຸກຢ່າງ.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• quasar
• Vue
• Cordova
• WaveSurfer
• ອົງປະກອບ UI

ໂຄງການຂະຫນາດນ້ອຍ, ສະແດງໃຫ້ເຫັນຄວາມສາມາດຂອງ Quasar ສໍາລັບການສ້າງຄໍາຮ້ອງສະຫມັກມືຖື.

ແຫຼ່ງຂໍ້ມູນ: www.habr.com