---
tags: learnyounode,
---
# Learnyounode 07 08 09(2022/02/22):

## :memo: todo list
0. 07_http_client
1. 08_http_collect
2. 09_juggling_async

### 0. 07_http_client

* http.get(URL,function(response){}) 發送 http request
* response.on("data", function(){}) 當接收到從伺服器傳回來的資料就會觸發此function
* response.setEncoding('utf-8') 設定接收物件的編碼，可用來取代 .toString()


### 1. 08_http_collect

#### 方法一
* 可以對 Stream 掛上 data、error、end 事件來監聽以取得資料來進行處理
* 掛上 data 的監聽事件回傳的內容為 Buffer 物件，可以先將 Stream 物件 setEncoding(‘utf8’)，直接將回傳內容轉成 string
* 設置一個變數將 data 事件的回傳值 += 存入
* 在 end 事件做最終的 console.log 處理

#### 方法二
使用第三方套件：concat-stream, bl (Buffer List)
<https://npmjs.com/bl>
<https://npmjs.com/concat-stream>

### 2. 09_juggling_async

#### 方法一
callback
#### 方法二
promise
簡單講解一下什麼是 ES6: https://www.fooish.com/javascript/ES6/
箭頭函式：https://www.fooish.com/javascript/ES6/arrow-functions.html
Promise講義：
https://realdennis.medium.com/callback-hell-%E8%88%87-promise-%E4%B8%80%E8%B5%B7%E4%BE%86%E6%8A%8A-settimeout-%E5%B0%81%E8%A3%9D%E6%88%90-promise-%E5%90%A7-e542ef84967f
https://www.casper.tw/javascript/2017/12/29/javascript-proimse/
程式範例：
https://github.com/hryjosn/web_tutorial/tree/main/Promise_example

# React !
https://www.fooish.com/reactjs/
https://reactjs.org/
https://create-react-app.dev/
在react中我們大部分都會使用ES6 語法
### 1. JSX
很像HTML，但其實是JavaScript 的語法糖喔
這時候你們應該會問，那什麼又是語法糖？

const element = <p>Hello World!</p>;

接著是透過 React.createElement() 所寫的程式碼：

React.createElement(
  'p',
  null,
  'Hello World'
);

import './App.css';
import {useState} from 'react'
function App() {
  const [number, setNumber] =useState(0)
  return (
    <div className="App">
      <header className="App-header">
        <div>{number}</div>
        <button onClick={()=>{setNumber(number+1)}}>加一</button>
        <button onClick={()=>{setNumber(number-1)}}>減一</button>
      </header>
      
    </div>
  );
}


export default App;