Ko te mahi i runga i tetahi kaupapa uaua, ahakoa he kaiwhakatakoto kaupapa mohio koe, he tauhou ranei, ka raru pea koe. Ina wehea e koe to kaupapa ki nga waahanga maha, ka puta ake nga take, ka uaua ake te whai i nga hapa me te kimi otinga. I etahi atu ahuatanga, he uaua pea te patuiro i nga tauira takitahi na te mea kaore koe i kite i te otinga tika mo te raru i mahia e koe.
Ka puta ano he waahanga waehere i etahi wa, he ahua uaua i tera wa. Ko JavaScript tetahi o nga reo-Tukutuku he tino ngawari ki te ako. Whakarewa noa i to kaitirotiro papamahi ka whakatere ki nga Utauta Kaiwhakawhanake (te nuinga o te F12), ka mutu koe! Ka taea e koe te whakamatautau me te JS me te kore e hiahia ki te whakauru, ki te whakahaere ranei i tetahi rorohiko uaua.
Hei timata, ko nga mea katoa e hiahia ana koe he kaitirotiro. He mea whakamiharo ki te whakaputa i enei mea ngawari katoa i waho o te pouaka, engari he wa ano ka hiahia koe. Hei tauira, ki te hiahia koe ki te whakamatau me tetahi API Tukutuku hou kua kitea e koe, engari kaore koe e hiahia ki te timata i tetahi kaupapa hou.
I tenei pou, ka whakatauritea, ka whakatauritea e matou nga papa takaro JS rongonui e toru, CodePen, CodeSandbox, me StackBlitz. Kia timata tatou!
CodePen
Ko nga taputapu whanaketanga paetukutuku o mua kei te tipu haere tonu, a ko nga kaiwhakatika tuhinga he waahanga nui o nga hangarau hou e ngawari ake ai te oranga o te kaiwhakawhanake. I tua atu i nga kaiwhakatika tuhinga tu-koke penei i a Atom, Notepad ++ ranei, kua pakaru mai nga kaiwhakatika-a-tirotiro i nga tau tata nei kaore e hiahiatia kia whakauruhia he kaupapa me te whakatairanga i te mahi tahi.
Ko te CodePen he "hapori ipurangi mo te whakamatautau me te whakaatu i nga waahanga HTML, CSS, me te JavaScript i hangaia e te kaiwhakamahi" e tuku ana i nga huarahi tino pai ki te ako me pehea te tuhi i nga wharangi paetukutuku o mua.
Ka hoatu e CodePen ki a koe nga "aratau" e rua. Ko te tuatahi me te tino whakamahia ko te Pene. He ngawari noa te patene i te paatene ka kawea tika atu ki te kaiwhakatikatika. Mai i reira, ka taea e koe te uru atu ki te panui arokite tae atu ki te HTML taketake, CSS, me nga matapihi whakatika JS.
Karekau he “pūnaha kōnae,” “IntelliSense,” he aha atu ranei – he tohu wetereo noa me nga whakahau tere penei i te prettify. I roto i te ripa kōwhiringa, ka taea e koe te kowhiri mai i te awhe kua herea o mua-tukatuka mo nga reo e toru (penei i te TypeScript mo JS) ka taapiri hononga ranei ki nga puna o waho.
Mena ka hiahia noa koe ki te mahi mo te kore utu, ka ranea tetahi o nga kaiwhakatika. Ka whakaaro ahau ki a CodePen mo nga mea katoa karekau e hiahia kia nui te tatūnga, whare pukapuka ranei – HTML, CSS, me JS noa me nga kaitahuri-mua kei runga ake. Mena kei te pirangi koe ki te whakamahi i te papa takaro ki te whakapai ake i to aroaro o te ao paapori, ki te whakawhanake ranei i tetahi kopaki whaiaro, he pai ake a CodePen.
Putanga Premium
He ruarua noa atu etahi atu whiringa hei whiriwhiri mai i te CodePen. Mena ka utu koe ia tau, ka taea e koe te tiki tetahi o nga mahere moni e toru mo te $12, $19, $39 ranei ia marama. Ka taea e koe te hanga i te maha o nga pene motuhake, nga pou me nga kohinga i runga i tetahi o nga taumata e toru.
Ka whiwhi ano koe i te tohu Pro (he whakanui i te hapori), te urunga aratau mahi tahi, kaore he panui, me etahi atu. He rautaki motuhake mo te roopu me etahi atu waahanga rereke. Tirohia ta ratou poari nama mana mo etahi atu korero.
Āhuatanga matua
I tua atu i te hanga HTML, CSS, me te JavaScript i CodePen, he iti noa atu nga mea e wehe ana.
- Ka taea te maataki i to waehere. Kare e hiahiatia he whakahiato.
- Ma te whakamatautau ka taea e koe te ako i nga mea hou.
- Waihangahia nga keehi whakamatautau iti hei rapu me te whakatika i nga raru.
- Whakaaturia au mahi whakamiharo.
- Waihanga me te penapena i nga Pene hei whakamahi i muri mai.
- Whakamātauria etahi atu waehere kaiwhakawhanake ka kite i te mahi.
painga
- Hei timata, kaore he utu.
- Nga rauemi ako kua whakauruhia ki roto.
- Mahi tahi me etahi atu ka whakatairite i nga kaupapa kia kitea ki hea ka haere a muri ake nei.
- He ngawari te whakamahi me te ngawari te UI.
huakore
- He iti te whare pukapuka waehere, he takarepa te whakaoti-aunoa. He pai noa mo nga kaupapa kotahi-wharangi karekau e kaha ki te hapai i tetahi mea nui ake.
- I runga i te CodePen, ka taea e koe te hanga pene motuhake, engari me whakapai ake koe ki te mema Pro ($9/marama).
WaehereSandbox
Ko te CodeSandbox he kaiwhakatika waehere i runga ipurangi. Ka whakahaere aunoa i te whakawhiti, te kapi, me te whakahaere whakawhirinaki mo koe, ka taea e koe te hanga kaupapa hou me te paato kotahi. Ka oti i a koe te hanga i tetahi mea whakamiharo, ka taea e koe te tiri ki etahi atu ma te tiri noa i te paetukutuku.
He hototahi te etita ki etahi kaupapa JavaScript, ahakoa kei roto etahi ahuatanga motuhake React, penei i te kowhiringa ki te penapena i te kaupapa ki te tauira waihanga-react-app.
Ko nga kaupapa ka hangaia e koe ki CodeSandbox ka tiimata me te tauira. Ka taea te hono atu ki tetahi whare pukapuka, anga, wa whakahaere ranei (tae atu ki a Node.js) ka whakamahi noa ranei i nga hangarau tukutuku noa. Whai muri i te kowhiri i tetahi tauira, ka tukuna koe ki te kaiwhakatikatika, ka kitea e koe nga konae katoa me te matapihi arokite kua tuwhera.
Ka taea e koe te uru ki tetahi "pūnaha konae" i roto i nga Sandbox katoa, ko te tikanga ka taea e koe te hanga i nga konae hou, te whakamahi i nga waahanga (tae atu ki nga kohinga NPM), me te taunekeneke ki nga rawa pateko. He whai waahi ano ki te whakarereke i nga konae whirihoranga tauira-motuhake.
Ka taea e koe te hanga i a koe ake tauira mo to keehi-whakamahi ahurei, oti me te hanganga konae me nga whakawhirinakitanga, penei i te IDE. Na te mea e hono ana te taputapu ki a Github, ka taea e koe te whakaputa tere me te whakatuwhera i nga PR. Ka taea e koe te tuku i to tono ki ZEIT, ki a Netlify ranei i tenei wa tonu.
CodeSandbox Team Pro
Ko te CodeSandbox, he pakihi Tatimana e taea ai e nga kaiwhakawhanake te hanga i tetahi pouaka kirikiri whanaketanga taupānga tukutuku e ahu mai ana i te tirotiro, kua tukuna e ia he turanga mahi tahi e taea ai e nga roopu te mahi i te waehere i roto i te kapua. Ko te hua hou, Team Pro, he otinga kore-waehere i hangaia mo nga roopu hua katoa, mai i nga kaihoahoa me nga kaiwhakahaere ma roto i nga roopu whakapumau kounga (QA) me tua atu.
Ka whakaratohia nga kaupapa i roto i te atanga ratarata-kaiwhakamahi mo te hunga e hiahia ana ki te hanga, ki te whakaae ranei ki nga huringa ki tetahi tono paetukutuku, ka karo i nga tikanga rereke penei i te tuku tuhipoka me nga tohutohu ki nga kaiwhakawhanake kia mahia nga huringa, whakahoki mai mo te korerorero, me te whakahoki ano i te mahi.
Āhuatanga matua
- He ētita waehere ā-tukutuku me te taputapu tauira.
- Mo te whakamahinga o te rohe, ka ngawari te tango i te pouaka kirikiri ki te konae konae.
- Papatonotanga ka mahia i roto i nga pouaka kirikiri, ka taea te tohatoha ki nga hoa mahi.
painga
- He wheako kaiwhakamahi pai ake me te mana nui ake ki te ētita.
- Ko te ahuatanga arokite ora ka taea te whakarereke me te tiro ki tetahi matapihi motuhake.
- Ka whakahōputu aunoatia te waehere me te whakauru i te CLI (codesandbox-cli)
- Tautoko mo nga waahanga npm matatau.
- He pai nga karere hapa me nga taunakitanga.
- Ka pai ake te wheako patuiro ma te whakarato i te tauranga pai ake, te kaitirotiro whakamatautau, me te kaitirotiro take.
huakore
- Ko te kaihoko mutunga ka kitea ki te maha o nga whakawhaiaro.
- Tōia me te maturuturu o nga konae mai i te rorohiko o te rohe kare e mahi tika.
- Me whai tetahi hanganga kōpaki ki CodeSandbox.
- Ko te mahi o te pouaka kirikiri motuhake e waatea ana ki nga kaihopu.
StackBlitz
Ko StackBlitz he IDE ipurangi kua whakakahahia e Visual Studio Code mo nga tono paetukutuku. He rite te urupare me te urutau o te papaaho pera i te putanga papamahi. Ko StackBlitz he IDE ipurangi ka tae mai i mua i te utaina Angular and React taputapu whanaketanga.
I hangaia e Thinkster.io taua kaupapa whakahirahira kia ngawari ki te tiimata me to kaupapa Angular or React me te kore e awangawanga mo te whakaurunga whakawhirinaki me te hanga tautuhinga. Ka whakaratohia e StackBlitz te maha o nga mea whakamiharo me nga ahuatanga ahurei kaore i etahi atu etita waehere ipurangi inaianei. Ko te mutunga, he mea tika ki te tirotiro i a StackBlitz ka kitea he aha nga mahi a tenei IDE ipurangi.
He tino rite a Stackblitz ki te IDE katoa, ina koa kare e taea e koe te poroporoaki ki te waehere VS na te mea kei runga te taputapu. He maha nga ahuatanga o te kete ka taea e koe te timata me te hanga tonu i tetahi tono-tapae katoa.
Ko te kaupapa e whakakahangia ana e Visual Studio, he mea rongonui i waenga i nga kaiwhakawhanake. Ko te whakatika tuimotu te ahuatanga o te kaupapa. Kia taea ai tenei, i hangaia e te roopu Stackblitz he tuutukutuku-a-rorohiko. I a koe e patopato ana, ka whakauru aunoa i nga whakawhirinakitanga, ka whakahiato, ka paihere, ka utaina ano.
Putanga Premium
Kei te waatea te Cadet, Astronaut me te Kaihautu mo te kore utu, $8/marama, me te $29/marama. Kei roto i te Astronaut me te Kaihautu he maha nga ahuatanga penei i nga kaupapa motuhake mutunga kore, te tukunga o nga konae mutunga kore, tono ki te hongere whakangawari o te roopu matua, me era atu. Mo etahi atu korero, tirohia te poari nama whaimana.
Āhuatanga matua
- Te taapiri i nga kohinga NPM ki to kaupapa.
- He mihi ki tetahi kaitirotiro hou i roto i te kaitirotiro dev, ka taea e koe te whakatika i te tuimotu.
- He URL taupānga manaaki e taea ai e matou te uru atu (me te tiri) i to maatau taupānga ora i nga wa katoa.
- Ko etahi atu ahuatanga rongonui Visual Studio Code ko Intellisense, Kaupapa Rapu (Cmd/Ctrl+P), Haere ki te Whakamaramatanga, me etahi atu.
painga
- Nga kaha o Firebase mo te tuku.
- Ko te ētita he tino ngawari ki te whakamahi me te tino tere.
- Ka whai waahi nga kaiwhakamahi ki te package.json, index.html, me te index.js.
- Waehere puna tiritahi ka taea hoki te whakauru.
- Arokite ora i runga i tetahi waahanga nui o te wharangi, me te kowhiringa ki te whakatuwhera i tetahi wharangi rereke mena e tika ana.
- Ahakoa Tuimotu, Whakatika
- Te whakaotinga atamai me te whakapai ake i te Intellisense.
- Ko te kaupapa matua o Stackblitz tuwhera puna.
huakore
- Karekau he awe ki runga i te whare, i te tūmau kaiwhakawhanake ranei na te mea kei te whakahaerehia e te whakahau waihanga-react-app.
- I roto i te React, me titiro tetahi hanganga kōpaki taketake.
- Kaore e taea te whakahōputu aunoa i te waehere, ahakoa ka taea te mahi ma te ringa.
Opaniraa
I enei ra, ka taea te whakamahi i te papa takaro tohu penei i nga mea kua kitea i runga ake nei hei hanga kaupapa tukutuku katoa. Kaore he take ki te whakauru i nga IDE uaua ki runga i to PC ka taea e koe te hanga, te patuiro, te whakamatautau, me te tuku tika mai i to kaitirotiro paetukutuku.
Ki taku whakaaro, he pai rawa atu a StackBlitz i waenga i a raatau na te mea he IDE i runga i te paetukutuku ka taea e JavaScript, Angular, me etahi atu kaupapa whanaketanga tika mai i te pouaka, kaore he take ki te whakauru i nga taiao whanaketanga rohe penei i te Node.js, npm, koki ranei. He rite tonu te wheako ki te whakamahi Visual Studio Code i te rohe. I roto i te meka, na te mea ko StackBlitz te mea e peia ana e Visual Studio Code, he tere me te mohio ki te putanga papamahi.
Ko tehea o CodePen, CodeSandbox, me StackBlitz to taputapu haere? Kia mohio tatou i roto i nga korero.
Abbatyya
Mauruuru mo tenei tuhinga nui, i taku kitenga i stackblitz.com, e mohio ana ahau koinei taku e hiahia ana.