5 reaguokite į jums reikalingus projektus savo portfelyje

Jūs įdėjote šį darbą ir dabar gerai suprantate „React“ biblioteką.

Be to, jūs gerai suprantate „JavaScript“ ir naudodamiesi naudingiausiomis funkcijomis galite naudoti savo „React“ kode.

Jūs padarėte didelę pažangą ... bet ką dabar darote?

Kaip panaikinti atotrūkį tarp „React“ pagrindų žinojimo ir tapimo profesionaliu kūrėju?

Daugelis kūrėjų susiduria su šia problema, kai pasiekia šį tarpinį „React“ ar bet kurios kitos „JavaScript“ bibliotekos mokymosi etapą. Jie žino didžiąją dalį pačios bibliotekos ir „JavaScript“, kad galėtų ją efektyviai naudoti, tačiau nežino kito žingsnio.

Kodėl turėtumėte kurti programas

Sužinoję „React“ pagrindus, turite patogiai kurti programas naudodami įgytus įgūdžius. Tokia praktika yra veiksmingo „React“ kūrėjo esmė - mokėti savarankiškai kurti programas ir tam naudoti tinkamus „React“ ekosistemos įrankius.

Bet kokias programas turėtumėte kurti naudodami „React“, kad padidintumėte savo, kaip kūrėjo, galimybes?

Šiame straipsnyje apžvelgsime 5 skirtingų tipų programas, kurias turėtumėte apsvarstyti kurdami po pagrindinės „todo“ programos. Didelis programų kūrimo pranašumas yra tas, kad jas įdiegus, jos gali būti susietos su jūsų portfeliu kaip galingas, greitas būdas parodyti darbdaviams savo kompetenciją.

Kiekvieno tipo programai pateiksiu populiarius pavyzdžius, kuriuos galite naudoti kaip įkvėpimą, įrankius, kuriuos rekomenduočiau sukurti kiekvienai funkcijai, taip pat trumpą tokios programos demonstraciją, kurią aš asmeniškai sukūriau naudodamasis „React“.

Kaip pradėti kurti programas naudojant „React“

Skirtingai nuo paties „React“ mokymosi, kur galite rasti dešimtis straipsnių, kad įsigilintumėte į bet kokią susijusią sąvoką, programos kūrimo procesas iš esmės yra savarankiškas užsiėmimas be daugybės nurodymų.

Jei pradedate kurti programas savarankiškai, rekomenduočiau ieškoti straipsnių, kurie išmokys programos kūrimo pagrindų ir pasinerti į jų pateiktą programos šaltinio kodą. Net pats kodo skaitymo procesas padarys jus geresniu kūrėju.

Jei šie pavyzdžiai atrodo per daug bauginantys norint susikurti save, prisiminkite tai, ką žinote kaip „React“ kūrėją - suskaidykite programas į sudedamąsias dalis. Kiekviena paraiška turi būti sukurta po gabalą, komponentas po komponento. Sutelkite dėmesį į vienos funkcijos kūrimą vienu metu. Praktikuodami geriau suprasite, kokių įrankių jums reikės kiekvienai funkcijai, taip pat apie bendrus programų kūrimo modelius.

Pastaba: Vienas klaidingas supratimas, kurį turėjau pradėdamas kurti tikras tokias programas kaip šis, buvo tas, kad turėjau sukurti visą vidinę programą / API su „Node“ arba „Python“, kad galėčiau gauti reikiamą funkciją. Jums nereikia to daryti. Išnagrinėkite tokias galingas serverio neturinčias technologijas kaip „Firebase“, „AWS Amplify“ ar „Hasura“, kurios suteikia jums visą „backend“ iš dėžutės, nereikia patys kurti ir diegti. Investuokite į įrankius, kurie padaro jus produktyvesnius ir taupo laiką.

Sukurkite socialinės žiniasklaidos programą

Jei turėčiau rekomenduoti tik vieną programą, kurią galėtumėte pridėti prie savo portfelio, tai būtų socialinės žiniasklaidos programa. „Twitter“, „Facebook“ ir „Instagram“ yra gana sudėtingi ir juose yra vis daugiau funkcijų, kad vartotojai būtų įsitraukę. Be to, tai yra tokia programa, kurią tikriausiai geriausiai žinote, kaip ji turėtų veikti.

Beveik visose socialinės žiniasklaidos programose yra daugybė funkcijų:

  • galimybė vartotojams kurti įrašus su teksto ir (arba) medijos failais,
  • tiesioginis tų pranešimų srautas,
  • leisti kitiems vartotojams patikti ir komentuoti įrašus,
  • taip pat vartotojo autentifikavimas.

Kai tai padarysite, galite pridėti kiekvieno savo vartotojo profilius, kur jie galės suasmeninti savo paskyrą ir tvarkyti stebimus vartotojus.

