Merge pull request #52 from reactjs/sync-a0cacd7d

Sync with react.dev @ a0cacd7

Author: mirorauhala

public/images/docs/diagrams/conditional_render_tree.dark.png

@@ -48,6 +48,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## Chile {/*chile*/}

public/images/docs/diagrams/conditional_render_tree.png

@@ -10,14 +10,15 @@ React on JavaScript kirjasto käyttöliittymien (UI) renderöintiin. Käyttölii
 
 <YouWillLearn isChapter={true}>
 
-- [Miten kirjoitat ensimmäisen komponenttisi](/learn/your-first-component)
-- [Miten ja milloin luot monikomponenttisia tiedostoja](/learn/importing-and-exporting-components)
-- [Miten lisäät merkintäkoodia JavaScriptiin JSX hyödyntäen](/learn/writing-markup-with-jsx)
-- [Miten käyttää aaltosulkeita JSX:n kanssa JavaScript toiminnallisuuksien hyödyntämiseksi komponenteissa](/learn/javascript-in-jsx-with-curly-braces)
-- [Miten mukauttaa komponentteja propeilla](/learn/passing-props-to-a-component)
-- [Miten renderöidä ehdollisesti komponentteja](/learn/conditional-rendering)
-- [Miten renderöidä useita komponentteja samanaikaisesti](/learn/rendering-lists)
-- [Miten välttää bugeja pitämällä komponentit puhtaina](/learn/keeping-components-pure)
+* [Miten kirjoitat ensimmäisen komponenttisi](/learn/your-first-component)
+* [Miten ja milloin luot monikomponenttisia tiedostoja](/learn/importing-and-exporting-components)
+* [Miten lisäät merkintäkoodia JavaScriptiin JSX hyödyntäen](/learn/writing-markup-with-jsx)
+* [Miten käyttää aaltosulkeita JSX:n kanssa JavaScript toiminnallisuuksien hyödyntämiseksi komponenteissa](/learn/javascript-in-jsx-with-curly-braces)
+* [Miten mukauttaa komponentteja propeilla](/learn/passing-props-to-a-component)
+* [Miten renderöidä ehdollisesti komponentteja](/learn/conditional-rendering)
+* [Miten renderöidä useita komponentteja samanaikaisesti](/learn/rendering-lists)
+* [Miten välttää bugeja pitämällä komponentit puhtaina](/learn/keeping-components-pure)
+* [Miten UI:n ajatteleminen puuna on hyödyllistä](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -519,6 +520,29 @@ Lue **[Komponenttien pitäminen puhtaana](/learn/keeping-components-pure)** oppi
 
 </LearnMore>
 
+## UI puuna {/*your-ui-as-a-tree*/}
+
+React käyttää puita mallintaakseen relaatioita komponenttien ja moduulien välillä.
+
+React-renderöintipuu on esitys ylä- ja alatason suhteesta komponenttien välillä.
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="Puukaavio, jossa on viisi noodia, joissa jokainen noodi esittää komponenttia. Päänoodi sijaitsee ylhäällä ja on otsikoitu 'Root Component'. Sillä on kaksi nuolta, jotka osoittavat kahteen noodiin 'Component A' ja 'Component B'. Kumpikin nuoli on otsikoitu 'renders'. 'Component A':lla on yksi 'renders' nuoli noodiin 'Component B'. 'Component C':lla on yksi 'renders' nuoli noodiin otsikoitu 'Component D'.">Esimerkki React-renderöintipuusta.</Diagram>
+
+Komponentit lähellä puun juurta, lähellä yläosaa, ajatellaan olevan ylätason komponentteja. Komponentteja, joilla ei ole alakomponentteja ovat lehti-komponentteja. Tämä kategorisointi komponenteista on hyvä ymmärtää datavirtauksen ja renderöintitehon kannalta.
+
+JavaScript-moduulien välisen suhteen mallintaminen on toinen hyödyllinen tapa ymmärtää sovellustasi. Viittaamme siihen moduuliriippuvuuspuuna.
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Puugraafi, jossa on viisi noodia. Jokainen noodi edustaa JavaScript-moduulia. Ylin noodi on merkitty nimellä 'RootModule.js'. Siitä ulottuu kolme nuolta noodeihin: 'ModuleA.js', 'ModuleB.js' ja 'ModuleC.js'. Jokainen nuoli on merkitty 'imports'. 'ModuleC.js' -noodilla on yksi 'imports' -nuoli, joka osoittaa noodiin, joka on merkitty nimellä 'ModuleD.js'.">Esimerkki moduuliriippuvuuspuu.</Diagram>
+
+Riippuvuuspuuta käytetään usein rakennustyökaluissa, jotta kaikki relevantti JavaScript-koodi voidaan pakata selaimen ladattavaksi ja renderöitavaksi. Suuri pakkauskoko heikentää käyttäjäkokemusta React-sovelluksissa. Moduuliriippuvuuspuun ymmärtäminen on hyödyllistä tällaisia ongelmia debugatessa.
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Lue **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** oppiaksesi, miten luoda renderöinti- ja moduuliriippuvuuspuut React-sovellukselle sekä miten ne ovat hyödyllisiä ajatusmalleja käyttäjäkokemuksen ja suorituskyvyn parantamiseksi.
+
+</LearnMore>
+
+
 ## Mitä seuraavaksi? {/*whats-next*/}
 
 Siirry seuraavaksi [Ensimmäinen komponenttisi](/learn/your-first-component) lukeaksesi tämän luvun sivu kerrallaan!

public/images/docs/diagrams/generic_dependency_tree.dark.png

@@ -17,24 +17,10 @@ Tila on eristetty komponenttien välillä. React pitää kirjaa siitä, mikä ti
 
 </YouWillLearn>
 
-## Käyttöliittymäpuu {/*the-ui-tree*/}
-
-Selaimet käyttävät monia puumalleja käyttöliittymän mallintamiseen. [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) edustaa HTML-elementtejä, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) tekee saman CSS:lle. On olemassa jopa [saavutettavuuspuu](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
-
-React käyttää myös puurakenteita käyttöliittymäsi hallintaan ja mallintamiseen. React rakentaa **UI puita** JSX koodistasi. Sitten React DOM päivittää selaimen DOM elementit vastaamaan tuota UI puuta. (React Native kääntää nämä puut näkymiksi, jotka voidaan näyttää puhelinalustoilla.)
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Kaavio, jossa on kolme vaakasuoraan sijoitettua osaa. Ensimmäisessä osassa on kolme pystysuoraan pinottua suorakulmiota, joissa on merkinnät 'Komponentti A', 'Komponentti B' ja 'Komponentti C'. Seuraavaan osioon siirtyy nuoli, jonka yläpuolella on React-logo ja jossa on merkintä 'React'. Keskimmäisessä osassa on komponenttien puu, jonka juuressa on merkintä 'A' ja kahdessa alakomponentissa merkinnät 'B' ja 'C'. Seuraavaan osioon siirrytään jälleen nuolella, jonka yläosassa on React-logo ja jossa on merkintä 'React'. Kolmas ja viimeinen osio on selaimen rautalankamalli, joka sisältää kahdeksan solmun puun, josta on korostettu vain osajoukko (joka osoittaa keskimmäisen osion alipuun).">
-
-Komponenteista React luo käyttöliittymäpuun, jota React DOM käyttää renderöidäkseen DOM:n 
-
-</Diagram>
-
-</DiagramGroup>
-
 ## Tila on sidottu sijaintiin puussa {/*state-is-tied-to-a-position-in-the-tree*/}
 
+React rakentaa [renderöintipuun](learn/understanding-your-ui-as-a-tree#the-render-tree) UI:n komponenttirakenteesta.
+
 Kun annat komponentille tilan, saatat ajatella, että tila "asuu" komponentin sisällä. Mutta tila oikeasti pidetään Reactin sisällä. React yhdistää jokaisen hallussa olevan tilatiedon oikeaan komponenttiin sen mukaan, missä kohtaa käyttöliittymäpuuta kyseinen komponentti sijaitsee.
 
 Tässä esimerkissä on vain yksi `<Counter />` JSX tagi, mutta se on renderöity kahdessa eri kohdassa:
@@ -188,7 +174,7 @@ Tilan päivittäminen
 
 </DiagramGroup>
 
-React pitää tilan muistissa niin kauan kuin renderlit samaa komponenttia samassa sijainnissa. Tämän nähdäksesi, korota molempia laskureita ja sitten poista toinen komponentti poistamalla valinta "Render the second counter" valintaruudusta, ja sitten lisää se takaisin valitsemalla se uudelleen:
+React pitää tilan muistissa niin kauan kuin renderöit samaa komponenttia samassa sijainnissa. Tämän nähdäksesi, korota molempia laskureita ja sitten poista toinen komponentti poistamalla valinta "Render the second counter" valintaruudusta, ja sitten lisää se takaisin valitsemalla se uudelleen:
 
 <Sandpack>
 

public/images/docs/diagrams/generic_dependency_tree.png

@@ -2075,7 +2075,7 @@ export default function Game() {
 }
 ```
 
-Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, jossa lukee: 
+Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, jossa lukee:
 
 <ConsoleBlock level="warning">
 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.