diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
index 280a1378e..72dca7009 100644
--- a/src/content/learn/start-a-new-react-project.md
+++ b/src/content/learn/start-a-new-react-project.md
@@ -1,126 +1,128 @@
---
-title: Start a New React Project
+title: Aloita uusi React-projekti
---
-If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.
+Jos haluat rakentaa uuden sovelluksen tai verkkosivuston täysin Reactilla, suosittelemme valitsemaan yhden React-ohjelmistokehyksistä, jotka ovat suosittuja yhteisössä. Ohjelmistokehykset tarjoavat ominaisuuksia, joita useimmat sovellukset ja sivustot lopulta tarvitsevat, mukaan lukien reititys, tietojen haku ja HTML:n luominen.
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder.
+**Sinun täytyy asentaa [Node.js](https://nodejs.org/en/) paikallista kehitystä varten.** Voit *myös* valita käyttää Node.js:ää tuotannossa, mutta sinun ei tarvitse. Monet React-ohjelmistokehykset tukevat vientiä staattiseksi HTML/CSS/JS-kansioksi.
-## Production-grade React frameworks {/*production-grade-react-frameworks*/}
+## Tuotantokäyttöön soveltuvat React-ohjelmistokehykset {/*production-grade-react-frameworks*/}
### Next.js {/*nextjs*/}
-**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
+**[Next.js](https://nextjs.org/) on full-stack React-ohjelmistokehys.** Se on monipuolinen ja antaa sinun luoda React-sovelluksia mistä tahansa koosta--lähes staattisesta blogista monimutkaiseen dynaamiseen sovellukseen. Luodaksesi uuden Next.js-projektin, aja terminaalissa:
npx create-next-app
-If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs)
+Jos olet uusi Next.js:ään, tutustu [Next.js tutoriaaliin.](https://nextjs.org/learn/foundations/about-nextjs)
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting.
+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ä.
### Remix {/*remix*/}
-**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run:
+**[Remix](https://remix.run) on full-stack React ohjelmistokehys sisäkkäisellä reitityksellä.** Se antaa sinun jakaa sovelluksesi osiin, jotka voivat ladata dataa rinnakkain ja päivittää käyttäjän toimien mukaan. Luodaksesi uuden Remix-projektin, aja terminaalissa:
npx create-remix
-If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long).
+Jos olet uusi Remixiin, tutustu Remixin [blogi -tutoriaaliin](https://remix.run/docs/en/main/tutorials/blog) (lyhyt) ja [sovellus -tutoriaaliin](https://remix.run/docs/en/main/tutorials/jokes) (pitkä).
-Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter).
+Remixiä ylläpitää [Shopify](https://www.shopify.com/). Kun luot Remix-projektin, sinun täytyy [valita julkaisuympäristösi](https://remix.run/docs/en/main/guides/deployment). Voit julkaista Remix-sovelluksen mihin tahansa Node.js- tai serverless-ympäristöön käyttämällä tai kirjoittamalla [adapterin](https://remix.run/docs/en/main/other-api/adapter).
### Gatsby {/*gatsby*/}
-**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run:
+**[Gatsby](https://www.gatsbyjs.com/) on React ohjelmistokehys nopeille CMS-taustaisille verkkosivustoille.** Sen rikas liitännäisjärjestelmä ja GraphQL-tietokerros yksinkertaistavat sisällön, API:en ja palveluiden integroimista yhteen verkkosivustoon. Luodaksesi uuden Gatsby-projektin, aja terminaalissa:
npx create-gatsby
-If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/)
+Jos olet uusi Gatsbyyn, tutustu [Gatsby tutoriaaliin.](https://www.gatsbyjs.com/docs/tutorial/)
-Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby.
+Gatsbya ylläpitää [Netlify](https://www.netlify.com/). Voit [julkaista täysin staattisen Gatsby-sivuston](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) mihin tahansa staattiseen hosting-ympäristöön. Jos valitset palvelinpuolen ominaisuuksia, varmista, että hosting-palveluntarjoajasi tukee niitä Gatsbylle.
-### Expo (for native apps) {/*expo*/}
+### Expo (natiivisovelluksille) {/*expo*/}
-**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run:
+**[Expo](https://expo.dev/) on React ohjelmistokehys, joka antaa sinun luoda universaaleja Android-, iOS- ja web-sovelluksia, joissa on täysin native-käyttöliittymät.** Se tarjoaa SDK:n [React Native](https://reactnative.dev/):lle, joka tekee natiivi-osien käytöstä helpompaa. Luodaksesi uuden Expo-projektin, aja terminaalissa:
npx create-expo-app
-If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+Jos olet uusi Expoon, tutustu [Expo tutoriaaliin.](https://docs.expo.dev/tutorial/introduction/)
-Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
+Expoa ylläpitää [Expo (yritys)](https://expo.dev/about). Sovellusten rakentaminen Expon kanssa on ilmaista, ja voit lähettää ne Google Play- ja Apple App Store -kauppoihin ilman rajoituksia. Expo tarjoaa myös valinnaisia maksullisia pilvipalveluita.
-#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
+#### Voinko käyttää Reactia ilman ohjelmistokehystä? {/*can-i-use-react-without-a-framework*/}
-You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
+Voit käyttää Reactia ilman ohjelmistokehystä--tämä on tapa [käyttää Reactia osana sivuasi.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Kuitenkin, jos rakennat uutta sovellusta tai sivustoa täysin Reactilla, suosittelemme käyttämään ohjelmistokehystä.**
-Here's why.
+Tässä miksi.
-Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
+Vaikka et tarvitsisi reititystä tai tiedonhakua aluksi, sinun täytyy todennäköisesti lisätä joitain kirjastoja niitä varten. Kun JavaScript-bundle kasvaa jokaisen uuden ominaisuuden myötä, saatat joutua selvittämään, miten jakaa koodi jokaiselle reitille erikseen. Kun tiedonhakutarpeesi monimutkaistuvat, saatat kohdata palvelin-asiakas-verkkojen vesiputouksia, jotka saavat sovelluksesi tuntumaan hyvin hitaalta. Kun yleisöösi kuuluu enemmän käyttäjiä, joilla on huonoja verkkoyhteyksiä ja heikkoja laitteita, saatat joutua luomaan HTML:ää komponenteistasi näyttääksesi sisältöä aikaisin--joko palvelimella tai rakennusaikana. Koodisi muuttaminen siten, että osa siitä suoritetaan palvelimella tai rakennusaikana, voi olla hyvin hankalaa.
-**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
+**Nämä ongelmat eivät koske vain Reactia. Tämän takia Sveltellä on SvelteKit, Vuella on Nuxt, ja niin edelleen.** Ratkaistaksesi nämä ongelmat itse, sinun täytyy integroida bundlerisi reitittimesi ja tietojen hakukirjastosi kanssa. Alkuperäisen asennuksen saaminen toimimaan ei ole vaikeaa, mutta on paljon hienovaraisuuksia, jotka liittyvät sovelluksen nopeaan lataamiseen, vaikka se kasvaisi ajan myötä. Haluat lähettää mahdollisimman vähän sovelluskoodia, mutta tehdä se yhdellä asiakas-palvelin-kierroksella, rinnakkain minkä tahansa sivun vaatiman datan kanssa. Haluat todennäköisesti, että sivu on interaktiivinen ennen kuin JavaScript-koodisi edes suoritetaan, jotta tuet progressiivista parannusta. Saatat haluta luoda kansio täysin staattisista HTML-tiedostoista markkinointisivuillesi, jotka voidaan julkaista missä tahansa ja toimia JavaScriptin ollessa poissa käytöstä. Näiden kykyjen rakentaminen itse vaatii todellista työtä.
-**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
+**React ohjelmistokehykset tällä sivulla ratkaisevat tämän kaltaisia ongelmia oletuksena, ilman ylimääräistä työtä puoleltasi.** Ne antavat sinun aloittaa hyvin kevyesti ja sitten skaalata sovelluksesi tarpeidesi mukaan. Jokaisella React-ohjelmistokehyksellä on yhteisö, joten vastausten löytäminen kysymyksiin ja työkalujen päivittäminen on helpompaa. Ohjelmistokehykset myös antavat rakennetta koodillesi, auttaen sinua ja muita säilyttämään kontekstin ja taidot eri projektien välillä. Toisaalta, omalla asennuksella on helpompaa jäädä tukemattomien riippuvuuksien versioiden vangiksi, ja lopulta päädyt luomaan oman ohjelmistokehyksen--sellaisen, jolla ei ole yhteisöä tai päivityspolkua (ja jos se on mitä tahansa, mitä me olemme tehneet aiemmin, se on hutiloidusti suunniteltu).
-If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
+Jos et ole vielä vakuuttunut, tai sovelluksellasi on epätavallisia rajoitteita, joita nämä ohjelmistokehykset eivät palvele hyvin ja haluat luoda oman mukautetun asennuksen, emme voi estää sinua--anna palaa! Nappaa `react` ja `react-dom` npm:stä, asenna mukautettu rakennusprosessisi bundlerilla kuten [Vite](https://vitejs.dev/) tai [Parcel](https://parceljs.org/), ja lisää muita työkaluja tarpeen mukaan reititykseen, staattiseen generointiin tai palvelinpuolen renderöintiin, ja niin edelleen.
-## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/}
+## Kehityksen reunalla olevat React ohjelmistokehykset {/*bleeding-edge-react-frameworks*/}
-As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
+Kuten olemme tutkineet miten Reactia voidaan parantaa, olemme huomanneet, että Reactin integroiminen tiiviimmin ohjelmistokehysten kanssa (erityisesti reitityksen, bundlauksen ja palvelinteknologioiden kanssa) on suurin mahdollisuutemme auttaa Reactin käyttäjiä rakentamaan parempia sovelluksia. Next.js-tiimi on suostunut yhteistyöhön kanssamme tutkimalla, kehittämällä, integroimalla ja testaamalla ohjelmistokehysten kanssa yhteensopivia Reactin kehityksen reunalla olevia ominaisuuksia, kuten [Reactin palvelinkomponentit.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
-These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!)
+Nämä ominaisuudet ovat lähempänä tuotantokäyttöä joka päivä, ja olemme keskustelleet muiden bundler- ja ohjelmistokehyskehittäjien kanssa niiden integroimisesta. Toivomme, että vuoden tai kahden kuluttua kaikilla tällä sivulla luetelluilla ohjelmistokehyksillä on täysi tuki näille ominaisuuksille. (Jos olet ohjelmistokehyskehittäjä, joka on kiinnostunut yhteistyöstä kanssamme näiden ominaisuuksien kokeilemiseksi, kerro meille!)
### Next.js (App Router) {/*nextjs-app-router*/}
-**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) 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'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 is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server.
+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.
-Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
+**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).
-#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+#### Mitkä ominaisuudet kuvaavat React-tiimin full-stack arkkitehtuurin visiota? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
-Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
+Next.js:n App Router bundler toteuttaa täysin virallisen [Reactin palvelinkomponenttien määrittelyn](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Tämä antaa sinun sekoittaa rakennusajan, vain-palvelimella-toimivat ja interaktiiviset komponentit yhteen React-puuhun.
-For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
+Esimerkiksi, voit kirjotitaa vain-palvelimella-toimivan React-komponentin `async`-funktiona, joka lukee tietokannasta tai tiedostosta. Sitten voit välittää dataa alas siitä interaktiivisille komponenteillesi:
```js
-// This component runs *only* on the server (or during the build).
-async function Talks({ confId }) {
- // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
+// Tämä komponentti suoritetaan *vain* palvelimella (tai rakennuksen aikana).
+async function Talks({ confId }) {.
+ // 1. Jos olet palvelimella, voit jutella data-tasosi kanssa. API endpointtia ei vaadita.
const talks = await db.Talks.findAll({ confId });
- // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
+ // 2. Lisää renderöintilogiikkaa miten paljon tahansa. Se ei tee JavaScript bundlestasi yhtään suurempaa.
const videos = talks.map(talk => talk.video);
- // 3. Pass the data down to the components that will run in the browser.
+ // 3. Välitä data alas komponenteillesi, jotka suoritetaan selaimessa.
return ;
}
```
-Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
+Next.js:n App Router integroituu myös [datan hakemiseen Suspensen kanssa](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Tämän avulla voit määritellä lataustilan (kuten tilapäisen luurangon) eri osille käyttöliittymääsi suoraan React-puussasi:
+
+```js
```js
}>
@@ -128,6 +130,6 @@ Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03
```
-Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.
+Palvelinkomponentit sekä SUspense ovat React -ominaisuuksia eivätkä Next.js -ominaisuuksia. Kuitenkin, niiden ottaminen käyttöön ohjelmistokehyksen tasolla vaatii sitoutumista ja ei-triviaalia toteutustyötä. Tällä hetkellä, Next.js App Router on täydellisin toteutus. React-tiimi työskentelee bundler-kehittäjien kanssa tehdäkseen näiden ominaisuuksien toteuttamisesta helpompaa seuraavan sukupolven ohjelmistokehyksissä.