From aa1c92bddab80a01de5cf4f132fb1456dc3c3e5a Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Mon, 2 May 2022 09:36:09 +0000 Subject: [PATCH 01/80] Translate installation --- beta/src/pages/learn/installation.md | 42 ++++++++++++++-------------- beta/src/sidebarLearn.json | 22 +++++++-------- 2 files changed, 31 insertions(+), 33 deletions(-) diff --git a/beta/src/pages/learn/installation.md b/beta/src/pages/learn/installation.md index f19f389d6..fc8c1cc9b 100644 --- a/beta/src/pages/learn/installation.md +++ b/beta/src/pages/learn/installation.md @@ -1,55 +1,55 @@ --- -title: Installation +title: Asennus --- -React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +React on suunniteltu alusta alkaen asteittaiseen käyttöönottoon. Voit käyttää niin paljon tai vähän Reactia kuin tarvitset. Halusitpa sitten koittaa Reactia, lisätä vähän interaktiivisuutta HTML sivuun, tai aloittaa monimutkaisen React-käyttöisen sovelluksen, tämä osio auttaa sinua pääsemään alkuun. -* [How to add React to an HTML page](/learn/add-react-to-a-website) -* [How to start a standalone React project](/learn/start-a-new-react-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +- [How to add React to an HTML page](/learn/add-react-to-a-website) +- [How to start a standalone React project](/learn/start-a-new-react-project) +- [How to set up your editor](/learn/editor-setup) +- [How to install React Developer Tools](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Kokeile Reactia {/* try-react */} -You don't need to install anything to play with React. Try editing this sandbox! +Reactia kokeillaksesi sinun ei tarvitse asentaa mitään. Kokeile muokata tätä hiekkalaatikkoa! ```js -function Greeting({ name }) { - return

Hello, {name}

; +function Tervehdys({nimi}) { + return

Hei, {nimi}

; } export default function App() { - return + return ; } ``` -We use sandboxes throughout these docs as teaching aids. Sandboxes can help familiarize you with how React works and help you decide if React is right for you. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react), or [CodePen]( -https://codepen.io/pen/?template=wvdqJJm). +Käytämme hiekkalaatikkoja osana dokumentaatiota opetuksen tukena. Hiekkalaatikot auttaa tutustumaan Reactin toimintaan sekä auttaa päättämään sopiiko React sinulle. +Reactin dokumentaation ulkopuolelta löytyy monia hiekkalaatikkoja, jotka tukevat Reactia: esimerkiksi [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react), tai [CodePen](https://codepen.io/pen/?template=wvdqJJm). -### Try React locally {/*try-react-locally*/} +## Kokeile Reactia paikallisesti {/* try-react-locally */} -To try React locally on your computer, [download this HTML page](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html). Open it in your editor and in your browser! +Kokeile Reactia paikallisesti omalla tietokoneellasi [lataamalla tämä HTML sivu](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html). Avaa se editorissasi sekä selaimesasi! -## Add React to a page {/*add-react-to-a-page*/} +## Lisää React sivuun {/* add-react-to-a-page */} -If you're working with an existing site and just need to add a little bit of React, you can [add React with a script tag.](/learn/add-react-to-a-website) +Jos työskentelet olemassaolevan sivun kanssa ja tarvitset vain vähäsen Reactia, voit [lisätä Reactin script -tagilla.](/learn/add-react-to-a-website) -## Start a React project {/*start-a-react-project*/} +## Aloita React -projekti {/* start-a-react-project */} -If you're ready to [start a standalone project](/learn/start-a-new-react-project) with React, you can set up a minimal toolchain for a pleasant developer experience. You can also start with a framework that makes a lot of decisions for you out of the box. +Jos olet valmis [aloittamaan itsenäisen projektin](/learn/start-a-new-react-project) Reactilla, voit pystyttää minimaalisen ympäristön miellyttävää kehittäjäkokemusta varten. Voit myös aloittaa käyttämällä ohjelmistokehystä, joka teke paljon päätöksiä puolestasi. -## Next steps {/*next-steps*/} +## Seuraavat vaiheet {/* next-steps */} -Where you start depends on how you like to learn, what you need to accomplish, and where you want to go next! Why not read [Thinking in React](/learn/thinking-in-react)--our introductory tutorial? Or you can jump to [Describing the UI](/learn/describing-the-ui) to play with more examples and learn each topic step by step. There is no wrong way to learn React! +Se mistä aloitat riippuu pitkälti miten haluat oppia, mitä sinun täytyy saavuttaa, ja minne haluat edetä seuraavaksi! Mikset lukisi [Ajattelua Reactissa](/learn/thinking-in-react) -johdantoa? Tai voit myös hypätä [Käyttöliittymän kuvaukseen](/learn/describing-the-ui) kokeillaksesi esimerkeillä ja oppiaksesi aiheen vaihe vaiheelta. Ei ole väärää tapaa oppia Reactia! diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 25463d85c..8e37bf5ac 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -1,5 +1,5 @@ { - "title": "Learn React", + "title": "Opi React", "heading": true, "path": "/learn", "routes": [ @@ -8,7 +8,7 @@ "path": "", "routes": [ { - "title": "Installation", + "title": "Asennus", "path": "/learn/installation", "routes": [ { @@ -32,10 +32,12 @@ { "title": "Quick Start", "path": "/learn", - "routes": [{ - "title": "Thinking in React", - "path": "/learn/thinking-in-react" - }] + "routes": [ + { + "title": "Thinking in React", + "path": "/learn/thinking-in-react" + } + ] }, { "title": "Describing the UI", @@ -114,9 +116,7 @@ { "title": "Managing State", "path": "/learn/managing-state", - "tags": [ - "intermediate" - ], + "tags": ["intermediate"], "routes": [ { "title": "Reacting to Input with State", @@ -151,9 +151,7 @@ { "title": "Escape Hatches", "path": "/learn/escape-hatches", - "tags": [ - "advanced" - ], + "tags": ["advanced"], "routes": [ { "title": "Referencing Values with Refs", From bf6ecc18f0b8fa0398d4cc9457657a0ff28850b8 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Mon, 2 May 2022 13:59:12 +0000 Subject: [PATCH 02/80] Add glossary --- beta/GLOSSARY.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 beta/GLOSSARY.md diff --git a/beta/GLOSSARY.md b/beta/GLOSSARY.md new file mode 100644 index 000000000..d8a523349 --- /dev/null +++ b/beta/GLOSSARY.md @@ -0,0 +1,11 @@ +# Glossary / Sanasto + + +## React specific + +- **React hook**: React hookki + +## General + +- **build tool**: käännöstyökalu +- **framework**: ohjelmistokehys From 93e4b120068dd66a9b288a72bfdd5e0475a687d7 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Mon, 2 May 2022 13:59:43 +0000 Subject: [PATCH 03/80] WIP: Quick start --- beta/src/pages/learn/index.md | 332 +++++++++++++++------------------- 1 file changed, 141 insertions(+), 191 deletions(-) diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md index d85ad22e2..2aa15be40 100644 --- a/beta/src/pages/learn/index.md +++ b/beta/src/pages/learn/index.md @@ -1,71 +1,65 @@ --- -title: Quick Start +title: Pika-aloitus --- -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +Tervetuloa Reactin dokumentaatioon. Tällä sivulla esitellään 80% Reactin konsepteista, joita käytät päivittäin. -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- Miten luodaan ja sijoitetaan komponentteja +- Miten lisätään merkintäkoodia ja tyylejä +- Miten tietoja näytetään +- Miten renderöidään listoja ja ehtoja +- Miten vastataan tapahtumiin ja päivitetään ruutua +- Miten tietoa jaetaan komponenttien välillä -## Creating and nesting components {/*components*/} +## Komponenttien luominen ja sijoittaminen {/* components */} -React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +React sovellukset koostuvat komponenteista. Komponentti on pala käyttöliittymää (UI, user interface), jolla on sen oma logiikka ja ulkomuoto. Komponentti voi olla pieni kuin vaikka painonappi tai suuri kuin koko sivu. -React components are JavaScript functions that return markup: +React komponentit ovat JavaScript funktioita jotka palauttavat merkintäkoodin: ```js -function MyButton() { - return ( - - ); +function Painonappi() { + return ; } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Nyt kun on esitelty `Painonappi` -komponentti, voidaan se sijoittaa toisen komponentin sisään: ```js {5} export default function MyApp() { return (
-

Welcome to my app

- +

Tervetuloa sovellukseeni

+
); } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Huomaa, että `` alkaa isolla alkukirjaimella. Tästä voit päätellä, että kyseessä on React komponentti. React komponentin nimen on aina alettava isolla alkukirjaimella, kun taas HTML tagit alkavat pienellä alkukirjaimella. -Have a look at the result: +Katsotaanpa lopputulosta: ```js -function MyButton() { - return ( - - ); +function Painonappi() { + return ; } export default function MyApp() { return (
-

Welcome to my app

- +

Tervetuloa sovellukseeni

+
); } @@ -73,91 +67,87 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Avainsanat `export default` määrittävät tiedoston pääkomponentin. Mikäli JavaScript syntaksi ei ole tuttua, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) ja [javascript.info](https://javascript.info/import-export) ovat hyviä tietolähteitä. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Merkintäkoodin kirjoittaminen JSX:llä {/* writing-markup-with-jsx */} -The markup syntax you've seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +Merkintäkoodi jota näit ylhäällä kutsutaan nimeltään JSX. Sen käyttö on valinnaista, mutta useimmat React projektit käyttävät JSX:ää sen mukavuuden vuoksi. Kaikki [työkalut, joita suosittelemme paikalliseen kehitykseen](/learn/installation) tukevat JSX:ää oletuksena. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: +JSX on tarkempaa kuin HTML. Sinun täytyy sulkea tagit kuten `
`. Komponenttisi ei myöskään voi palauttaa useampia JSX tageja, vaan ne täytyy kääriä yhden pääelementin sisään, kuten `
...
` tagiin tai tyhjään `<>...` elementtiin: ```js {3,6} -function AboutPage() { +function TietoaSivu() { return ( <> -

About

-

Hello there.
How do you do?

+

Tietoa

+

+ Heippa. +
+ Mitä kuuluu? +

); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter](https://transform.tools/html-to-jsx). +Mikäli sinulla on paljon HTML merkintäkoodia muutettavana JSX koodiksi, voit käyttää [verkkomuunninta](https://transform.tools/html-to-jsx). -## Adding styles {/*adding-styles*/} +## Tyylien lisääminen {/* adding-styles */} -In React, you specify a CSS class with `className`. It works the same way as HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +Reactissa voit määritellä CSS luokat käyttämällä `className` attribuuttia. Se toimii samoin kuin HTML kielen [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribuutti: ```js ``` -Then you write the CSS rules for it in a separate CSS file: +Tämän jälkeen kerrot tyylimäärittelyt erilisessä CSS tiedostossa: ```css -/* In your CSS */ +/* CSS koodissasi */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React ei määrää miten lisäät CSS tiedostot. Yksinkertaisimmillaan lisäät [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tagin HTML merkintäkoodiin. Jos käytät käännöstyökalua tai ohjelmistokehystä, konsultoi niiden dokumentaatiota löytääksesi tavan lisätä CSS tiedostoja projektiisi. -## Displaying data {/*displaying-data*/} +## Tiedon näyttäminen {/* displaying-data */} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +JSX mahdollistaa merkintäkoodin käytön JavaScriptissa. Aaltosulkeilla antaa sinun "peruuttaa takaisin" JavaScriptiin, jotta voit upottaa jonkun muuttujan koodistasi ja näytää sen käyttäjälle. Esimerkiksi, tämä tulostaa `kayttaja.nimi`: ```js {3} -return ( -

- {user.name} -

-); +return

{kayttaja.nimi}

; ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Voit myös "peruuttaa takaisin JavaScriptiin" JSX attribuutissa, mutta tässä täytyy käyttää aaltosulkeita lainausmerkkien sijaan. Esimerkiksi `className="avatar"` syöttää `"avatar"` merkkijonon CSS luokaksi, mutta `src={kayttaja.kuvanUrl}` lukee JavaScriptissa `kayttaja.kuvanUrl` muuttujan arvon ja palauttaa sen `src` attribuuttiin: ```js {3,4} -return ( - -); +return ; ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +JSX aaltosulkeisiin voi laittaa myös laajempia lausekkeita, esimerkiksi [merkkijonojen yhdistämistä](https://javascript.info/operators#string-concatenation-with-binary): + ```js -const user = { - name: 'Hedy Lamarr', - imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', - imageSize: 90, +const kayttaja = { + nimi: 'Hedy Lamarr', + kuvanUrl: 'https://i.imgur.com/yXOvdOSs.jpg', + kuvanKoko: 90, }; -export default function Profile() { +export default function Profiili() { return ( <> -

{user.name}

+

{kayttaja.nimi}

{'Photo @@ -177,193 +167,162 @@ export default function Profile() { -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +Ylläolevasta esimerkissä `style={{}}` ei ole erityistä syntaksia, vaan normaali `{}` olio JSX aaltosulkeiden `style={ }` sisällä. Voit käyttää `style` attribuuttia kun tyylisi riippuu JavaScript muuttujista. -## Conditional rendering {/*conditional-rendering*/} +## Ehdollinen renderöinti {/* conditional-rendering */} -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +Reactissa ei ole erityistä syntaksia ehtolauseiden kirjoittamiseen. Sen sijaan voit käyttää samoja tekniikoita kuin mitä käytät kirjoittaessasi tavallista JavaScript koodia. Esimerkiksi, voit käyttää [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) lausetta sisällyttämään JSX koodia ehdollisesti: ```js -let content; -if (isLoggedIn) { - content = ; +let sisalto; +if (onkoKirjautunutSisaan) { + sisalto = ; } else { - content = ; + sisalto = ; } -return ( -
- {content} -
-); +return
{sisalto}
; ``` -If you prefer more compact code, you can use the [conditional `?` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). Unlike `if`, it works inside JSX: +Mikäli suosit kompaktimpaa koodia, voit käyttää [`?` operaattoria](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). Toisin kuin `if, se toimii myös JSX:n sisällä: ```js -
- {isLoggedIn ? ( - - ) : ( - - )} -
+
{onkoKirjautunutSisaan ? : }
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Kun et tarvitse `else` osaa, voit käyttää lyhyempäää [loogista `&&` syntaksia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): ```js -
- {isLoggedIn && } -
+
{onkoKirjautunutSisaan && }
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Kaikki nämä tavat toimivat myös attribuuttien ehdolliseen määrittelyyn. Jos jokin tässä käyty JavaScript syntaksi ei ole tuttua, voit aina aloittaa käyttämällä `if...else`. -## Rendering lists {/*rendering-lists*/} +## Listojen renderöinti {/* rendering-lists */} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Tulet käyttämään JavaScriptin ominaisuuksia kuten [`for` silmukkaa](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) sekä [array `map()` funktiota](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) komponenttilistojen renderöintiin. -For example, let's say you have an array of products: +Esimerkiksi, sanotaan, että sinulla on lista tuotteista: ```js -const products = [ - { title: 'Cabbage', id: 1 }, - { title: 'Garlic', id: 2 }, - { title: 'Apple', id: 3 }, +const tuotteet = [ + {otsikko: 'Kaali', id: 1}, + {otsikko: 'Valkosipuli', id: 2}, + {otsikko: 'Omena', id: 3}, ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +Komponentin sisällä voit käyttää `map()` funktiota muuttaaksesi tuotelistan listaksi `
  • ` elementtejä: ```js -const listItems = products.map(product => -
  • - {product.title} -
    • -); - -return ( -
      {listItems}
    -); +const listaKohteet = tuotteet.map((tuote) => ( +
  • {tuote.otsikko}
    • +)); + +return
      {listaKohteet}
    ; ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React will rely on your keys to understand what happened if you later insert, delete, or reorder the items. +Huomaa miten `
  • ` elementillä on `key` attribuutti. Jokaiselle listan kohteelle tulisi antaa merkkijono tai numero, joka yksilöllisesti erottaa kohteen sen sisaruksista. Useimiten, avain tulisi suoraan tietolähteestä, kuten tietokannan ID kentästä. React hyödyntää avaimiasi ymmärtääkseen mitä tapahtui jos myöhemmin lisäät, poistat tai uudelleenjärjestät kohteita. ```js -const products = [ - { title: 'Cabbage', isFruit: false, id: 1 }, - { title: 'Garlic', isFruit: false, id: 2 }, - { title: 'Apple', isFruit: true, id: 3 }, +const tuotteet = [ + {otsikko: 'Kaali', onHedelma: false, id: 1}, + {otsikko: 'Valkosipuli', onHedelma: false, id: 2}, + {otsikko: 'Omena', onHedelma: true, id: 3}, ]; -export default function ShoppingList() { - const listItems = products.map(product => +export default function Ostoslista() { + const listaKohteet = tuotteet.map((tuote) => (
  • - {product.title} + color: tuote.onHedelma ? 'magenta' : 'darkgreen', + }}> + {tuote.otsikko}
    • - ); + )); - return ( -
      {listItems}
    - ); + return
      {listaKohteet}
    ; } ``` -## Responding to events {/*responding-to-events*/} +## Vastaaminen tapahtumiin {/* responding-to-events */} -You can respond to events by declaring event handler functions inside your components: +Voit vastata tapahtumiin määrittelemällä tapahtumakäsittelijän komponettiesi sisällä: ```js {2-4,7} -function MyButton() { - function handleClick() { - alert('You clicked me!'); +function Painonappi() { + function kunKlikataan() { + alert('Napsautit minua!'); } - return ( - - ); + return ; } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu tapahtumakäsittelijää: sinun täytyy ainoastaan _antaa se_. React kutsuu tapahtumakäsittelijääsi kun käyttäjä napsauttaa painiketta. -## Updating the screen {/*updating-the-screen*/} +## Ruudun päivittäminen {/* updating-the-screen */} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Usein haluat, että komponenttisi "muistaa" jotain tietoa ja näyttää sitä. Esimerkiksi, ehkäpä haluat laskea montako kertaa painiketta on napsautettu. Tehdäksesi tämän, lisää tila eli _state_ komponenttiisi. -First, import [`useState`](/apis/usestate) from React: +Ensiksi, importtaa [`useState`](/apis/usestate) Reactista: ```js {1,4} -import { useState } from 'react'; +import {useState} from 'react'; ``` -Now you can declare a *state variable* inside your component: +Nyt voit määritellä tilamuuttujan komponentin sisällä: ```js -function MyButton() { +function Painonappi() { const [count, setCount] = useState(0); ``` -You will get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to call them like `[something, setSomething]`. +Saat kaksi asiaa `useState`:lta. Tämänhetkisen tilan (`count`), ja funktion jolla voit päivittää sitä (`setCount`). Voit antaa niille mitkä tahansa nimet, mutta käytäntö on kutsua niitä seuraavasti: `[something, setSomething]`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +Ensimmäisen kerran kun painike näytetään, `count` on `0` koska `useState()` määrittelyssä annettiin `0`. Kun haluat muuttaa tilaa, kutsu `setCount()` funktiota ja anna sille uusi arvo. Painiketta napsauttamalla luku kasvaa: ```js {5} -function MyButton() { +function Painonappi() { const [count, setCount] = useState(0); - function handleClick() { + function kunKlikataan() { setCount(count + 1); } - return ( - - ); + return ; } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React kutsuu komponenttifunktiota uudelleen. Silloin `count` on `1`. Sitten se tulee olemaan `2`. Ja niin edellleen. -If you render the same component multiple times, each will get its own state. Try clicking each button separately: +Jos renderöit saman komponentin useasti, kullakin komponentilla on oma tilansa. Kokeile napsauttaa painikkeita erikseen: ```js -import { useState } from 'react'; +import {useState} from 'react'; -function MyButton() { +function Painonappi() { const [count, setCount] = useState(0); - function handleClick() { + function kunKlikataan() { setCount(count + 1); } - return ( - - ); + return ; } export default function MyApp() { return (
    -

    Counters that update separately

    - - +

    Laskurit, jotka päivittyvät erikseen

    + +
    ); } @@ -378,35 +337,34 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Huomaa miten kukin painike "muistaa" sen oman `count` tilan eikä se vaikuta muihin painikkeisiin. -## Using Hooks {/*using-hooks*/} +## Hookkien käyttäminen {/* using-hooks */} -Functions starting with `use` are called Hooks. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [React API reference](/apis). You can also write your own Hooks by combining the existing ones. +Funktiot jotka alkavat sanalla `use` ovat hookkeja. `useState` on Reactin sisäänrakennettu hookki. Löydät lisää sisäänrakennettuja hookkeja [React API referenssistä](/apis). VOit myös kirjoittaa omia hookkeja olemassaolevia yhdistelemällä. -Hooks are more restrictive than regular functions. You can only call Hooks *at the top level* of your components (or other Hooks). If you want to `useState` in a condition or a loop, extract a new component and put it there. +Hookit ovat rajoittavampia kuin normaalit funktiot. Voit kutsua hookkeja _ainoastaan_ komponentin päätasolta (tai muista hookeista). Jos haluat käyttää `useState` hookkia ehdollisesti tai loopissa, luo uusi komponentti ja sijoita se sinne. -## Sharing data between components {/*sharing-data-between-components*/} +## Tiedon jakaminen komponenttien välillä {/* sharing-data-between-components */} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `count` tila, sekä kun yksittäistä painiketta napsautettiin, vain sen painikkeen `count` tila muuttui: -Before clicking, each MyButton has a count value set to zero. - +Ennen napsautusta, jokaisella Painonappi komponentilla tila on asetettuna nollaksi. -After clicking, only one MyButton count value has updated. +Napsautuksen jälkeen, vain yhdellä Painonappi komponentilla tila on päivittynyt. -However, often you'll need components to *share data and always update together*. +However, often you'll need components to _share data and always update together_. To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. @@ -430,7 +388,7 @@ After clicking, count updates in MyApp and the new value is passed to both child Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. -First, *move the state up* from `MyButton` into `MyApp`: +First, _move the state up_ from `MyButton` into `MyApp`: ```js {2,6-10} function MyButton() { @@ -454,7 +412,7 @@ export default function MyApp() { } ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Then, _pass the state down_ from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: ```js {11-12} export default function MyApp() { @@ -474,17 +432,13 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and _passes both of them down as props_ to each of the buttons. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +Finally, change `MyButton` to _read_ the props you have passed from its parent component: ```js {1,3} -function MyButton({ count, onClick }) { - return ( - - ); +function MyButton({count, onClick}) { + return ; } ``` @@ -495,14 +449,10 @@ This is called "lifting state up". By moving state up, we've shared it between c ```js -import { useState } from 'react'; +import {useState} from 'react'; -function MyButton({ count, onClick }) { - return ( - - ); +function MyButton({count, onClick}) { + return ; } export default function MyApp() { @@ -531,7 +481,7 @@ button { -## Next Steps {/*next-steps*/} +## Next Steps {/* next-steps */} By now, you know the basics of how to write React code! From 81b8d027ee86dff9e7d7a4fdfccef3355b21a087 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 14:35:09 +0300 Subject: [PATCH 04/80] style --- beta/src/pages/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md index 2aa15be40..328b6ec41 100644 --- a/beta/src/pages/learn/index.md +++ b/beta/src/pages/learn/index.md @@ -127,7 +127,6 @@ return ; JSX aaltosulkeisiin voi laittaa myös laajempia lausekkeita, esimerkiksi [merkkijonojen yhdistämistä](https://javascript.info/operators#string-concatenation-with-binary): - ```js @@ -243,7 +242,7 @@ export default function Ostoslista() { )); - return
      {listaKohteet}
    ; + return
      {listaKohteet}
    ; } ``` @@ -263,7 +262,7 @@ function Painonappi() { } ``` -Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu tapahtumakäsittelijää: sinun täytyy ainoastaan _antaa se_. React kutsuu tapahtumakäsittelijääsi kun käyttäjä napsauttaa painiketta. +Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu tapahtumakäsittelijää: sinun täytyy ainoastaan _antaa se_. React kutsuu tapahtumakäsittelijääsi kun käyttäjä napsauttaa painiketta. ## Ruudun päivittäminen {/* updating-the-screen */} @@ -354,6 +353,7 @@ Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `co Ennen napsautusta, jokaisella Painonappi komponentilla tila on asetettuna nollaksi. + From 7cad9abb204220399a8b7e90ef0bb5e1671300ce Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 14:35:24 +0300 Subject: [PATCH 05/80] fix spelling --- beta/src/pages/learn/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md index 328b6ec41..b2b95198a 100644 --- a/beta/src/pages/learn/index.md +++ b/beta/src/pages/learn/index.md @@ -346,7 +346,7 @@ Hookit ovat rajoittavampia kuin normaalit funktiot. Voit kutsua hookkeja _ainoas ## Tiedon jakaminen komponenttien välillä {/* sharing-data-between-components */} -Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `count` tila, sekä kun yksittäistä painiketta napsautettiin, vain sen painikkeen `count` tila muuttui: +Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `count` tila, ja kun yksittäistä painiketta napsautettiin, vain painetun painikkeen `count` tila muuttui: From 9b694d26f478a2a2e8b8ca2ca5dd085cc530eef6 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 15:04:41 +0300 Subject: [PATCH 06/80] Add props --- beta/GLOSSARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/GLOSSARY.md b/beta/GLOSSARY.md index d8a523349..9125a4d8f 100644 --- a/beta/GLOSSARY.md +++ b/beta/GLOSSARY.md @@ -1,9 +1,9 @@ # Glossary / Sanasto - ## React specific - **React hook**: React hookki +- **props**: proppi, propit ## General From 050887a5b4db4a9d952cbb33364290df7cac9512 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 15:04:47 +0300 Subject: [PATCH 07/80] Finish page --- beta/src/pages/learn/index.md | 50 +++++++++++++++++------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md index b2b95198a..7833e2616 100644 --- a/beta/src/pages/learn/index.md +++ b/beta/src/pages/learn/index.md @@ -350,13 +350,13 @@ Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `co - + Ennen napsautusta, jokaisella Painonappi komponentilla tila on asetettuna nollaksi. - + Napsautuksen jälkeen, vain yhdellä Painonappi komponentilla tila on päivittynyt. @@ -364,35 +364,35 @@ Napsautuksen jälkeen, vain yhdellä Painonappi komponentilla tila on päivittyn -However, often you'll need components to _share data and always update together_. +Usein kuitenkin komponenttien täytyy _jakaa tietoa ja päivittyä sen mukana_. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +Jotta molemmat `MyButton` komponentit näyttävät saman `count` luvun sekä päivittyvät sen mukana, täytyy yksilöllinen tila poistaa nappi -komponenteilta "ylöspäin" lähimmälle pääkomponentille. -In this example, it is `MyApp`: +Tässä esimerkissä se on `MyApp`: - + -Before clicking, count is stored in MyApp and passed down to both children as props. +Ennen napsautusta, count tila on MyApp komponentissa ja annettu molemmille lapsikomponenteille proppeina. - + -After clicking, count updates in MyApp and the new value is passed to both children as props. +Klikkauksen jälkeen tila päivittyy MyApp komponentissa sekä uusi arvo on annettu molemmille lapsikomponenteille proppeina. -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Nyt kun klikkaat kumpaakin painiketta, `count` tila `MyApp` komponentissa muuttuu. Tämä muutos muuttaa molempien `MyButton` komponenttien tilat.Tässä vielä miten se tehtäisiin koodissa. -First, _move the state up_ from `MyButton` into `MyApp`: +Ensiksi, _siirrä tila ylöspäin_ `MyButton` komponentista `MyApp` komponenttiin: ```js {2,6-10} function MyButton() { - // ... we're moving code from here ... + // ... siirretään tila täältä ... } export default function MyApp() { @@ -404,7 +404,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    Laskurit, jotka päivittyvät erikseen

    @@ -412,7 +412,7 @@ export default function MyApp() { } ``` -Then, _pass the state down_ from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Sitten _anna tila alaspäin_ `MyApp` komponentissa kuhunkin `MyButton` komponenttiin yhdessä klikkauksen tapahtumakäsittelijän kanssa. Voit antaa tietoa `MyButton` komponenttiin käyttäen JSX aaltosulkeita, aivan kuten aiemmin teit sisäänrakennettujen `` tagien kanssa: ```js {11-12} export default function MyApp() { @@ -424,7 +424,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Laskurit jotka päivittyvät yhdessä

    @@ -432,19 +432,19 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and _passes both of them down as props_ to each of the buttons. +Tietoa, jota annat alaspäin näin kutsutaan _propeiksi_ (engl. props). Nyt `MyApp` komponentti sisältää `count` tilan, `handleClick` tapahtumakäsittelijän, sekä _antaa molemmat näistä proppeina_ kullekin painikkeelle. -Finally, change `MyButton` to _read_ the props you have passed from its parent component: +Lopuksi, mutta `MyButton` _lukemaan_ propit, jotka annoit sille sen pääkomponentista: ```js {1,3} function MyButton({count, onClick}) { - return ; + return ; } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. +Kun klikkaat painiketta, `onClick` tapahtumakäsittelijää kutsutaan. Jokaisen painikkeen `onClick` proppi on asetettu `handleClick` funktioon `MyApp` komponentissa, joten koodi sen sisällä suoritetaan. Se koodi kutsuu `setCount(count + 1)`, nostaen `count` tilamuuttujaa. Uusi `count` tila annetaan proppina kullekin painikkeelle jolloin ne kaikki näyttävät samaa uutta arvoa. -This is called "lifting state up". By moving state up, we've shared it between components. +Tätä kutsutaan "tilan nostamiseksi ylös". Siirtämällä tilaa ylös jaamme sitä komponenttien välillä. @@ -452,7 +452,7 @@ This is called "lifting state up". By moving state up, we've shared it between c import {useState} from 'react'; function MyButton({count, onClick}) { - return ; + return ; } export default function MyApp() { @@ -464,7 +464,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Laskurit jotka päivittyvät yhdessä

    @@ -481,8 +481,8 @@ button {     -## Next Steps {/* next-steps */} +## Seuraavat vaiheet {/* next-steps */} -By now, you know the basics of how to write React code! +Tähän mennessä osaat miten kirjoitetaan perusteet React koodista! -Head to [Thinking in React](/learn/thinking-in-react) to see how it feels to build a UI with React in practice. +Siirry seuraavaksi [Ajattelua Reactissa](/learn/thinking-in-react) nähdäksesi, miltä käyttöliittymän rakentaminen Reactilla tuntuu käytännössä. From 830cc71ddcb16f715fcc60fcba0b9004be11ff70 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 16:15:42 +0300 Subject: [PATCH 08/80] Add more words --- beta/GLOSSARY.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/beta/GLOSSARY.md b/beta/GLOSSARY.md index 9125a4d8f..3b02c4f4c 100644 --- a/beta/GLOSSARY.md +++ b/beta/GLOSSARY.md @@ -4,8 +4,13 @@ - **React hook**: React hookki - **props**: proppi, propit +- **pure component**: puhdas komponentti ## General +- **export**: exportata, viedä +- **import**: importata, tuoda - **build tool**: käännöstyökalu - **framework**: ohjelmistokehys +- **codebase**: koodipohja +- **property**: en keksinyt järkevää suomennosta, property From 723ff8621386c78630c37edc1f9c24ddc4aab611 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 16:15:51 +0300 Subject: [PATCH 09/80] Translate page --- beta/src/pages/learn/describing-the-ui.md | 300 +++++++++++----------- 1 file changed, 148 insertions(+), 152 deletions(-) diff --git a/beta/src/pages/learn/describing-the-ui.md b/beta/src/pages/learn/describing-the-ui.md index 442e1407a..aad8c7b0b 100644 --- a/beta/src/pages/learn/describing-the-ui.md +++ b/beta/src/pages/learn/describing-the-ui.md @@ -1,46 +1,41 @@ --- -title: Describing the UI +title: Käyttöliittymän kuvaus --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React on JavaScript kirjasto käyttöliittymien (UI) renderöintiin. Käyttöliittymät rakennetaan pienistä osista kuten painikkeista, tekstistä ja kuvista. Reactilla voit yhdistää näytä uudelleen käytettäviksi, sisäkkäisiksi _komponenteiksi_. Verkkosivuista puhelinsovelluksiin, kaikki näytöllä voidaan hajottaa komponenteiksi. Tässä luvussa opit luomaan, mukauttamaan, sekä ehdollisesti näyttämään React komponentteja. -* [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) +- [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) -## Your first component {/*your-first-component*/} +## Ensimmäinen komponenttisi {/* your-first-component */} -React applications are built from isolated pieces of UI called "components". A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +React sovellukset rakennetaan eristetyistä käyttöliittymäpalasista, joita kutsutaan "komponenteiksi". React komponentti on JavaScript funktio johon voit ripotella merkintäkoodia. Komponentit voivat olla pieniä kuten painikkeita, tai suuria kuten kokonaisia sivuja. Tässä on `Gallery` komponentti, joka renderöi kolme `Profile` komponenttia: ```js function Profile() { - return ( - Katherine Johnson - ); + return Katherine Johnson; } export default function Gallery() { return (
    -

    Amazing scientists

    +

    Mahtavia tutkijoita

    @@ -50,21 +45,23 @@ export default function Gallery() { ``` ```css -img { margin: 0 10px 10px 0; height: 90px; } +img { + margin: 0 10px 10px 0; + height: 90px; +} ``` -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Lue **[Ensimmäinen komponenttisi](/learn/your-first-component)** oppiaksesi miten määritellä ja käyttää React komponentteja. -## Importing and exporting components {/*importing-and-exporting-components*/} - -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +## Komponettien tuonti ja vienti {/* importing-and-exporting-components */} +Voit määritellä monia komponentteja yhdessä tiedostossa, mutta navigointi isojen tiedostojen sisällä saattaa muuttua hankalaksi. Tämän ratkaisemiseksi, voit _exportata_ eli viedä komponentin sen omaan tiedostoon ja sitten _importata_ eli tuoda sen komponentin toisesta tiedostosta: @@ -72,9 +69,7 @@ You can declare many components in one file, but large files can get difficult t import Gallery from './Gallery.js'; export default function App() { - return ( - - ); + return ; } ``` @@ -95,39 +90,36 @@ export default function Gallery() { ```js Profile.js export default function Profile() { - return ( - Alan L. Hart - ); + return Alan L. Hart; } ``` ```css -img { margin: 0 10px 10px 0; } +img { + margin: 0 10px 10px 0; +} ``` -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Lue **[Komponenttien tuonti ja vienti](/learn/importing-and-exporting-components)** oppiaksesi miten komponentteja voidaan jakaa omiin tiedostoihin. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Merkintäkoodin kirjoittaminen JSX:llä {/* writing-markup-with-jsx */} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +Jokainen React komponentti on JavaScript funktio, joka saattaa sisältää jotain merkintäkoodia, jonka React renderöi selaimeen. React komponentit käyttävät syntaksilisäosaa nimeltään JSX edustamaan kyseistä merkintää. JSX näyttää pitkälti samalta kuin HTML, mutta on hieman tiukempaa ja se voi näyttää dynaamista informaatiota. -If we paste existing HTML markup into a React component, it won't always work: +Jos liitämme olemassa olevaa HTML koodia React komponenttiin, se ei aina välttämättä toimi: ```js export default function TodoList() { return ( - // This doesn't quite work! + // Tämä ei ihan toimi!

    Hedy Lamarr's Todos

    -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Jos sinulla on olemassa olevaa HTML koodia, voit korjata sen käyttämällä [muunninta](https://transform.tools/html-to-jsx): @@ -174,20 +168,22 @@ export default function TodoList() { ``` ```css -img { height: 90px; } +img { + height: 90px; +} ``` -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Lue **[Merkintäkoodin kirjoittaminen JSX:llä](/learn/writing-markup-with-jsx)** oppiaksesi miten kirjoitetaan kelvollista JSX koodia. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JavaScriptia JSX:ssa aaltosulkeilla {/* javascript-in-jsx-with-curly-braces */} -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript: +JSX antaa sinun kirjoittaa HTML-näköistä merkintäkoodia JavaScript tiedoston sisällä, pitäen renderöintilogiikan ja sisällön samassa paikassa. Joskus haluat lisätä vähäsen JavaScript logiikaa tai viitata dynaamiseen propertyyn merkintäkoodin sisällä. Tässä tapauksessa voit käyttää aaltosulkeita JSX koodissasi avataksesi "pienen ikkunan" takaisin JavaScriptiin: @@ -196,8 +192,8 @@ const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', - color: 'pink' - } + color: 'pink', + }, }; export default function TodoList() { @@ -220,27 +216,35 @@ export default function TodoList() { ``` ```css -body { padding: 0; margin: 0 } -body > div > div { padding: 20px; } -.avatar { border-radius: 50%; height: 90px; } +body { + padding: 0; + margin: 0; +} +body > div > div { + padding: 20px; +} +.avatar { + border-radius: 50%; + height: 90px; +} ``` -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +Lue **[JavaScriptia JSX:ssa aaltosulkeilla](/learn/javascript-in-jsx-with-curly-braces)** oppiaksesi miten JavaScript tietoa voidaan käsitellä JSX koodissa. -## Passing props to a component {/*passing-props-to-a-component*/} +## Proppien välittäminen komponenteille {/* passing-props-to-a-component */} -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX! +React komponentit käyttävät _proppeja_ kommunikoidakseen toisten välillä. Jokainen pääkomponentti voi antaa tietoa sen lapsikomponeteilleen antamalla ne propseina. Propsit saattavat muistuttaa HTML attribuuteista, mutta voit antaa mitä tahansa JavaScript arovoa niiden välillä, esim. oliota, listoja, funktioita ja myös JSX koodia! ```js -import { getImageUrl } from './utils.js' +import {getImageUrl} from './utils.js'; export default function Profile() { return ( @@ -249,14 +253,14 @@ export default function Profile() { size={100} person={{ name: 'Katsuko Saruhashi', - imageId: 'YfeOqp2' + imageId: 'YfeOqp2', }} /> ); } -function Avatar({ person, size }) { +function Avatar({person, size}) { return ( - {children} - - ); +function Card({children}) { + return
    {children}
    ; } - ``` ```js utils.js export function getImageUrl(person, size = 's') { - return ( - 'https://i.imgur.com/' + - person.imageId + - size + - '.jpg' - ); + return 'https://i.imgur.com/' + person.imageId + size + '.jpg'; } ``` @@ -310,20 +304,20 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Lue **[Proppien välittäminen komponenteille](/learn/passing-props-to-a-component)** oppiaksesi miten proppeja annetaan ja luetaan. -## Conditional rendering {/*conditional-rendering*/} +## Ehdollinen renderöinti {/* conditional-rendering */} -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Komponenteissasi usein täytyy näyttää tietoa riippuen erilaisista ehdoista. Reactissa voit renderöidä ehdollisesti JSX koodia käyttäen JavaScript syntaksia kuten `if` lausetta, `&&` ja `? :` operaattoreita. -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: +Tässä esimerkissä JavaScript `&&` operaattoria käytetään valintamerkin ehdolliseen renderöintiin: ```js -function Item({ name, isPacked }) { +function Item({name, isPacked}) { return (
  • {name} {isPacked && '✔'} @@ -336,18 +330,9 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - - + + +
    ); @@ -358,36 +343,33 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +Lue **[Ehdollinen renderöinti](/learn/conditional-rendering)** oppiaksesi eri tavat renderöidä ehdollisesti. -## Rendering lists {/*rendering-lists*/} +## Listojen renderöinti {/* rendering-lists */} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Usein haluat näyttää useita samoja komponentteja listasta dataa. Voit käyttää JavaScriptin `filter()` ja `map()` funktioita Reactissa listan suodattamiseksi ja muuttamiseksi uuteen listaan komponenteista. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. +Jokaiselle listan kohteelle täytyy määrittää `key` proppi. Yleensä voit käyttää tietokannan ID kenttää `key` propin arvona. Näin React muistaa listan jokaisen kohteen järjestyksen mikäli lista muuttuu. ```js App.js -import { people } from './data.js'; -import { getImageUrl } from './utils.js'; +import {people} from './data.js'; +import {getImageUrl} from './utils.js'; export default function List() { - const listItems = people.map(person => + const listItems = people.map((person) => (
  • - {person.name} + {person.name}

    {person.name}: {' ' + person.profession + ' '} known for {person.accomplishment}

    • - ); + )); return (

    Scientists

    @@ -398,78 +380,92 @@ export default function List() { ``` ```js data.js -export const people = [{ - id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', - imageId: 'MK3eW3A' -}, { - id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', - imageId: 'mynHUSa' -}, { - id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', - imageId: 'bE7W1ji' -}, { - id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', - imageId: 'IOjWm71' -}, { - id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', - imageId: 'lrWQx8l' -}]; +export const people = [ + { + id: 0, + name: 'Creola Katherine Johnson', + profession: 'mathematician', + accomplishment: 'spaceflight calculations', + imageId: 'MK3eW3A', + }, + { + id: 1, + name: 'Mario José Molina-Pasquel Henríquez', + profession: 'chemist', + accomplishment: 'discovery of Arctic ozone hole', + imageId: 'mynHUSa', + }, + { + id: 2, + name: 'Mohammad Abdus Salam', + profession: 'physicist', + accomplishment: 'electromagnetism theory', + imageId: 'bE7W1ji', + }, + { + id: 3, + name: 'Percy Lavon Julian', + profession: 'chemist', + accomplishment: + 'pioneering cortisone drugs, steroids and birth control pills', + imageId: 'IOjWm71', + }, + { + id: 4, + name: 'Subrahmanyan Chandrasekhar', + profession: 'astrophysicist', + accomplishment: 'white dwarf star mass calculations', + imageId: 'lrWQx8l', + }, +]; ``` ```js utils.js export function getImageUrl(person) { - return ( - 'https://i.imgur.com/' + - person.imageId + - 's.jpg' - ); + return 'https://i.imgur.com/' + person.imageId + 's.jpg'; } ``` ```css -ul { list-style-type: none; padding: 0px 10px; } +ul { + list-style-type: none; + padding: 0px 10px; +} li { margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } -img { width: 100px; height: 100px; border-radius: 50%; } -h1 { font-size: 22px; } -h2 { font-size: 20px; } +img { + width: 100px; + height: 100px; + border-radius: 50%; +} +h1 { + font-size: 22px; +} +h2 { + font-size: 20px; +} ``` -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Lue **[Listojen renderöinti](/learn/rendering-lists)** oppiaksesi miten renderöidään listoja komponenteista sekä miten valitaan avain. -## Keeping components pure {/*keeping-components-pure*/} +## Komponenttien pitäminen puhtaina {/* keeping-components-pure */} -Some JavaScript functions are “pure.” A pure function: +Jotkin JavaScript funktiot ovat "puhtaita". Puhdas funktio on seuraavanlainen: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +- **Hoitaa omia asioitaan.** Se ei muuta objekteja tai muuttujia, jotka olivat olemassa ennen sen kutsumista. +- **Same inputs, same output.** Kun annetaan samat syötteet, puhtaan funktion tulisi aina palauttaa sama tulos. -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: +Tiukasti kirjoittamalla vain puhtaita komponentteja, voit välttää kokonaisen kokoelman hämmentäviä bugeja ja ennalta arvaamatonta toimintaa koodipohjan kasvaessa. Tässä on esimerkki epäpuhtaasta komponentista: @@ -477,7 +473,7 @@ By strictly only writing your components as pure functions, you can avoid an ent let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Huono: muuttaa olemassa olevaa muuttujaa! guest = guest + 1; return

    Tea cup for guest #{guest}

    ; } @@ -489,18 +485,18 @@ export default function TeaSet() { - ) + ); } ```     -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Voit tehdä tästä komponentista puhtaan antamalla sille propin olemassa olevan muuttujan muuttamisen sijaan: ```js -function Cup({ guest }) { +function Cup({guest}) { return

    Tea cup for guest #{guest}

    ; } @@ -519,12 +515,12 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Lue **[Komponenttien pitäminen puhtaana](/learn/keeping-components-pure)** oppiaksesi miten kirjoitetaan puhtaita, ennalta-arvattavia komponentteja. -## What's next? {/*whats-next*/} +## Mitä seuraavaksi? {/* whats-next */} -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Siirry seuraavaksi [Ensimmäinen komponenttisi](/learn/your-first-component) lukeaksesi tämän luvun sivu kerrallaan! -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)? +Tai, jos aiheet ovat jo tuttuja, mikset lukisi [Interaktiivisuuden lisääminen](/learn/adding-interactivity) lukua? From 81b9b70330d28208fa6b18d1fbce488ef6ee2453 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 16:15:58 +0300 Subject: [PATCH 10/80] Translate menu --- beta/src/sidebarLearn.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 8e37bf5ac..16356621b 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -30,7 +30,7 @@ ] }, { - "title": "Quick Start", + "title": "Pika-aloitus", "path": "/learn", "routes": [ { @@ -40,40 +40,40 @@ ] }, { - "title": "Describing the UI", + "title": "Käyttöliittymän kuvaus", "tags": [], "path": "/learn/describing-the-ui", "routes": [ { - "title": "Your First Component", + "title": "Ensimmäinen komponenttisi", "path": "/learn/your-first-component" }, { - "title": "Importing and Exporting Components", + "title": "Komponenttien tuonti ja vienti", "path": "/learn/importing-and-exporting-components" }, { - "title": "Writing Markup with JSX", + "title": "Merkintäkoodin kirjoittaminen JSX:llä", "path": "/learn/writing-markup-with-jsx" }, { - "title": "JavaScript in JSX with Curly Braces", + "title": "JavaScriptia JSX:ssa aaltosulkeilla", "path": "/learn/javascript-in-jsx-with-curly-braces" }, { - "title": "Passing Props to a Component", + "title": "Proppien välittäminen komponenteille", "path": "/learn/passing-props-to-a-component" }, { - "title": "Conditional Rendering", + "title": "Ehdollinen renderöinti", "path": "/learn/conditional-rendering" }, { - "title": "Rendering Lists", + "title": "Listojen renderöinti", "path": "/learn/rendering-lists" }, { - "title": "Keeping Components Pure", + "title": "Komponenttien pitäminen puhtaina", "path": "/learn/keeping-components-pure" } ] From b7c6f7c0531744e9d4715eab8df456f6c93bd688 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Sat, 7 May 2022 17:15:53 +0300 Subject: [PATCH 11/80] Translate Adding interactivity --- beta/GLOSSARY.md | 6 +- beta/src/pages/learn/adding-interactivity.md | 607 ++++++++++--------- 2 files changed, 319 insertions(+), 294 deletions(-) diff --git a/beta/GLOSSARY.md b/beta/GLOSSARY.md index 3b02c4f4c..aec187289 100644 --- a/beta/GLOSSARY.md +++ b/beta/GLOSSARY.md @@ -2,15 +2,19 @@ ## React specific -- **React hook**: React hookki +- **React hook**: React hookki, koukku - **props**: proppi, propit - **pure component**: puhdas komponentti ## General +- **trigger**: triggeröinti - **export**: exportata, viedä - **import**: importata, tuoda - **build tool**: käännöstyökalu +- **setter function**: setter funktio. (Asetin kuulostaa tyhmältä) +- **hover**: (as in a user hovering over a button): hoverointi. (Leijuminen ei ehkä ole kovin itsestäänselvää mitä sillä tarkoitetaan.) +- **focus**: (as in a user focusing over a button): focusointi. (^) - **framework**: ohjelmistokehys - **codebase**: koodipohja - **property**: en keksinyt järkevää suomennosta, property diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md index 73b7e0597..29fbbd1f3 100644 --- a/beta/src/pages/learn/adding-interactivity.md +++ b/beta/src/pages/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: Interaktiivisuuden lisääminen --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called state. You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Jotkin asiat ruudulla päivittyvät käyttäjän syötteen mukaan. Esimerkiksi, kuvan klikkaaminen galleriassa vaihtaa aktiivista kuvaa. Reactissa ajan myötä muuttuvia tietoja kutsutaan tilaksi. Voit lisätä tilan mihin tahansa komponenttiin ja päivittää sitä tarvittaessa. Tässä luvussa opit miten kirjoitetaan komponentteja, jotka vastaavat toimintohin, päivittävät niiden tilaa sekä näyättävät eri ulostuloa ajan myötä. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +- [Miten käsitellä käyttäjä-aloitteisia tapahtumia](/learn/responding-to-events) +- [Kuinka saada komponentit "muistamaan" tiedot tilaa hyödyntämällä](/learn/state-a-components-memory) +- [Miten React päivittää käyttöliittymää kahdessa vaiheessa](/learn/render-and-commit) +- [Miksi tila ei päivity heti kun muutat sitä](/learn/state-as-a-snapshot) +- [Miten tilapäivityksiä voi lisätä jonoon](/learn/queueing-a-series-of-state-updates) +- [Miten päivittää oliota tilassa](/learn/updating-objects-in-state) +- [Miten päivittää listaa tilassa](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## Vastaaminen tapahtumiin {/* responding-to-events */} -React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +Reactissa voit lisätä tapahtumakäsittelijöitä JSX koodiin. Tapahtumakäsittelijät ovat funktioitasi, joita kutsutaan vastauksena käyttäjän toimintoihin kuten klikkaukseen, hoverointiin, focusointiin ja niin edelleen. -Built-in components like ` - + + ); } -function Button({ onClick, children }) { - return ( - - ); +function Button({onClick, children}) { + return ; } ``` ```css -button { margin-right: 10px; } +button { + margin-right: 10px; +} ```     -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Lue **[Responding to Events](/learn/responding-to-events)** oppiaksesi miten lisätä tapahtumakäsittelijöitä. -## State: a component's memory {/*state-a-components-memory*/} +## Tila: komponentin muisti {/* state-a-components-memory */} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state. +Komponenttien on usein muutettava näytön sisältöä vuorovaikutuksen seurauksena. Lomakkeeseen kirjoittaminen päivittää syöttökenttää, kuvakarusellissa "seuraava" napsauttaminen muuttaa näytettävää kuvaa, "osta"-painikkeella laitetaan tuote ostoskoriin. Komponenttien täytyy "muistaa" asioita: nykyinen syöte, nykyinen kuva, ostoskori. Reactissa tämän kaltaista komponenttikohtaista muistia kutsutaan tilaksi. -You can add state to a component with a [`useState`](/apis/usestate) Hook. Hooks are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Voit lisätä tilaa komponetteihin käyttämällä [`useState`](/apis/usestate) koukkua eli hookkia. Hookit ovat erikoisfunktioita, joilla voit käyttää Reactin ominaisuuksia komponenteissasi. Tila on yksi näistä. `useState` hookilla voit määritellä tilamuuttujan. Sille voidaan antaa alustava tila ja se palauttaa parin: nykyisen tilan, sekä setter funktion, jolla voit päivittää sitä. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Tässä näet miten kuvagalleria käyttää käyttää ja päivittää tilaa napsautuksella: ```js -import { useState } from 'react'; -import { sculptureList } from './data.js'; +import {useState} from 'react'; +import {sculptureList} from './data.js'; export default function Gallery() { const [index, setIndex] = useState(0); @@ -106,9 +100,7 @@ export default function Gallery() { let sculpture = sculptureList[index]; return ( <> - +

    {sculpture.name} by {sculpture.artist} @@ -120,99 +112,127 @@ export default function Gallery() { {showMore ? 'Hide' : 'Show'} details {showMore &&

    {sculpture.description}

    } - {sculpture.alt} + {sculpture.alt} ); } ``` ```js data.js -export const sculptureList = [{ - name: 'Homenaje a la Neurocirugía', - artist: 'Marta Colvin Andrade', - description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' -}, { - name: 'Floralis Genérica', - artist: 'Eduardo Catalano', - description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' -}, { - name: 'Eternal Presence', - artist: 'John Woodrow Wilson', - description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' -}, { - name: 'Moai', - artist: 'Unknown Artist', - description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' -}, { - name: 'Blue Nana', - artist: 'Niki de Saint Phalle', - description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' -}, { - name: 'Ultimate Form', - artist: 'Barbara Hepworth', - description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' -}, { - name: 'Cavaliere', - artist: 'Lamidi Olonade Fakeye', - description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' -}, { - name: 'Big Bellies', - artist: 'Alina Szapocznikow', - description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' -}, { - name: 'Terracotta Army', - artist: 'Unknown Artist', - description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' -}, { - name: 'Lunar Landscape', - artist: 'Louise Nevelson', - description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' -}, { - name: 'Aureole', - artist: 'Ranjani Shettar', - description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' -}, { - name: 'Hippos', - artist: 'Taipei Zoo', - description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' -}]; +export const sculptureList = [ + { + name: 'Homenaje a la Neurocirugía', + artist: 'Marta Colvin Andrade', + description: + 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://i.imgur.com/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.', + }, + { + name: 'Floralis Genérica', + artist: 'Eduardo Catalano', + description: + 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://i.imgur.com/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.', + }, + { + name: 'Eternal Presence', + artist: 'John Woodrow Wilson', + description: + 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://i.imgur.com/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.', + }, + { + name: 'Moai', + artist: 'Unknown Artist', + description: + 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://i.imgur.com/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.', + }, + { + name: 'Blue Nana', + artist: 'Niki de Saint Phalle', + description: + 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://i.imgur.com/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.', + }, + { + name: 'Ultimate Form', + artist: 'Barbara Hepworth', + description: + 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://i.imgur.com/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.', + }, + { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: + "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://i.imgur.com/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.', + }, + { + name: 'Big Bellies', + artist: 'Alina Szapocznikow', + description: + 'Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.', + url: 'https://i.imgur.com/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.', + }, + { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: + 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://i.imgur.com/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.', + }, + { + name: 'Lunar Landscape', + artist: 'Louise Nevelson', + description: + 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://i.imgur.com/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.', + }, + { + name: 'Aureole', + artist: 'Ranjani Shettar', + description: + 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://i.imgur.com/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.', + }, + { + name: 'Hippos', + artist: 'Taipei Zoo', + description: + 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://i.imgur.com/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.', + }, +]; ``` ```css -h2 { margin-top: 10px; margin-bottom: 0; } +h2 { + margin-top: 10px; + margin-bottom: 0; +} h3 { - margin-top: 5px; - font-weight: normal; - font-size: 100%; + margin-top: 5px; + font-weight: normal; + font-size: 100%; +} +img { + width: 120px; + height: 120px; } -img { width: 120px; height: 120px; } button { display: block; margin-top: 10px; @@ -224,103 +244,116 @@ button { -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Lue **[Tila: Komponentin muisti](/learn/state-a-components-memory)** oppiaksesi miten arvo muistetaan ja päivitetään vuorovaikutuksen vuoksi. -## Render and commit {/*render-and-commit*/} +## Renderöinti ja kommitointi {/* render-and-commit */} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Ennen kuin komponenttisi näytetään ruudlla, Reactin täytyy renderöidä ne. Tämän prosessin vaiheiden ymmärtäminen auttaa sinua miettimään miten koodiasi suoritetaan ja selittämään sen toimintaa. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Kuvittele, että komponettisi ovat kokkeja keittiössä, kasaten maukkaita aterioita ainesosista. Tässä skenaariossa React on tarjoilija joka laittaa ylös asiakkaiden tilaukset sekä vie tilaukset heille. Tässä käyttöliittymän pyyntö- ja vientiprosessissa on kolme vaihetta: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (getting the order from the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Triggeröidään** renderöinti (viedään ruokalijan tilaus keittiölle) +2. **Renderöidään** komponentti (saadaan tilaus keittiöltä) +3. **Kommitoidaan** DOM:iin (asetetaan tilaus pöydälle) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Lue **[Render and Commit](/learn/render-and-commit)** oppiaksesi käyttöliittymäpäivityksen elämänkaaren. -## State as a snapshot {/*state-as-a-snapshot*/} +## Tila tilannekuvana {/* state-as-a-snapshot */} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +Toisin kuin tavalliset JavaScript muuttujat, Reactin tila käyttäytyy enemmän kuin tilannekuva. Tilan muuttaminen ei muuta tilamuuttujaa joka sinulla jo on, vaan sen sijaan triggeröi uudelleenrenderöinnin. Tämä saattaa olla yllättävää aluksi! ```js -console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +console.log(count); // 0 +setCount(count + 1); // Pyydä uudelleenrenderöinti arvolla 1 +console.log(count); // Silti 0! ``` -React works this way to help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +React toimii tällä tavalla auttaakseen sinua välttämään hienovaraisia vikoja. Tässä on pieni chätti-sovellus. Veikkaa mitä tapahtuu kun painat "Lähetä" ensin ja _sitten_ muutat vastaanottajan Jaakoksi. Kenen nimi tulee näkymään `alert`:ssa viiden sekuntin jälkeen? ```js -import { useState } from 'react'; +import {useState} from 'react'; export default function Form() { - const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [to, setTo] = useState('Liisa'); + const [message, setMessage] = useState('Hei'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Sanoit ${message} henkilölle ${to}`); }, 5000); } return (