Танилцуулга
Та програмчлалд шинээр орсон эсвэл туршлагатай хөгжүүлэгч эсэхээс үл хамааран шинэ ойлголт, хэл/хүрээ сурах нь чиг хандлагыг дагаж мөрдөхийн тулд энэ салбарт зайлшгүй шаардлагатай.
Дөрөвхөн жилийн өмнө Facebook-ийн нээлттэй эх сурвалжтай байсан React-ийг жишээ болгон авч үзье, аль хэдийн дэлхий даяар JavaScript хөгжүүлэгчдийн нэг номерын сонголт болсон.
Vue болон Angular нь мэдээжийн хэрэг өөрсдийн хууль ёсны шүтэн бишрэгчидтэй. Дараа нь Svelte болон Next.js эсвэл Nuxt.js зэрэг бусад бүх нийтийн хүрээнүүд байдаг. Гэтсби, Гридсом, Куазар... гэх мэт.
Хэрэв та өөрийгөө туршлагатай JavaScript хөгжүүлэгч гэдгээ батлахыг хүсч байвал хуучин сайн JS-тэй ажиллахаас гадна янз бүрийн хүрээ, номын сантай ажиллах туршлагатай байх ёстой.
Таныг 2020 онд шилдэг мастер болоход тань туслахын тулд би есөн өөр төслийг нэгтгэсэн бөгөөд тус бүр нь өөр өөр JavaScript-н хүрээ, номын санд анхаарлаа төвлөрүүлж, та өөрийн багцад нэмж оруулах боломжтой технологийн стек болгон ашигладаг. Юмыг бүтээхээс өөр юу ч тус болохгүй гэдгийг санаарай, тиймээс урагш алх, оюун ухаанаа ашигла, түүнийгээ бүтээ
Нийтлэлийг EDISON програм хангамжийн дэмжлэгтэйгээр орчуулсан Тэгээд .
React ашиглан кино хайх програм (дэгээтэй)
Таны хийж болох хамгийн эхний зүйл бол React ашиглан кино хайх програм үүсгэх явдал юм. Эцсийн програм ямар харагдахыг доор харуулав.
Та юу сурах вэ
Энэхүү програмыг бүтээснээр та харьцангуй шинэ Hooks API ашиглан React ур чадвараа сайжруулах болно. Жишээ төсөл нь React бүрэлдэхүүн хэсгүүд, олон тооны дэгээ, гадаад API, мөн мэдээж зарим CSS загваруудыг ашигладаг.
Техникийн стек ба онцлогууд
- Дэгээгээр хариу үйлдэл үзүүлэх
- үүсгэх-хариу үйлдэл хийх апп
- JSX
- CSS
Ямар ч хичээл ашиглахгүйгээр эдгээр төслүүд нь функциональ React руу орох төгс цэгийг өгөх бөгөөд 2020 онд танд туслах болно. чи олж чадна . Зааврыг дагаж эсвэл өөрөө хий.
Vue-тэй чатлах програм
Таны хийх бас нэг гайхалтай төсөл бол миний дуртай JavaScript номын сан болох VueJS ашиглан чат програм үүсгэх явдал юм. Програм нь иймэрхүү харагдах болно:
Та юу сурах вэ
Энэ зааварт та Vue програмыг эхнээс нь хэрхэн бүтээх талаар сурах болно - бүрэлдэхүүн хэсгүүдийг үүсгэх, төлөвийг зохицуулах, маршрут үүсгэх, гуравдагч талын үйлчилгээнд холбогдох, тэр ч байтугай баталгаажуулалтыг зохицуулах.
Техникийн стек ба онцлогууд
- Vue
- vuex
- Vue чиглүүлэгч
- Vue CLI
- Тээрэмчин
- CSS
Энэ бол Vue-г эхлүүлэх, эсвэл 2020 онд хөгжүүлэх чадвараа сайжруулах үнэхээр гайхалтай төсөл юм. чи олж чадна .
Angular 8-тай цаг агаарын сайхан програм
Энэ жишээ танд Angular 8 ашиглан цаг агаарын сайхан програм бүтээхэд тусална.
Та юу сурах вэ
Энэхүү төсөл нь дизайнаас эхлээд хөгжүүлэлт, ашиглахад бэлэн программ хүртэл эхнээс нь програм бүтээх үнэ цэнэтэй ур чадварыг танд заах болно.
Техникийн стек ба онцлогууд
- Булангийн 8
- Функц
- Сервер талын дүрслэл
- Grid болон Flexbox бүхий CSS
- Гар утсанд ээлтэй, дасан зохицох чадвартай
- Харанхуй горим
- Сайхан интерфэйс
Энэ бүх зүйлийг хамарсан төслийн миний үнэхээр дуртай зүйл бол та аливаа зүйлийг тусад нь судалдаггүй явдал юм. Үүний оронд та дизайн хийхээс эхлээд эцсийн байршуулалт хүртэлх бүх хөгжлийн үйл явцыг сурдаг.
Svelte ашиглан хийх ажлын програм
Svelte нь бүрэлдэхүүн хэсэг дээр суурилсан шинэ хүүхэдтэй адил юм - наад зах нь React, Vue болон Angular-тай төстэй. Энэ бол 2020 оны хамгийн халуун шинэ бүтээгдэхүүнүүдийн нэг юм.
Хийх программууд нь хамгийн халуун сэдэв биш ч гэсэн тэд танд Svelte ур чадвараа сайжруулахад үнэхээр тусална. Энэ нь дараах байдлаар харагдах болно.
Та юу сурах вэ
Энэхүү заавар нь танд Svelte 3 ашиглан програмыг эхнээс нь дуустал хэрхэн үүсгэхийг харуулах болно. Та бүрэлдэхүүн хэсэг, загварчлал, үйл явдал зохицуулагчийг ашиглах болно
Техникийн стек ба онцлогууд
- Сайхан 3
- Бүрэлдэхүүн хэсгүүд
- CSS ашиглан загварчлах
- ES 6 синтакс
Олон сайн Svelte гарааны төслүүд байдаггүй тул би олсон .
Next.js ашиглан цахим худалдааны програм
Next.js нь сервер талын рэндэрийг дэмждэг React програмуудыг бүтээх хамгийн алдартай хүрээ юм.
Энэхүү төсөл нь дараах байдлаар харагдах цахим худалдааны програмыг хэрхэн бүтээхийг харуулах болно.
Та юу сурах вэ
Энэ төсөлд та Next.js-ийг хэрхэн хөгжүүлж сурах болно—шинэ хуудас, бүрэлдэхүүн хэсгүүдийг үүсгэх, өгөгдөл задлах, загварчлах, Next програмыг байрлуулах.
Техникийн стек ба онцлогууд
- Дараа нь.js
- Бүрэлдэхүүн хэсгүүд ба хуудаснууд
- Өгөгдлийн түүвэрлэлт
- Загварчлах
- Төслийн байршуулалт
- SSR ба SPA
Шинэ зүйл сурахын тулд цахим худалдааны програм шиг бодит жишээтэй байх нь үргэлж сайхан байдаг. Чи чадна .
Nuxt.js-тэй бүрэн хэмжээний олон хэлтэй блог
Nuxt.js нь Vue-д зориулагдсан, Next.js нь React-д зориулагдсан: сервер талын рэндэр болон нэг хуудасны хэрэглээний хүчийг хослуулах гайхалтай хүрээ.
Таны үүсгэж болох эцсийн програм дараах байдлаар харагдах болно.
Та юу сурах вэ
Энэхүү жишээ төсөлд та Nuxt.js-ийг ашиглан анхны тохиргооноос эхлээд эцсийн байршуулалт хүртэл бүрэн хэмжээний вэб сайтыг хэрхэн бүтээх талаар суралцах болно.
Энэ нь Nuxt-ийн санал болгож буй хуудас, бүрэлдэхүүн хэсэг, SCSS-ээр загварчлах зэрэг олон гайхалтай боломжуудыг ашигладаг.
Техникийн стек ба онцлогууд
- Nuxt.js
- Бүрэлдэхүүн хэсгүүд ба хуудаснууд
- Storyblock модуль
- Хаг загас
- Төрийн удирдлагад зориулсан Vuex
- Загварын хувьд SCSS
- Nuxt дундын програмууд
, үүнд Nuxt.js-ийн олон гайхалтай функцууд багтсан. Би хувьдаа Nuxt-тай ажиллах дуртай тул та үүнийг туршаад үзээрэй, учир нь энэ нь таныг гайхалтай Vue хөгжүүлэгч болгоно.
Гэтсбитэй блог хөтлөх
Gatsby бол React болон GraphQL ашигладаг маш сайн статик сайт үүсгэгч юм. Энэ бол төслийн үр дүн юм:
Та юу сурах вэ
Энэ зааварт та React болон GraphQL ашиглан өөрийн нийтлэлээ бичихдээ ашиглах блог үүсгэхийн тулд Gatsby-г хэрхэн ашиглах талаар сурах болно.
Техникийн стек ба онцлогууд
- Гэтсби
- урвалд
- GraphQL
- Plugins болон сэдэв
- MDX/Markdown
- Bootstrap CSS
- Хээ
Хэрэв та хэзээ нэгэн цагт блог нээхийг хүсч байсан бол React болон GraphQL ашиглан хэрхэн хийх талаар.
Би WordPress-ийг муу сонголт гэж хэлэхгүй байна, гэхдээ Гэтсбигийн тусламжтайгаар та React ашиглан өндөр гүйцэтгэлтэй вэбсайтуудыг бүтээж чадна - энэ нь гайхалтай хослол юм.
Gridsome-тэй блог хөтлөх
Gridsome for Vue... За, бид үүнийг Next/Nuxt-тэй аль хэдийн хийсэн.
Гэхдээ Gridsome, Gatsby нарын хувьд ч мөн адил. Аль аль нь GraphQL-г өгөгдлийн давхарга болгон ашигладаг бол Gridsome нь VueJS ашигладаг. Энэ нь танд гайхалтай блог үүсгэхэд туслах гайхалтай статик сайт үүсгэгч юм:
Та юу сурах вэ
Энэхүү төсөл нь Gridsome, GraphQL, Markdown програмуудыг ашиглаж эхлэхийн тулд хэрхэн энгийн блог үүсгэхийг заах болно. Энэ нь мөн Netlify-ээр дамжуулан програмыг хэрхэн байрлуулах талаар өгүүлдэг.
Техникийн стек ба онцлогууд
- Сүрлэг
- Vue
- GraphQL
- Markdown
- Цэвэршүүлэх
Энэ нь мэдээжийн хэрэг хамгийн дэлгэрэнгүй заавар биш боловч Gridsome болон програмын үндсэн ойлголтуудыг багтаасан болно. .
Quasar ашиглан SoundCloud шиг аудио тоглуулагч
Quasar бол гар утасны програм үүсгэхэд ашиглаж болох өөр нэг Vue хүрээ юм. Энэ төсөлд та аудио тоглуулагч програм үүсгэх болно, жишээлбэл:
Та юу сурах вэ
Бусад төслүүд голчлон вэб програмууд дээр төвлөрдөг бол энэ нь танд Vue болон Quasar framework ашиглан гар утасны программыг хэрхэн бүтээхийг харуулах болно.
Та Cordova-г аль хэдийн Android Studio/Xcode-той тохируулсан байх ёстой. Хэрэв тийм биш бол гарын авлагад бүх зүйлийг хэрхэн тохируулахыг харуулсан Quasar вэб сайтын холбоос байдаг.
Техникийн стек ба онцлогууд
- Квазар
- Vue
- Кордова
- WaveSurfer
- UI бүрэлдэхүүн хэсгүүд
, гар утасны програм үүсгэх Quasar-ийн чадварыг харуулсан.
Эх сурвалж: www.habr.com