react 18

Author: mluukkai

src/components/layout.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 class Layout extends Component {
   state = {
     siteLanguage: 'fi',
+    visible: true,
   };
 
   componentDidMount() {
@@ -18,18 +19,85 @@ class Layout extends Component {
         : window.location.pathname.indexOf('/zh') > -1
         ? 'zh'
         : 'fi';
+
     this.setState({
       siteLanguage: siteLanguage,
+      visible: true,
+    });
+  }
+
+  hideNote() {
+    console.log('yes');
+    this.setState({
+      siteLanguage: this.state.siteLanguage,
+      visible: false,
     });
   }
 
   render() {
-    const { siteLanguage } = this.state;
+    const { siteLanguage, visible } = this.state;
+
+    const style = {
+      padding: 10,
+      borderStyle: 'solid',
+      borderWidth: 2,
+      marginLeft: 80,
+      marginRight: 80,
+      position: 'sticky',
+      top: 100,
+      left: 40,
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      alignContent: 'space-between',
+      backgroundColor: '#E8E8E8',
+      zIndex: 2147483647,
+    };
+
+    const linkStyle = {
+      color: 'grey',
+      textDecoration: 'underline',
+    };
+
+    const textStyle = {
+      flex: 90,
+    };
+
+    const buttonDiv = {
+      flex: 10,
+      textAlign: 'right',
+    };
+
+    const buttonStyle = {
+      outline: 'none',
+      backgroundColor: 'transparent',
+      border: 'none',
+    };
+
+    console.log(this.state);
 
     return (
       <div className="main-wrapper">
         <Header lang={siteLanguage} />
 
+        {visible && (
+          <div style={style}>
+            <div stule={textStyle}>
+              Note that some libraries might not work with the new React version
+              18. If you run in trouble with library compatibility, read{' '}
+              <a href="/en/part1/a_more_complex_state_debugging_react_apps#a-note-on-react-version">
+                <span style={linkStyle}>this</span>
+              </a>
+              .
+            </div>
+            <div style={buttonDiv}>
+              <button style={buttonStyle} onClick={() => this.hideNote()}>
+                x
+              </button>
+            </div>
+          </div>
+        )}
+
         {this.props.children}
       </div>
     );

src/content/1/en/part1d.md

@@ -7,6 +7,30 @@ lang: en
 
 <div class="content">
 
+### A note on React version
+
+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.
+
+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>pacgage.json</i> as follows:
+
+```js
+{
+  "dependencies": {
+    "react": "^17.0.2", // highlight-line
+    "react-dom": "^17.0.2", // highlight-line
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  // ...
+}
+```
+
+After the change is made, reinstall dependencies by running
+
+```js
+npm install
+```
+
 ### Complex state
 
 In our previous example the application state was simple as it was comprised of a single integer. What if our application requires a more complex state?
@@ -1013,7 +1037,8 @@ You may find the following links useful:
 </div>
 
 <div class="tasks">
-  <h3>Exercises  1.6.-1.14.</h3>
+
+<h3>Exercises  1.6.-1.14.</h3>
 
 Submit your solutions to the exercises by first pushing your code to GitHub and then marking the completed exercises into the [exercise submission system](https://studies.cs.helsinki.fi/stats/courses/fullstackopen).
 
@@ -1029,7 +1054,7 @@ In some situations you may also have to run the command below from the root of t
 rm -rf node_modules/ && npm i
 ```
 
-  <h4> 1.6: unicafe step1</h4>
+<h4> 1.6: unicafe step1</h4>
 
 Like most companies, [Unicafe](https://www.unicafe.fi/#/9/4) collects feedback from its customers. Your task is to implement a web application for collecting customer feedback. There are only three options for feedback: <i>good</i>, <i>neutral</i>, and <i>bad</i>.