r18 fixes

Author: mluukkai

src/content/1/fi/osa1d.md

@@ -10,9 +10,9 @@ lang: fi
 
 ### Huomio Reactin versioista
 
-Version 18 of React was released late March 2022. The code in material should work as it is with the new React version. However, some libraries might not yet be compatible with React 18. At the moment of writing (4th April) at least the Apollo client used in [part 8](/en/part8) does not yet work with most recent React.
+Reactin uusin versio 18 julkaistiin maaliskuun 2022 lopussa. Materiaalin koodin pitäisi toimia sellaisenaan uudenkin Reactin kanssa poislukien [osassa 8](/osa8) käytettävää Apollo Clientiä. 
 
-In case you end up in a situation where your application breaks because of library compatibly problems, <i>downgrade</i> to the older React by changing the file <i>package.json</i> as follows:
+Jos törmäät ongelmiin voit downgreidata projektin vanhempaan Reactiin muuttamalla tiedostoa  <i>package.json</i> seuraavasti:
 
 ```js
 {
@@ -26,13 +26,13 @@ In case you end up in a situation where your application breaks because of libra
 }
 ```
 
-After the change is made, reinstall dependencies by running
+ja asentamalla muutoksen jälkeen riippuvuudet uudelleen suorittamalla komento
 
 ```js
 npm install
 ```
 
-Note that also the file <i>index.js</i> needs to be changed a bit. For React 17 it looks like
+Huomaa, että myös tiedosto <i>index.js</i> eroaa hieman eri Reactin versiossa. React 17:lla se näyttää seuraavalta
 
 ```js
 import ReactDOM from 'react-dom'
@@ -41,7 +41,7 @@ import App from './App'
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
-but for React 18 the correct form is
+React 18:aa käyttäessä tiedoston muoto on seuraava:
 
 ```js
 import React from 'react'

src/content/5/en/part5b.md

@@ -374,10 +374,8 @@ const App = () => {
 }
 ```
 
-<!-- Vastaava muutos voitaisiin tehdä myös kirjautumislomakkeelle, mutta jätämme sen vapaaehtoiseksi harjoitustehtäväksi. -->
 We could do the same for the log in form, but we'll leave that for an optional exercise. 
 
-<!-- Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [githubissa](https://github.com/fullstack-hy2020/part2-notes/tree/part5-5), branchissa <i>part5-5</i>. -->
 The application code can be found from [github](https://github.com/fullstack-hy2020/part2-notes/tree/part5-5),
 branch <i>part5-5</i>.
 

src/content/6/en/part6a.md

@@ -179,7 +179,9 @@ would cause the following to be printed
 The code of our counter application is the following. All of the code has been written in the same file, so <i>store</i> is straight available for the React-code. We will get to know better ways to structure React/Redux-code later.
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
 import { createStore } from 'redux'
 
 const counterReducer = (state = 0, action) => {
@@ -223,7 +225,7 @@ const App = () => {
 }
 
 const renderApp = () => {
-  ReactDOM.render(<App />, document.getElementById('root'))
+  ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 }
 
 renderApp()
@@ -829,15 +831,20 @@ Next we move the _App_ component into its own file _App.js_. Let's see how this
 _index.js_ becomes:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
+
 import { createStore } from 'redux'
 import { Provider } from 'react-redux' // highlight-line
 import App from './App'
 import noteReducer from './reducers/noteReducer'
 
 const store = createStore(noteReducer)
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>  // highlight-line
     <App />
   </Provider>,  // highlight-line

src/content/6/en/part6b.md

@@ -144,7 +144,8 @@ We can create the actual reducer for our application by combining the two existi
 Let's define the combined reducer in the <i>index.js</i> file:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { createStore, combineReducers } from 'redux' // highlight-line
 import { Provider } from 'react-redux' 
 import App from './App'
@@ -163,14 +164,13 @@ const store = createStore(reducer)
 
 console.log(store.getState())
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   /*
   <Provider store={store}>
     <App />
   </Provider>,
   */
-  <div />,
-  document.getElementById('root')
+  <div />
 )
 ```
 
@@ -239,7 +239,7 @@ Is there a bug in our code? No. The combined reducer works in such a way that ev
 Let's finish the application so that it uses the combined reducer. We start by changing the rendering of the application and hooking up the store to the application in the <i>index.js</i> file:
 
 ```js
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,
@@ -251,8 +251,6 @@ Next, let's fix a bug that is caused by the code expecting the application store
 
 ![](../../images/6/7ea.png)
 
-
-<!-- Korjaus on helppo. Koska muistiinpanot ovat nyt storen kentässä <i>notes</i>, riittää pieni muutos selektorifunktioon: -->
 It's an easy fix. Because the notes are in the store's field <i>notes</i>, we only have to make a little change to the selector function:
 
 ```js
