React 綜合應用 (1)：登入頁面

要來驗收學習成果，但有個範例試作總是讓人安心，從 Login 開始進入好像是不錯的開始。

參考國外部落格教學後，發現是個很好學習的小型案例，就決定動手模仿開始：

首先使用 Create-React-App 進行專案建立。

安裝：
React Router
React Bootstrap
React icons
Styled-Components

Login 元件程式碼：

React Router 和 Bootstrap 整合

React基礎看了一陣子，總算是看到 Router 章節，突然豁然開朗。

React 屬於 View Library 的一種，對我來說，直接從 Router 看回去反而更容易理解 React 是想要做到什麼樣的設計思路。

看直播主 Step by step 玩出一個版面，一邊學習一邊做，可以理解設計者到底是怎麼想的，很謝謝這位直播主的解說。


See also:

• Build a website with React, React-Bootstrap, React-Router and Styled-Components
• Styled-Components

REACT Plugin list in Visual Studio Code

編寫 REACT 的過程中，記錄一下目前用到的 Plugin，就算未來重裝系統也不用煩腦當初到底用過哪些。

首先是列出清單的指令：

code --list-extensions | xargs -L 1 echo code --install-extension

接著會回傳包含安裝指令的 Plugin 清單：

code --install-extension burkeholland.simple-react-snippets
code --install-extension esbenp.prettier-vscode
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension teabyii.ayu

See also:

• How can you export VS Code extension list
• Learn React - React Crash Course [2019] - React Tutorial with Examples | Mosh
• Simple React Snippets for VS Code that you will actually use 
• Prettier formatter for Visual Studio Code
• mgmcdermott.vscode-language-babel
• teabyii.ayu

REACT Basic Inclusion Boilerplate 小型樣板

REACT CDN (Basic inclusion) 樣板

以入門的角度來說，立即可以看到結果是蠻重要的 ── 在環境設置上花了很多時間的心得。

CDN (Content delivery network) + REACT + BABEL

其它元件的 JS 內容：

npm start giving error in REACT

REACT 專案建了幾個後，在切換專案進行 npm start 啟動 Web 時，不定時會遭遇啟動失敗的情形。

而看 LOG 幫助實在很少，最後採用的作法如下：

1. 刪除專案中的 node_modules 目錄
2. 在該目錄下重新執行 npm install
3. 執行 npm / yarn start 即可順利執行

See also:

• npm start giving error in node.js

Howto: create-react-app

在重新安裝 create-react-app 發生拒絕存取的訊息：

使用：

sudo chown -R $USER:$USER '/home/[USER_NAME]/.npm/'

即可解決這個問題。

create-react-app 屬於模板套件，必須先使用 npm 進行安裝。

完成後才使用它來建立新的專案。

例如：

create-react-app my-app

See also:

• create-react-app fails with permission denied
• 处理npm权限问题

Howto: Install NodeJS in Linux mint

Step 1 – Configure Node.js PPA

• sudo apt-get install curl python-software-properties
• curl -sL https://deb.nodesource.com/setup_11.x | sudo bash -

Step 2 – Install Node.js on Linux Mint

• sudo apt-get install nodejs

Step 3 – Install Yarn using NPM

• sudo npm install yarn -g

Step 4 – Check Node.js Version

• node -v (11.12.0)
• npm -v (6.7.0)
• yarn -v (1.13.0)

See also:

• How to Install Latest Nodejs & NPM on Linux Mint 19/18
• How to Install Yarn on Ubuntu, Debian & LinuxMint