[React.js] Build An React App part.1- time-series chart and Node.js

Introduction

我的需求要的是純粹的頁面，而資料將由另一個web service來提供, 效能考量下，想用Virtual DOM的方式來做，因此一開始便考慮選擇Vue.js或是React.js。

這兩個框架都是使用Virtual DOM，也都是component-based的資料結構，無論是學習哪個都是很值得。以缺點來看，前者目前的market share仍比不上React.js或是AngularJS，而且 scalability較差; React.js的學習曲線則較陡。最後考慮市占率，選擇React.js來用。

然後需要先在環境中安裝好VS code以及Node.js。網路上其實已經有很多教學文章了，這篇是整理合乎我使用的工具及流程。

npm, Babel, and Webpack

先從環境開始。

npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

打開command line，輸入以下指令，會看到資料夾中產生package.json。package.json是用來紀錄專案所依賴的套件，npm會依據這個檔案的內容安裝對應的套件:

mkdir demo
cd demo
npm init -f

安裝開發環境所需要的套件。npm install會依據package.json的內容安裝套件，也可以指定package名稱，加上 — save-dev就可以將套件寫入package.json的devDependencies中:

npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/polyfill "babel-loader@^8.0.0-beta" html-webpack-plugin webpack webpack-cli webpack-dev-server

安裝正式環境所需要的套件。 — save就可以將套件寫入package.json的dependencies中:

npm install --save react react-dom react-loadable react-router-dom

Babel

Babel可以讓將JSX compile為JS，並且將ES6轉譯為ES5，可以到官網的try it out的左邊編寫ES6，右邊則會產生ES5。安裝正式環境所需要的套件。

Babel是讀取.babelrc以知道要執行哪些plugin，為此需在資料夾中新增.babelrc檔案並填入剛才我們用npm下載的套件:

WebPack

Webpack可以將JS檔案打包成單個bundle file，我們再將這個bundle放入到HTML裡即可，有點像是以前曾使用過的Gulp或是Grunt，前端的世界瞬息萬變，框架工具也是。

HtmlWebpackPlugin可以在打包後將bundle直接放入新的HTML file裡，省去手動修改HTML的步驟，在entry及output分別指定新舊檔案的路徑。

Babel雖可以替我們將ES6轉譯為ES5，但有些方法，對象，或瀏覽器(例如IE)本身不支持，例如: 1. 全局對象：Promise、WeakMap 等。 2. 全局靜態函数：Array.from、Object.assign 等。 3. 實例方法：如 Array.prototype.includes 等。 @babel/polyfill的功能就是替我們轉譯上述這些對象。

loader可以轉換模組的source code，在require()或加載模組時預處理文件，簡單來說Webpack本身無法轉譯也看不懂css，因此需要多個loader來輔助。

babel-loader可以上述時間點將ES6轉譯為ES5; css-loader可以讓我們require css file;style-loader則可以將載進來的css file轉換成並放入區塊。

建立webpack.config.js檔並貼上以下code:

修改package.json，加上script以作為後續啟動webpack之用:

Build a simple React App

Add a React.js node

在專案根目錄下建立src資料夾, 並建立src/index.html:

建立src/index.js:

此時專案資料夾的結構會如下:

Run web dev server

接著測試看看開發環境，輸入以下指令：

npm run dev

打開瀏覽器查看http://localhost:8080/，如果看到Hello World!表示一切順利，這個指令是啟動package.json裡的dev script，實際上是啟動webpack-dev-server來當暫時的back-end。

Build prod package

接著測試看看正式環境，輸入以下指令：

npm run build

查看專案資料夾應該會產生dist資料夾, index.html, app.js:

這是執行前述的Webpack打包成bundle的功能。

Add a bar chart

從React.js example中可以找到許多不同的time series chart範例，最後我選擇的是esnet/react-timeseries-charts。先安裝套件，打開command line輸入:

npm install react-timeseries-charts underscore --save

修改src/index.js:

建立src/SimpleChartLoader.js，在這層載入raw data，並作為參數傳給下一層SimpleChart:

建立src/SimpleBarChart.js，取得props中的raw data後再轉換成TimeSeries，並作為ChartContainer以及BarChart的參數使用:

要餵react-timeseries-charts的資料格式如下:

輸入npm run dev並打開瀏覽器查看http://localhost:8080/，理想上會得到這個Bar chart:

Use Node.js as web page server

雖然webpack-dev-server可以當成back-end使用，但基本上外面是連不到的，僅僅能在自己電腦上提供服務，因此我們還是需要安裝一個真正的web server以提供entry point，這邊將會使用Node.js，並選用Express framework。

打開terminal，輸入以下指令：

npm install express --save

在根目錄下新增app.js並貼上以下程式碼，由於webpack所build出來的app.js及index.html會位於dist資料夾，因此要用app.use加入這個資料夾，並且讓他監聽某個port (這裏是port 4000):

回到terminal, 先後輸入以下指令：

npm run build
node app.js

打開瀏覽器查看http://localhost:4000/, 應該要得到與輸入npm run dev並打開瀏覽器查看http://localhost:8080/時相同的結果。

Summary

謝謝你耐心地讀到Summary，我是Sean HS， 是位軟體工程師。這段沒有太多React.js的複雜部份，只有單一component，而且資料流向是單向的。

若有錯誤之處，歡迎留言或是聯絡我: [email protected]。

期待您的見解，與您交流討論，謝謝。

References

1. babel-polyfill使用与性能优化 — 程序猿小卡 — 博客园 2.加载器（Loaders）与babel-loader示例 · webpack入门与示例 · 看云3.Loaders — 示範 css-loader 與 style-loader — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 4.<06 — 心法3 — 強化> Loaders — 示範 css-loader 與 style-loader 5.Webpack教學 (一) ：什麼是Webpack? 能吃嗎？ 6.【webpack】的基本工作流程 7https://software.es.net/react-timeseries-charts/#/example/traffic

Other topics

[Golang] Build A Simple Web Service:

[React.js]Build An React App