lesson about react hooks

src/content/lesson/react-hooks-explained.md

@@ -0,0 +1,144 @@
+---
+title: "React Hooks Explained"
+subtitle: "Hooks are the new way you can create React components without having to use Classes"
+cover: "https://ucarecdn.com/84c4d84c-51b9-4906-a572-71cc07ecfc8c/"
+textColor: "white"
+date: "2019-10-03"
+authors: ['alesanchezr']
+status: "draft"
+tags: ["reactjs"]
+---
+
+## Why hooks?
+
+Functional components are amazing because they are simple, perform fast and require little code, but they are limited.
+
+Hooks come in to enhance your components and give them super powers!
+
+### My components need super powers?
+
+In general, using props is enough to create an amazing component, but some times it's you need more, these are some really usefull examples for using a hooks:
+
+1. If you want to open or close a modal or dialog (use the **useState** hook).
+2. If you want to fetch some data only at the beginning of the program execution (use the **useEffect** hook).
+3. If you want to share information within all the components (use the **useContext** hook).
+
+As you become more experienced you will understand better when do you need a hook, if you don't think you need them, DON'T use them!!! The less the better!
+
+### All applications need at least one <strong>useState</strong> and one <strong>useEffect</strong>
+
+There are many hooks, but you will always use at least these two:
+
+## The `useState` hook:
+
+The most important hook, almost unavoidable! The <strong>useState</strong> helps you initialize a variable and change its value over time without the need of a parent components, this is how you have to use it:
+```jsx
+//       variable name      setter name               initial value (any value)
+const [ mySuperVariable, mySuperFunction ] = useState(          null        );
+```
+
+Basically mySuperVariable will be initialized with `null` and then you will be able to re-set its value by calling `mySuperFunction` like this:
+
+```jsx
+// here we are re-setting the value of mySuperVariable = 'hello' when the use clicks on a button
+<button onClick={() => mySuperFunction('hello')}></button>
+```
+
+### Possible uses for </strong>the ` useState` hook</strong>
+
+|  |  |  |
+| ----------- | ---- |
+| 1. Counting: Displaying the number of likes on the screen and being able to increase or decrease when the user clicks, [click here for demo](https://codesandbox.io/s/wild-pond-soxu8?fontsize=14) | ![React Counter with Hooks](https://ucarecdn.com/af747595-cf02-42ca-a6bf-00c0c512ef40/reactcounterhooks.gif) |
+| 2. Timer/Clock: You can use the system time to show the current time on the screen, but the time changes all the time, that is why you have to store it on a state variable, [click here for demo](https://codesandbox.io/s/hungry-paper-kkh7g?fontsize=14) | ![Building a timer with react hooks](https://ucarecdn.com/763d40a2-d4ea-4cf5-a2cd-dc777f71efcb/timerreacthooks.gif) |
+| 3. Showing an input on the screen: The best practice to get the content from any input is by storing it on a state variable, this is colled "Controlled Input", [click here for a controlled input example](https://codesandbox.io/s/brave-albattani-irhy7?fontsize=14) | ![Controlled Input With React](https://ucarecdn.com/d1347307-d440-464f-a793-7a457e9903ad/controlledinputreact.gif) |
+| 4. Opening/Closing (show/hide): A typical use case is having a dialog that asks for a question or maybe some newsletter signup form, [click here for the example](https://codesandbox.io/s/modal-window-component-with-hooks-vb6de?fontsize=14). | ![Modal Window using react hooks](https://ucarecdn.com/03d2c2c4-f510-4088-9bb0-1665dbfe8a68/modalwindowhooks.gif) |
+| 5. Thousans of other possible applications. | |
+
+Let's explain this hook with a small Modal window example, here is the live code:
+
+<iframe src="https://codesandbox.io/embed/goofy-sutherland-vb6de?fontsize=14" title="Modal with hooks" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+To implement a "Modal Window" we decided to create a hooked variable called `opened` that is `true` if the modal window has to be shown to the user.
+
+If the user clicks on "close" we simply use the hook function `setOpened` to change the value of `opened` to false.
+
+## The `useEffect` hook:
+
+![useEffect hook for the component lifecycle](https://ucarecdn.com/945ae0a2-2495-4955-9e9a-46fdd3efc682/componentlifecyclehooks.png)
+
+Use efect is another amazing hook that you will probably have to use in almost every react application at least once.
+
+You use it if you want execute some code after the component renders, for example:
+
+#### 1) After the component renders for the first time (like the good old componentDidMount).
+```jsx
+const MyComponent = () => {
+    useEffect(() =>
+
+        // whatever you code here will execute only after the first time the component renders
+
+    , []);// <------ PLESE NOTICE THE EMPTY ARRAY
+
+
+    return <Some HTML>;
+}
+```
+[[info]]
+| :point_up: Please notice the `[]` as the secong parameter of the useEffect.
+
+#### 2) Every time (or some times) after the component re-renders.
+```jsx
+const MyComponent = () => {
+    useEffect(() =>
+        // this will run every time the component re-renders
+        if(some_condition){
+            //this will run only if some_condition is true
+        }
+    );// <------ PLESE NOTICE THE EMPTY ARRAY IS GONE!
+
+    return <Some HTML>;
+}
+```
+[[info]]
+| :point_up: This useEffect does not have an empty array `[]` as second parameter.
+
+#### 3) When the component will unmount or stop being rendered (like the good old componentWillUnmount function).
+```jsx
+const MyComponent = () => {
+    useEffect(() =>
+        // this will run only the first time the component renders.
+        return () => {
+            // this will run only right before the component unmounts
+        }
+    ,[]);// <------ PLESE NOTICE THE EMPTY ARRAY
+
+    return <Some HTML>;
+}
+```
+
+## Building a Todo's List Using just `useState` and `useEffect` Hooks
+
+<p align="center">
+    <img src="https://ucarecdn.com/41f4a2be-380f-47af-acab-d479acf80921/todolisthooks.gif">
+</p>
+
+For example, lets say I'm building a Todo's list, and I have to load the list of tasks from an API, I will ahve to fetch the information right after the component renders for the first time:
+
+```jsx
+const Todos = (props) => {
+    //initialize the tasks variable to an empty array and hook it to setTasks function
+    const [ tasks, setTasks] = useState([]);
+
+    //this function useEffect will run only one time, when the component is finally lodaded the first time.
+    useEffect(() =>
+        // here i fetch my todos from the API
+        fetch('https://assets.breatheco.de/apis/fake/todos/user/alesanchezr')
+            .then(r => r.json())
+            .then(data => setTasks(data)) //here it re-set the variable tasks with the incoming data
+    , []);
+
+    return <ul>{tasks.map(t => <li>{t.label}</li>)}</ul>;
+}
+```
+[[demo]]
+| Review the code in deph and live demo by [clicking here](https://codesandbox.io/s/xenodochial-varahamihira-egh86?fontsize=14)

src/scss/single-post.scss

@@ -72,8 +72,9 @@
             height: 100%;
             background: #9cc6f5;
         }
-        
+
     }
+    ul li{ list-style: initial; }
 }
 
 td, th{