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://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 astype: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

  • 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

  • 處理每個不同檔案類型的負責模組，像是打包圖片(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

      *

    • 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

  • 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