Programų pavyzdžiai: „ Instagram“, „Twitter“, „Snapchat“, „Reddit“

Panaudojamos technologijos:

  • Sukurkite „React App“ arba „Next.js“, kad sukurtumėte dinamišką įrašų, teigiamų įvertinimų ir pranešimų vartotojo sąsają
  • „Firebase“, „AWS Amplify“ arba „Hasura“ (naudojant „GraphQL“ su prenumeratomis) duomenims realiu laiku
  • Be serverio funkcijos, tokios kaip „AWS Lambda“ arba „Firebase“ funkcijos pranešimams
  • „Cloudinary“ arba „Firebase“ saugykla nuotraukoms ar vaizdo įrašams įkelti

Sukurkite el. Prekybos programą

Pasirinkite keletą mėgstamiausių svetainių ir garantuoju, kad bent vienoje iš jų yra įdėta elektroninės prekybos programa, net jei tai tik maža parduotuvės vitrina. E-komercijos programos yra visur paplitusios, ir aš lažinuosi, kad jums teks pakviesti ją sukurti tam tikru savo kūrėjo karjeros momentu.

Viliojama sukurti įspūdingą, didelio masto elektroninės prekybos platformą, tokią kaip „Amazon“, tačiau aš rekomenduočiau dirbti ties kažkuo mažesniu ir labiau sutelktu.

Vietoj turgavietės, kurioje visi dalykai pateikiami visiems žmonėms, eikite su jus dominančia pramone. Pavyzdžiui, jei jums patinka namų prekės, galite pasidomėti, ką „Crate & Barrel“ ar „Williams-Sonoma“ sukūrė savo svetainėms.

Be produktų, elektroninės prekybos programos gali teikti paslaugas vartotojams. Jei tai paslauga, teikiama vietoje, prie programos būtų galima pridėti interaktyvų žemėlapį, kad paslaugų teikėjas ir klientas žinotų vieni kitų buvimo vietą. Į galvą kyla maisto pristatymo programos, tokios kaip „UberEats“ ir „Doordash“, reikalaujančios maisto užsisakiusio asmens buvimo vietos.

Nepaisant to, kas parduodama, nesvarbu, ar tai fizinė, ar virtuali, kiekvieną el. Prekybos programą sudarys tam tikros parduotuvės fasadas su išsamia produkto ar paslaugos informacija. Jei vartotojai vienu metu gali įsigyti kelis produktus, jie turėtų turėti pirkinių krepšelį, kuriame vartotojai galėtų tvarkyti norimus pirkti produktus.

Galiausiai, kiekvienai elektroninės prekybos programai reikalingas atsiskaitymo procesas, kai vartotojai gali arba pirkti produktus anonimiškai, arba kai jie bus patvirtinti.

Populiarūs pavyzdžiai: „ Airbnb“, „Uber“, „UberEats“, „Doordash“, „Etsy“, „Udemy“

Panaudojamos technologijos:

  • Sukurkite „React App“ arba „Gatsby“ parduotuvės fasadui ir produktams rodyti
  • Juosta su paketo „reaguoti-juosta“ elementais, kad būtų galima apdoroti mokėjimą
  • Be serverio funkcija, pvz., „Netlify“ / „AWS Lambda“, skirta atsiskaitymo procesui tvarkyti
  • „Algolia“ - žaibiška produktų paieška
  • Snipcart, skirtas lengvai sukurti krepšelį ir tvarkyti krepšelio produktus

Sukurkite pramogų programą

Tai yra plačiausia iš visų kategorijų. Ką aš turiu omenyje pramogomis? Programa, orientuota į tam tikrą mediją. Tai gali būti filmai, prenumeruojamos transliacijos ar muzika.

Keli puikūs to pavyzdžiai būtų „Netflix“, „Audible“ ir „Soundcloud“ arba „Spotify“. Jei į šią kategoriją įtrauksite meną ar dizainą, į sąrašą galėtume įtraukti tokias svetaines kaip „Behance“ ar „Dribbble“.

Ši kategorija įdomi tuo, kad daugelis pramogų programų ribojasi su socialinės žiniasklaidos programomis. Pavyzdžiui, tokią programą kaip „Tiktok“, kurioje pateikiami trumpi vaizduotės vaizdo įrašai, lemia didelis vartotojų įsitraukimas. Kitoje programoje, tokioje kaip „YouTube“, daugiausia dėmesio skiriama vartotojų sąveikai per teigiamus įvertinimus, komentarus ir prenumeratas.

Pagalvokite, kokia medija ar pramogos jus domina labiausiai, ir sužinokite, ar galite sukurti paprastą platformą, kurioje vartotojai galėtų prisijungti ir išsaugoti jiems patinkantį turinį. Po to ieškokite socialinių elementų, kurie leistų pridėti komentarų, pavyzdžiui, pažymėti ir dalytis turiniu su kitais platformos vartotojais.

