|
7 | 7 |
|
8 | 8 | <div class="content"> |
9 | 9 |
|
10 | | -Alamme nyt tutustua kurssin ehkä tärkeimpään teemaan, [React](https://reactjs.org/)-kirjastoon. Tehdään heti yksinkertainen React-sovellus ja tutustutaan samalla Reactin peruskäsitteistöön. |
| 10 | +Alamme nyt tutustua kurssin ehkä tärkeimpään teemaan, [React](https://react.dev/)-kirjastoon. Tehdään heti yksinkertainen React-sovellus ja tutustutaan samalla Reactin peruskäsitteistöön. |
11 | 11 |
|
12 | 12 | Ehdottomasti helpoin tapa päästä alkuun on [create-react-app](https://github.com/facebookincubator/create-react-app)-nimisen työkalun käyttö. <i>create-react-app</i> on mahdollista asentaa omalle koneelle, mutta asennukseen ei ole tarvetta jos Noden mukana asentunut <i>npm</i>-työkalu on versioltaan vähintään <i>5.3</i>. Tällöin npm:n mukana asentuu komento </i>npx</i>, joka mahdollistaa create-react-app:in käytön asentamatta sitä erikseen. Npm:n version saa selville komennolla <em>npm -v</em>. |
13 | 13 |
|
@@ -59,7 +59,7 @@ Tiedostot <i>App.css</i>, <i>App.test.js</i>, <i>index.css</i>, <i>logo.svg</i>, |
59 | 59 |
|
60 | 60 | ### Komponentti |
61 | 61 |
|
62 | | -Tiedosto <i>App.js</i> määrittelee nyt React-[komponentin](https://reactjs.org/docs/components-and-props.html) nimeltään <i>App</i>. Tiedoston <i>index.js</i> viimeisen rivin komento |
| 62 | +Tiedosto <i>App.js</i> määrittelee nyt React-[komponentin](https://react.dev/learn/your-first-component) nimeltään <i>App</i>. Tiedoston <i>index.js</i> viimeisen rivin komento |
63 | 63 |
|
64 | 64 | ```js |
65 | 65 | ReactDOM.createRoot(document.getElementById('root')).render(<App />) |
@@ -189,7 +189,7 @@ Muistitko pitää konsolin auki? Mitä sinne tulostui? |
189 | 189 |
|
190 | 190 | ### JSX |
191 | 191 |
|
192 | | -Näyttää siltä, että React-komponentti palauttaa HTML-koodia. Näin ei kuitenkaan ole. React-komponenttien ulkoasu kirjoitetaan yleensä [JSX](https://reactjs.org/docs/introducing-jsx.html):ää käyttäen. Vaikka JSX näyttää HTML:ltä, kyseessä on kuitenkin tapa kirjoittaa JavaScriptia. React-komponenttien palauttama JSX käännetään konepellin alla JavaScriptiksi. |
| 192 | +Näyttää siltä, että React-komponentti palauttaa HTML-koodia. Näin ei kuitenkaan ole. React-komponenttien ulkoasu kirjoitetaan yleensä [JSX](https://react.dev/learn/writing-markup-with-jsx):ää käyttäen. Vaikka JSX näyttää HTML:ltä, kyseessä on kuitenkin tapa kirjoittaa JavaScriptia. React-komponenttien palauttama JSX käännetään konepellin alla JavaScriptiksi. |
193 | 193 |
|
194 | 194 | Käännösvaiheen jälkeen komponentin määrittelevä koodi näyttää seuraavalta: |
195 | 195 |
|
@@ -277,7 +277,7 @@ Vahva konventio on myös se, että sovelluksen ylimpänä oleva <i>juurikomponen |
277 | 277 |
|
278 | 278 | ### props: tiedonvälitys komponenttien välillä |
279 | 279 |
|
280 | | -Komponenteille on mahdollista välittää dataa [propsien](https://reactjs.org/docs/components-and-props.html) avulla. |
| 280 | +Komponenteille on mahdollista välittää dataa [propsien](https://react.dev/learn/passing-props-to-a-component) avulla. |
281 | 281 |
|
282 | 282 | Muutetaan komponenttia <i>Hello</i> seuraavasti: |
283 | 283 |
|
@@ -416,7 +416,7 @@ const App = () => { |
416 | 416 |
|
417 | 417 | Määriteltäessä sovelluksen juurikomponenttia tämä ei kuitenkaan ole järkevää, ja taulukko näyttää koodissakin pahalta. |
418 | 418 |
|
419 | | -Juurielementin pakollisesta käytöstä on se seuraus, että sovelluksen DOM-puuhun tulee "ylimääräisiä" div-elementtejä. Tämä on mahdollista välttää käyttämällä [fragmentteja](https://reactjs.org/docs/fragments.html#short-syntax), eli ympäröimällä komponentin palauttamat elementit tyhjällä elementillä: |
| 419 | +Juurielementin pakollisesta käytöstä on se seuraus, että sovelluksen DOM-puuhun tulee "ylimääräisiä" div-elementtejä. Tämä on mahdollista välttää käyttämällä [fragmentteja](https://react.dev/reference/react/Fragment), eli ympäröimällä komponentin palauttamat elementit tyhjällä elementillä: |
420 | 420 |
|
421 | 421 | ```js |
422 | 422 | const App = () => { |
|
0 commit comments