@@ -414,7 +412,8 @@ npm install @reduxjs/toolkit
 Next, open the <i>index.js</i> file which currently creates the Redux store. Instead of Redux's <em>createStore</em> function, let's create the store using Redux Toolkit's [configureStore](https://redux-toolkit.js.org/api/configureStore) function:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit' // highlight-line
 import App from './App'
@@ -433,7 +432,7 @@ const store = configureStore({
 
 console.log(store.getState())
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,

src/content/6/en/part6c.md

@@ -570,12 +570,13 @@ export default store
 After the changes, the content of the <i>index.js</i> is the following:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux' 
 import store from './store' // highlight-line
 import App from './App'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,

src/content/6/fi/osa6a.md

@@ -176,7 +176,9 @@ tulostaisi
 Laskurisovelluksemme koodi on seuraavassa. Kaikki koodi on kirjoitettu samaan tiedostoon, joten <i>store</i> on suoraan React-koodin käytettävissä. Tutustumme React/Redux-koodin parempiin strukturointitapoihin myöhemmin.
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
 import { createStore } from 'redux'
 
 const counterReducer = (state = 0, action) => {
@@ -220,7 +222,7 @@ const App = () => {
 }
 
 const renderApp = () => {
-  ReactDOM.render(<App />, document.getElementById('root'))
+  ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 }
 
 renderApp()
@@ -809,19 +811,23 @@ Eriytetään komponentti _App_ tiedostoon _App.js_. Tarkastellaan kuitenkin ensi
 Tiedosto _index.js_ näyttää seuraavalta:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
+
 import { createStore } from 'redux'
 import { Provider } from 'react-redux' // highlight-line
 import App from './App'
 import noteReducer from './reducers/noteReducer'
 
 const store = createStore(noteReducer)
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>  // highlight-line
     <App />
-  </Provider>,  // highlight-line
-  document.getElementById('root')
+  </Provider>  // highlight-line
 )
 ```
 

src/content/6/fi/osa6b.md

@@ -135,7 +135,8 @@ Saamme nyt muodostettua varsinaisen reducerin yhdistämällä kaksi olemassaolev
 Määritellään yhdistetty reducer tiedostossa <i>index.js</i>:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { createStore, combineReducers } from 'redux' // highlight-line
 import { Provider } from 'react-redux' 
 import App from './App'
@@ -154,7 +155,7 @@ const store = createStore(reducer)
 
 console.log(store.getState())
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   /*
   <Provider store={store}>
     <App />
@@ -219,7 +220,7 @@ Onko koodissa bugi? Ei. Yhdistetty reducer toimii siten, että jokainen <i>actio
 Viimeistellään nyt sovellus käyttämään yhdistettyä reduceria, eli palautetaan tiedostossa <i>index.js</i> suoritettava renderöinti seuravaan muotoon:
 
 ```js
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,
@@ -389,7 +390,8 @@ npm install @reduxjs/toolkit
 Avataan sen jälkeen <i>index.js</i>-tiedosto, jossa nykyinen Redux-store luodaan. Käytetään storen luonnissa Reduxin <em>createStore</em>-funktion sijaan Redux Toolkitin [configureStore](https://redux-toolkit.js.org/api/configureStore)-funktiota:
 
 ```js
-import ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit' // highlight-line
 import App from './App'
@@ -408,7 +410,7 @@ const store = configureStore({
 
 console.log(store.getState())
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,

src/content/6/fi/osa6c.md

@@ -569,7 +569,7 @@ import { Provider } from 'react-redux'
 import store from './store' // highlight-line
 import App from './App'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>,

src/content/7/en/part7a.md

@@ -34,8 +34,8 @@ The navigation bar and an application containing multiple views is very easy to
 Here is one way:
 
 ```js
-import { useState } from 'react'
-import ReactDOM from 'react-dom'
+import React, { useState }  from 'react'
+import ReactDOM from 'react-dom/client'
 
 const Home = () => (
   <div> <h2>TKTL notes app</h2> </div>
@@ -90,7 +90,7 @@ const App = () => {
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')).render(<App />, document.getElementById('root'))
 ```
 
 Each view is implemented as its own component. We store the view component information in the application state called <i>page</i>. This information tells us which component, representing a view, should be shown below the menu bar.
@@ -426,7 +426,7 @@ One way to do this would be to use React Router's [useMatch](https://reactrouter
 It is not possible to use the <i>useMatch</i> hook in the component which defines the routed part of the application. Let's move the use of the _Router_ components from _App_:
 
 ```js
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Router> // highlight-line
     <App />
   </Router>, // highlight-line

src/content/7/en/part7d.md

@@ -205,10 +205,10 @@ And let's turn our application into a React application by adding the familiar d
 
 ```js
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')).render(<App />, document.getElementById('root'))
 ```
 
 We will also make the following changes to the <i>App.js</i> file: