fix sync

Author: mirorauhala

src/content/learn/describing-the-ui.md

@@ -10,26 +10,15 @@ React on JavaScript kirjasto käyttöliittymien (UI) renderöintiin. Käyttölii
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
-- [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)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+* [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>
 
@@ -531,34 +520,30 @@ Lue **[Komponenttien pitäminen puhtaana](/learn/keeping-components-pure)** oppi
 
 </LearnMore>
 
-<<<<<<< HEAD
-## Mitä seuraavaksi? {/*whats-next*/}
-=======
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## UI puuna {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+React käyttää puita mallintaakseen relaatioita komponenttien ja moduulien välillä.
 
-A React render tree is a representation of the parent and child relationship between components. 
+React-renderöintipuu on esitys ylä- ja alatason suhteesta komponenttien välillä.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+<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>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+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.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+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="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+<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>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+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">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+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>
 
 
-## What's next? {/*whats-next*/}
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+## Mitä seuraavaksi? {/*whats-next*/}
 
 Siirry seuraavaksi [Ensimmäinen komponenttisi](/learn/your-first-component) lukeaksesi tämän luvun sivu kerrallaan!
 

src/content/learn/preserving-and-resetting-state.md

@@ -10,50 +10,20 @@ Tila on eristetty komponenttien välillä. React pitää kirjaa siitä, mikä ti
 
 <YouWillLearn>
 
-<<<<<<< HEAD
 * Miten React "näkee" komponentin rakenteen
 * Milloin React päättää säilyttää tai nollata tilan
 * Miten pakottaa React nollaamaan komponentin tila
 * Miten avaimet ja tyypit vaikuttavat tilan säilyttämiseen
 
 </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:
-=======
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
-
-</YouWillLearn>
-
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
-
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
-
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
-
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
 
 <Sandpack>
 
@@ -204,12 +174,7 @@ Tilan päivittäminen
 
 </DiagramGroup>
 
-<<<<<<< HEAD
-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 will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+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>
 

src/content/learn/referencing-values-with-refs.md

@@ -284,11 +284,7 @@ Sinun ei myöskään tarvitse huolehtia [mutaatioiden välttämistä](/learn/upd
 
 ## Ref ja DOM {/*refs-and-the-dom*/}
 
-<<<<<<< HEAD
-Voit osoittaa refin mihin tahansa arvoon. Kuitenkin yleisin käyttökohde refille on DOM elementin käsittely. Esimerkiksi, tämä on kätevää jos haluat focusoida syöttölaatikon ohjelmakoodissa. Kun annat refin `ref`-attribuuttiin JSX:ssä, kuten `<div ref={myRef}>`, React asettaa vastaavan DOM elementin `myRef.current`:iin. Voit lukea lisää tästä [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
-=======
-You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+Voit osoittaa refin mihin tahansa arvoon. Kuitenkin yleisin käyttökohde refille on DOM elementin käsittely. Esimerkiksi, tämä on kätevää jos haluat kohdentaa syöttölaatikon ohjelmakoodissa. Kun annat refin `ref`-attribuuttiin JSX:ssä, kuten `<div ref={myRef}>`, React asettaa vastaavan DOM elementin `myRef.current`:iin. Kun elementti poistetaan DOM:sta, React päivittää `myRef.current` arvoksi `null`. Voit lukea lisää tästä [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 

src/content/learn/rendering-lists.md

@@ -1086,11 +1086,7 @@ Tässä `<Recipe {...recipe} key={recipe.id} />` on lyhytsyntaksi joka "välitt
 
 #### Listat erottimella {/*list-with-a-separator*/}
 
-<<<<<<< HEAD
-Tämä esimerkki renderöi kuuluisan Katsushika Hokusain haikun, jokaisen rivin ollessa kääritty `<p>` tagin sisään. Tehtäväsi on sijoittaa `<hr />` erotin jokaisen kappaleen jälkeen. Lopputuloksen rakennelman pitäisi näyttää tältä:
-=======
-This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+Tämä esimerkki renderöi kuuluisan Tachibana Hokushi haikun, jokaisen rivin ollessa kääritty `<p>` tagin sisään. Tehtäväsi on sijoittaa `<hr />` erotin jokaisen kappaleen jälkeen. Lopputuloksen rakennelman pitäisi näyttää tältä:
 
 ```js
 <article>

src/content/learn/start-a-new-react-project.md

@@ -26,11 +26,7 @@ npx create-next-app@latest
 
 Jos olet uusi Next.js:ään, tutustu [Next.js tutoriaaliin.](https://nextjs.org/learn/foundations/about-nextjs)
 
-<<<<<<< HEAD
-Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/deployment) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. [Täysin staattiset Next.js-sovellukset](https://nextjs.org/docs/advanced-features/static-html-export) voidaan julkaista missö tahansa staattisessa hosting-ympäristössä.
-=======
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/app/building-your-application/deploying) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista exporttia](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), joka ei vaadi palvelinta
 
 ### Remix {/*remix*/}
 
@@ -93,20 +89,9 @@ Nämä ominaisuudet ovat lähempänä tuotantokäyttöä joka päivä, ja olemme
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-<<<<<<< HEAD
-**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) on Next.js:n API:en uudelleensuunnittelu, joka tähtää React-tiimin full-stack arkkitehtuurin visioon.** Se antaa sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa rakennusaikana.
+**[Next.js's App Router](https://nextjs.org/docs) on Next.js:n API:en uudelleensuunnittelu, joka tähtää React-tiimin full-stack arkkitehtuurin visioon.** Se antaa sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa rakennusaikana.
 
-Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/deployment) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista vientiä](https://nextjs.org/docs/advanced-features/static-html-export), joka ei vaadi palvelinta.
-<Pitfall>
-
-**Next.js:n App Router on tällä hetkellä beta-vaiheessa eikä sitä vielä suositella tuotantokäyttöön** (maaliskuussa 2023). Kokeillaksesi sitä olemassa olevassa Next.js-projektissa, [seuraa tätä ohjeistusta](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
-
-</Pitfall>
-=======
-**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
-
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/app/building-your-application/deploying) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista exporttia](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), joka ei vaadi palvelinta.
 
 <DeepDive>
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -2075,17 +2075,13 @@ export default function Game() {
 }
 ```
 
-<<<<<<< HEAD
-Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, joka sanoo: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` Korjaat tämän virheen seuraavassa osiossa.
-=======
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
+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;.
 </ConsoleBlock>
-  
-You'll fix this error in the next section.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+
+Korjaat tämän virheen seuraavassa osiossa.
 
 <Sandpack>