add hook version

Author: alexlobera

README.md

@@ -1,13 +1,26 @@
-## ReactJS Fundamentals - Thinking in React
+## React Fundamentals / Thinking in React
 
-The goal of this exercise is to learn how to think in React.
+The learning objectives of this exercise are:
+- Understand the difference between declarative and imperative programming
+- Learn how to breaking down your UI into components
+- Comprehend what's state, which components should hold it, and when to lift it up.
+
+## Teaching method
+
+1. Collaborative learning environment & pair programming.
+   - Rooms with small groups
+   - Work together, discuss, help each other.
+2. We try to foster critical thinking.
+   - ⬆️ Discovery ⬇️ Instruction
+3. We don’t explain everything you need to know before the exercise:
+   - Learn by doing (and teaching ;)
+   - The exercise is meant to help you build a mental model
 
 ## Prerequisites
 
 You need to be comfortable writing JavaScript and HTML to do this exercise. The exercise uses the following ES6 & ES5 features:
 
 - Module system ([import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)/ [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-- [Class syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) (extends, constructor)
 - [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
 - [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
 
@@ -26,49 +39,53 @@ npm install
 npm start
 ```
 
-## Exercise
+## 🥑 Before we start the exercise
 
-Before you start, there are two types of components [Function Components and Class Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components).
+Before you start, we are going to use the [useState hook](https://reactjs.org/docs/hooks-state.html) in this exercise. 
 
 ```javascript
-function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
 }
 ```
 
-```javascript
-class Welcome extends React.Component {
-  render() {
-    return <h1>Hello, {this.props.name}</h1>;
-  }
-}
-```
-
-Try to use a Function component if the component doesn't have state, you'll need to refactor code a few times during the next exercise 😁
+The goal of this exercise is to understand what's state and how to reason about it. The goal of this exercise is not to learn how the useState hook works. How we store the state is an implementation detail. The principles you'll learn in this exercise can be applied to classes & this.setState, hooks, and some other state management libraries. 
 
-### Tasks
+## 🤸‍♀️ Exercise
 
 - [ ] 1. Refactor the “about” and “footer” sections by creating a function component for each.
       Make sure everything works.
 
 - [ ] 2. Refactor the navbar by creating a Function Component.
-      Pass the dependencies (`this.toggleMenu` in this case) via props.
+      Pass the dependencies (`toggleMenu` in this case) via props.
       Make sure everything works by clicking on the "Training" button at the top right of the screen.
 
 - [ ] 3. Refactor the books section by creating a function component and pass the dependencies via props.
       Make sure everything works.
 
 - [ ] 4. Is there any state in app that should be in the Books component?
-      Refactor `<Books>` if appropriate. Should `<Books>` be a Function Component or a Class Component now?
+      Refactor `<Books>` if appropriate. 
 
 - [ ] 5. Break `<Books>` down into `<BookList>` and `<BookFilter>`
 
-- [ ] 6. What do you think it would make sense to componentize next?
-      Are there any parts on that view that you can reuse? Try to explain to a mentor what you want to refactor before you code 😁
+## 🏋️‍♀️ Bonus exercise
+- What do you think it would make sense to componentize next? Are there any parts on that view that you can reuse? Hint, replace the `<a>` with your `<Link>` component. Who are the children of the `Link` component? The `Link` component should receive a prop called `to` that becomes the href of the `<a href={to} ...`. Try to use the prop called `children` for the text displayed inside the anchor.
+- Can we move the `isMenuOpen` state inside the menu? Does it conflict with the idea of "lifting the state up".
+- If you look at the [React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) when you open and close the menu, is the whole app being rendered? If so, how can we avoid that and still lift the state up?
 
 ## Articles and links
 
-
 - [Lecture: Introduction to Thinking in React](https://reactgraphql.academy/react/introduction-to-thinking-in-react/)
 - [A Beginner’s Guide to React](https://medium.com/leanjs/introduction-to-react-3000e9cbcd26)
 - [Introduction to JSX](https://reactjs.org/docs/introducing-jsx.html)

package.json

@@ -1,13 +1,13 @@
 {
   "name": "thinking-in-react",
   "dependencies": {
-    "react": "^16.2.0",
+    "react": "^16.13.1",
     "react-burger-menu": "^2.2.3",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "react-scripts": "^2.1.3",
-    "prettier": "^1.16.4"
+    "react-scripts": "^3.4.1",
+    "prettier": "^2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",