> For the complete documentation index, see [llms.txt](https://zhang699-2.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zhang699-2.gitbook.io/note/react.md).

# React & Webpack

### React Errors

```
```

### File Upload

* Blob

  * `new Blob([file], {type:'image/png'})`
  * File has four types: **Buffer, Text, Url, Blob** because of FileReader various ReadAs\* API  so that the file's type must according to server's receive type.
    * [https://www.npmjs.com/package/react-file-reader-input](https://www.gitbook.com/book/zhang699/note/edit#)
    * <https://developer.mozilla.org/en-US/docs/Web/API/FileReader>
  * Blob doesn't show content in Chrome Dev Tool
  * indicate file's `Content-Type` by specifying as`type:fileInfo.type`
  * File extends Blob interface, get  Uploaded File object from Input
    * <https://developer.mozilla.org/en/docs/Web/API/File>

  ```
  findDOMNode(fileInputRef).files[0]
  ```

  * indicate files's `filename` by specifying as third argument of `FormData.append`
  *
  * ```javascript
    const data = new FormData();
    data.append('File', new Blob([file], {
      type: fileInfo.type,
    }), fileInfo.name);
    ```

    Chrome Dev Tool File Upload Sample Request Payload

```
------WebKitFormBoundaryvyJ8iQ6QoZAYLcu0
Content-Disposition: form-data; name="File"; filename="螢幕快照 2017-04-01 上午1.24.26.png"
Content-Type: image/png
------WebKitFormBoundaryvyJ8iQ6QoZAYLcu0--
```

* FileReader
  * ....

### Webpack

* Module.Loader&#x20;
  * 處理每個不同檔案類型的負責模組，像是打包圖片(test:\*.png)所設定的壓縮比例，或是處裡scss / css 使用指定的loader，進行處理。讓程式在使用require/import 知道如何處理檔案。
    * url-loader
    * vue-loader
    * eslint-loader
      * 將每個test 描述的檔案做eslint檢查，並回報至console
    * sass-loader
    * imports-loader
      * 將每個file prepend 一個dependency，讓每個file 都可以用到它
    * exports-loader
* Plugin
  * 想對webpack 在打包的過程中進行客製化，像是移除檔案中console.log 的語句，使得log在打包後不會出現
    * ExtractTextPlugin

      \*&#x20;
    * DefinePlugin
      * 讓整支程式都可使用到的參數，像是API\_HOST或process.env等，常見用法就是引入process的參數到打包的app中。

### Organize Project Structure

* Organize Application By Feature
  * Service
  * Components
    * Buttons (Common reuse components)
    * Notification
      * index.js
      * main.scss
    * SignUp&#x20;
  * Data
  * Scenes
* Scenes
  * Login
    * Components

Scenes

* <https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1>

Server Side Rendering

將畫面在Server side 利用 react-dom/server 中的renderToString 將畫面轉為字串，然後再傳送至client 進行顯示

* 事件失效
* Redux State相對複雜

好處：

* 利於SEO
* 使用者初次進入頁面時的速度較快，因為Single Page Application會在一開始把所有用到的檔案做下載，較慢。

參考

<http://blog.techbridge.cc/2016/08/27/react-redux-immutablejs-node-server-isomorphic-tutorial/>

## Form Input verify by using Debounce / Throttle Event in React

<http://stackoverflow.com/questions/23123138/perform-debounce-in-react-js>