[React.js] Build An React App part.2- Material-UI, SPA and React Router
A journey of a thousand miles begins with single step
Introduction
這篇的學習目標是要讓前後端分離，這有助於降低前後端的相依性，要完成這個目標，首先要讓前端的有獨立的route，讓前端可以不再依賴後端rendering每個頁面。
如同第一篇文章曾說明過的，我們只需要Node.js server為我們提供entry point，之後在切換頁面時不會再發出額外的request到server，這種方式稱之為SPA (Single Page Application)，這篇則是記錄如何使用React Router來建立SPA。
以下範例將延續第一篇文章的專案做修改。
Use Material-UI to create sub-page components
以建立起一個表單當成子分頁作為例子，由於這次的重點不在於UI的設計， 推薦可以使用的UI framework為Material-UI，可以幫助快速建立還蠻美觀的UI，打開terminal輸入以下指令：
npm install @material-ui/core --save在src資料夾下建立Register.js，這邊會用到的有Button，Grid，及TextField
在src資料夾下建立Login.js
Use React Router to create front-end routing
在src資料夾下建立一個MainPage.js以作為front-end routing的entry point，在這裡會import所有sub page的component (本篇只有建立一個sub page)
MainPage基本上要有個side bar (或是NAV bar)及router component，這邊分別推薦react-burger-menu以及react-router-dom，打開terminal，輸入以下指令：
npm install react-burger-menu --save
npm install react-router-dom --savereact-router-dom的使用邏輯是先在Switch的區塊定義Route，Route的path即是URI，component會對應到一個sub page component;
在react-burger-menu的Menu區段放置react-router-dom的Link，Link的to必須對應到Route的path;
另外在Link的OnClick event將state的menuOpen更改為false，MainPage.js的內容如下
修改src/index.js，import MainPage.js:
Wrap up
到目前為止的檔案結構應該會是像這個樣子:
輸入npm run dev並打開瀏覽器查看http://localhost:8080/Login, 應該可以看到以下頁面，因為我們還沒有在submit後做任何事情，因此按下按鈕後還不會發生任何事:
用side bar切換到Register page看看:
Summary
謝謝你耐心地讀到Summary，我是Sean HS，是位軟體工程師。這段使我們可以建立分頁，利用front-end routing可以避免request到back-end，必且在切換頁面時不會跳閃，缺點則是這種做法的SEO很差。
若有錯誤之處，歡迎留言或是聯絡我: [email protected]。
期待您的見解，與您交流討論，謝謝。
Related topics
[Golang] Build A Simple Web Service:
[React.js]Build An React App