Populiarūs pavyzdžiai: „YouTube“, „Netflix“, „Audible“, „Spotify“, „Tiktok“

Panaudojamos technologijos:

  • Sukurkite „React App“, „Next.js“ arba „Gatsby“, kad sukurtumėte programos vartotojo sąsają
  • „npm“ paketo reagavimo grotuvas, skirtas groti mediją
  • Debesuota arba „Firebase“ saugykla medijos įkėlimui
  • Algolija, ieškanti laikmenos pagal pavadinimą (ty garso takelį, vaizdo įrašą, filmą ir kt.)

Sukurkite susirašinėjimo programą

Pranešimų programos yra didžiulės. Tikriausiai telefone turite nemokamą susirašinėjimo paslaugą, pvz., „WhatsApp“ ar „Viber“, arba įmontuotą socialinės žiniasklaidos platformoje, pvz., „Facebook Messenger“. Tokios paslaugos kaip „Intercom“ su tiesioginiais pranešimais taip pat yra prieinamos kaip žiniatinklio programos, kad įmonės galėtų nedelsiant suteikti savo vartotojams palaikymo paslaugas.

Bet kurią susirašinėjimo programą sudarys pokalbis su dviem ar daugiau žmonių, kai pranešimai siunčiami realiuoju laiku. Panašiai kaip socialinės žiniasklaidos programoje, aš rekomenduočiau tokią paslaugą kaip „Firebase“ ar „Hasura“, kuri perduoda duomenis per „WebSockets“, kad pranešimai būtų iškart rodomi pokalbyje.

Dauguma pranešimų programų yra mobiliuosiuose įrenginiuose arba planšetiniuose kompiuteriuose. Jei tai nėra pirmasis jūsų programų klonas, tai yra puiki proga pereiti už interneto ribų ir sukurti „React Native“ programą mobiliesiems. Dar geriau, galite sukurti žiniatinklio ir mobiliojo pranešimų programą kartu su tokiu paketu kaip „React Native Web“.

Populiarūs pavyzdžiai: „ WhatsApp“, „Viber“, nesantaika, „Messenger“, „Slack“

Panaudojamos technologijos:

  • „React Native“ arba „React Native Web“, kad sukurtumėte kaip programą mobiliesiems arba hibridinę programą (žiniatinklis + mobilusis)
  • „Firebase“, „AWS Amplify“ arba „Hasura“ (naudojant „GraphQL“ prenumeratas) pranešimams siųsti realiuoju laiku
  • Debesuota arba „Firebase“ saugykla, skirta siųsti pranešimus su vaizdo ar vaizdo turiniu
  • „npm“ paketas „emoji-mart“, skirtas lengvam „Slack“ tipo jaustukų rinkikliui, kurį vartotojai gali įtraukti į savo pranešimus

Sukurkite našumo programą

Tai turbūt lengviausias programos tipas, nuo kurio galima pradėti, turint omenyje, kad yra tiek daug pagrindinių produktyvumo programų pamokų. Kalbėdamas apie produktyvumo programas, turiu omenyje užrašų programėles, programas komandoms valdyti ir užduočių sąrašus. Paprastai tariant, viskas, kas padeda jums atlikti tam tikrą užduotį ar būti produktyvesniam.

Pirmiausia, kuriant produktyvumo programą, yra gera įžanga į programų kūrimą dėl daugelio jos funkcijų santykinio paprastumo.

Galite pradėti nuo kažko paprasto, pvz., Teksto rengyklės, kad lengvai parašytumėte suformatuotą tekstą su žymėjimu ir tada jį išplėstumėte. Tada pridėkite galimybę išsaugoti tekstą kaip atskirus failus kompiuteryje. Po to funkcija eksportuoti tą žymėjimą kaip HTML, kad būtų galima rašyti suformatuotus el. Laiškus.

Norėdami pradėti kurti produktyvumo programą, paklauskite, kokiomis funkcijomis programa galėtų palengvinti jūsų dienos tvarkaraštį, ir eikite iš ten.

Populiarūs pavyzdžiai: „ Todoist“, „Notion“, „Things“ ir kt.

Panaudojamos technologijos:

  • Sukurkite „React“ programą žiniatinkliui arba „React Native“ mobiliesiems
  • „npm“ paketo reagavimo žymėjimas, kad būtų rodomas žymėjimas programos NS
  • „npm“ paketas „reage-codemirror2“, skirtas kodui įrašyti į užrašus
  • „npm“ paketas gali būti traukiamas, jei norite pertvarkyti sąrašo turinį spustelėdami ir vilkdami

Sėkmės kuriant programą kuriant programą ir pamatysiu jus kitame straipsnyje.

Norite tapti JS meistru? Prisijunkite prie „2020 JS Bootcamp“

Prisijunkite prie „2020 JS Bootcamp“

Sekite + pasakykite labas! ? „Twitter“ • codeartistry.io