React Academy · Oppitunti

Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt

Ymmärtäkää kehitys- ja tuotantobuildien erot, lähdekarttojen tarkoitus ja se, miten ympäristöarvot ohjaavat toimintaa (esimerkiksi API-URL ja debug).

Oppitunti 1/38 vaihetta

Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.

Miksi buildit, sourcemapit ja env-arvot?

Tavoite: Ymmärrä development- ja production-buildien erot, source maps -tiedostojen rooli ja env-arvojen perusteet.

  • Dev: nopea palaute, runsas tulostus
  • Prod: optimoitu, hiljainen
  • Source maps: alkuperäisen koodin virheenkorjaus

Termien yhteenveto

  • Dev build: HMR/hot reload, selkeät virheet
  • Prod build: minimoitu, kuollut koodi poistettu
  • Source map: yhdistää minimoidun tulosteen lähdekoodeihin
  • Env: määrittää API-URL-osoitteen ja ominaisuusliput

Esimerkki: tilamerkki ja kehitysloki

Pieni tilamerkki; vain kehitystilassa tapahtuva lokitus on sallittua.

<div id="root"></div>

Esimerkki: tilan mukainen debug-käyttöliittymä

Näytä pieni debug-paneeli vain kehitystilassa. Tuotannossa se katoaa.

<div id="root"></div>

Esimerkki: env-arvot toiminnan ohjaamiseen

Lue env-tyyppisiä arvoja (simuloituina) API-URL-osoitteen valitsemista ja ominaisuuksien vaihtamista varten.

<div id="root"></div>

Vinkit ja sudenkuopat

  • Pidä lokit ja debug-käyttöliittymä poissa tuotannosta
  • Luo sourcemapit turvallista virheenkorjausta varten (pidä ne yksityisinä)
  • Käytä env-arvoja URL-osoitteiden ja ominaisuuksien vaihtamiseen

Tuotantobuildin perusteiden tarkistus

Mikä pitää yleensä paikkansa tuotantobuildista kehitysbuildiin verrattuna?

Kertaus

Kertaus: Dev-buildit ovat helppokäyttöisiä ja runsassanaisia, kun taas prod-buildit ovat optimoituja. Sourcemapit yhdistävät minimoidun koodin alkuperäiseen koodiin, ja env-arvot ohjaavat URL-osoitteita sekä ominaisuuslippuja.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
88
Oppitunnit
324

Usein kysytyt kysymykset

Onko oppitunti ”Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt” ilmainen?

Kyllä – oppitunnin ”Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt”?

Ymmärtäkää kehitys- ja tuotantobuildien erot, lähdekarttojen tarkoitus ja se, miten ympäristöarvot ohjaavat toimintaa (esimerkiksi API-URL ja debug). Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Kehitys- ja tuotantobuildit, lähdekartat ja ympäristöt
  2. Bundlen analysointi ja käyttämättömän koodin karsiminen
  3. CI:n perusteet: lint → testit → build
← Takaisin: React Academy