剛剛打開了前一份工作的離職證明，回想起當初８月６日狠下心買了筆電，８月１２日正式離職，沒想到短短三個月１１月７日拿到offer，這路上要感謝的事物太多，我想分享也記錄下來我的歷程。

改變生活

如果有誰突然有了個目標，想要改變生活，自己也做好了規劃與各種結果的風險承擔，永遠要知道這是個非常有勇氣和智慧的決定！

退伍了一年多，也在傳統產業待了四個多月，其實不會不開心，但總覺得這不會是自己想要的生活，那時候只覺得我一定要想辦法趁年輕、趁剛出社會趕快找到一份自己喜歡的事業，做好自己的定位。

那時候一個機會來了，一個免費的民間企業Programmer的培訓課程，可是詢問之下發現開課日期是半個月以內，一切來得太突然，我必須在兩天之內做決定。

但想當然爾我跨出了第一步，不然我也不會打這篇故事，我永遠記得我的辭職信在發送之前給至少五個人以上看過，滑鼠的游標在傳送的按鈕上面停滯了好久，因為我知道我這個食指壓下去，後面所有的齒輪會跟著轉動。

有趣的是當提完辭職，狠下心買完筆電之後因為把其他人生選項真正刪除掉，猶豫消失了，只會開始想怎麼面對接下來的挑戰。

在這邊我蠻意外主管們是很客觀的跟我分享一些事情和故事，也給予祝福與支持，從同事、專員、主任、課長到經理都有聊過天，印象還很深刻的是辭職下班當天主任跟我聊了一些故事，離開的時候手上多了一瓶伯朗咖啡。

正式上路

我們都知道努力的方向要正確才有用，這就是效率，但除非自己夠厲害，不然一開始最有效率的方法是先找一位信任的師父，用最有效率的方法去學習效率。

現在回想培訓課程一路上其實蠻算有趣的，雖然一直沒有很順利，而且到最後是失敗收場。

同學們似乎只有我一個人是完全沒有正式上過相關課程的，要不就是相關科系畢業，要不就是曾經在外有花錢上過課，很多時候我的進度是很落後的，因為老師進度推得頗快，但我也知道那裡不是學校，沒有必要等著學生，他們需要在兩個月中培養出達到企業門檻的人，所以他們必須做出讓你剛學會騎腳踏車之後就馬上再學開汽車的進度，沒錯，就是要這麼快。

我曾經獲得最大的勝利是在上第七堂課時因為老師覺得同學們似乎都跟不上，於是這次是專門出考題給大家做，第一名的有兩本書的獎勵，在一整個下午四個小時之下我竟然是做出最多題的一位，雖然作品醜得要命但是算是時做了出來，下課後還跟第二名和老師一起去吃大餐，我不會忘記那天下課老師驚訝的看著我說『原來你是黑馬』的表情。

其實在這兩個月多學習的過程中有兩三度挫折到覺得是不是沒有什麼天份或者只是看起來很努力而已，那種心情有時候會讓我對於翻開筆電都很反感，即使曾經在比賽中獲得第一名，但後面受挫的反差感反而會讓心中的烙印更大，尤其是後面學習React框架時，我有次真的是兩天整整花了十五個小時不斷的去研究，上網找各種資料，但到最後心裡知道，這十五個小時大多真的是浪費時間而已，那種沮喪感如果無從發洩，真的很容易毀了一個人的信心。

有時或許真的只是方法不對，但這時如果沒有人點醒自己，我們永遠不知道我們的方法哪裡不對，畢竟未知無法解釋未知。

最後雖然沒有成功被錄取為那間公司的實習生，但想學寫程式的人可以參考下列幾點。

• 『寫部落格』：
  把自己的學習心得或技術記錄下來，可以是純粹的心情抒發，總之要把自己的成長記錄下來。

• 『找到夥伴』：
  學習和研究如果是孤獨的會很沒有效率，人都很容易怠惰，有人在旁陪伴會比較有動力，當然如果是同道中人或者是有師父在帶領會更好。

• 『學會實用』：
  很多人，包括我，用以前在學校的學習方法學寫程式，不是說錯，但效率差很多，寫程式不需要先讀完一本理論書，或讀懂每一行程式碼，先讓他可以動，了解八成就好，一開始多做實作觀念反而累積最快。

• 『尋找資源』：
  找到好資源絕對會讓效率提升好幾倍，其實所謂效率就是降低時間成本，有時候花兩三千買教材絕對會比自己苦學多花二十個小時才能達到一樣的目的好太多，記住，時間是最貴的，尤其是通常花二十個小時的成果不會比花兩三千的好。

成功轉職

學校從小到大只有教我們讀書和考試，從未教我們如何與社會和市場溝通，所以開頭幾次的溝通爆炸是很正常的。

１０月１７日，培訓的那間公司正式發信件通知我沒有被錄取，其實心裡有點五味雜陳，老實說如果錄取的話會是我一個非常好的跳板，但事實是，我要開始準備這個行業的履歷和面試了。

我的履歷再也不能靠著相關科系輕鬆面試與談吐，我必須要做出做品讓面試官知道我的價值在哪裡，這些事情是學校完全沒有教過的，而且以前要入學的學校推甄跟這種事情真的是差十萬八千里。

接收到沒有錄取的通知後我的履歷約再過一個禮拜才生出來，一個漂亮的履歷從這時候真的突顯出它的價值，完成當天我投了十五多間公司過兩三天就收到了三間面試。

我不是吹噓說履歷寫得很屌，我要說的是以我的經歷、我的作品還是非本科系，重點是在年底這種時機有這樣的成績已經是及格，現實的點是沒有get interview就沒有get offer的機會，如果第一波投了二十間公司，但一個禮拜少於兩間面試通知，肯定是履歷有問題需要趕快調整一下了！

建議一天不要排兩個面試，一個禮拜不要超過三四間，不然以我這種等級的新人來說會很難做準備。

面試是需要練習的，不可能沒有撞牆，一開始不要太挑，一來迅速多練習面試經驗，二來開眼界認識更多企業在做什麼事情。

第一間面試

面試官說主管去出差了於是是他來代理，感覺上也是在練習面試別人，過程中對我的履歷問的很詳細，技術問題並沒有太多，比較讓我訝異的是討論到薪水時我說大約３０K，但他說以我的程度應該會再低３～４K…

結果：說大概１１月２日主管出差回來後一兩個禮拜內有興趣會再通知二面，但我想就是無聲卡了吧！

第二間面試

是一家公司獨立舉辦的大型徵才說明會，前面都是真的瘋狂介紹公司，中場休息的餐點非常好吃，還認識一位非常漂亮又很厲害的女工程師，最後筆試雖然通過了，但是初試的時候一問技術問題就爆炸了…，第二間算是摧毀信心的開始，雖然面試官很喜歡我學習的態度並且給我他的信箱說有任何技術問題也可以詢問他。

結果：初試淘汰。

第三間面試

這次的面試官說主管在開臨時會議所以由他代理，一開始的自我介紹不知道為何講的沒有很好，雖然面試途中也是蠻愉快的，但遇到兩個重要的問題算是沒做好準備所以又爆炸了。

• 你自認為現在JavaScript程度在哪？
• 如果現在給你負責一個專案可以獨立作業嗎？

這兩個題目當下臨場反應回答的真的不是很好…，薪水部分我也是說３０K左右，他只是記錄下來會給主管參考。

結果：無聲卡。

第四間面試

這次是一間成立已有一段時間的公司，面試官比起前面算是年老許多，但算真的是在尋找新人，不過他的許多基本的技術問題我又爆炸了…，因為問的又剛好是前面三家完全沒問過的…，而且最嘔的是回去找師父討論發現其實我都有摸過，只是我不知道原來面試官就是在問那個…，而且他後來問一些問題好像是對我的自我介紹不是很滿意。

結果：無聲卡。

第五間面試

這次是一間很新創的公司，面試官先問我履歷上的問題再介紹他們公司，後來在『討論』技術問題的時候互動很不錯，只是到薪水部分其實我有點嚇到因為開的比我預期高，讓我以為不是在找我這個等級的，但後來他說對我印象很不錯，希望我假日先回去研究我沒有學過的Angular再跟他分享心得，隔天會再給我通知，整個面試過程下來比前面四間好很多，因為畢竟地雷我也踩過爆炸過很多了XD，而且我也很喜歡公司的環境，聽說還有養一隻科基，所以談吐是自然而然很愉快。

回家不久後他甚至傳學習的網站給我，那天是禮拜五，做了一小部分後除了禮拜六一整天在外面，我用禮拜日的時間把剩下的課程完成，其實真的蠻有趣的，禮拜一早上傳給他的心得也算是出自內心，當得到他好的回應說晚點會發正式offer給我的時候我真的開心的在床上彈得跟煎鍋裡的吳郭魚一樣XD。

結果：Get offer

太多感謝

從８月１２日正式離職，到１１月７日正式拿到offer不過三個月不到的時間，我真的必須很感謝老友兼師父的Nic，從看到軟體這行，到買筆電，長達兩個多月學習過程，甚至履歷和面試一條龍都有他在指導我，說真的，我非常幸運，三個月真的算是超快，如果這條路只有我一個人的話我想可能花三倍時間以上不為過，更有可能的是有其他太多因素而不得不放棄這條路走。

拿到offer真的是吐了好大一口氣，說真的，退伍一年多後選擇換跑道而待業一段自己不知道會多長的日子壓力是非常大的，這時候沒有夥伴的支持真的會顯得格外孤獨，因為你很難對圈外人表示你現在在做什麼，你的進度在哪裡，我必須說我真的很幸運也很榮幸在過年前就成功進入這個圈子內，不然我想過年的時候壓力會更大吧Q_Q。

最後也很感謝我的父母，真的是沒有給我很大的壓力，讓我充分利用身邊的資源迅速完成我想做的事情，最後要感謝的東西太多了，因為所有本來經歷的痛苦一瞬間全部轉化為甘甜，變成什麼都要感謝，那就感謝好運，感謝上天吧！

相信網路的世界都有聽過Github這個火紅的平台，這邊Git其實是工具，他本來就可以在本機端執行版本控制，而Github是把Git版本控制更發揚光大的平台！

Git基本指令

git init在資料夾內安裝Git環境。
git add (filename)選擇要給Git監控的檔案，可以搭配Linux的指令收尋多個檔案，我會使用的方式是用git add .監控所有檔案，再搭配.gitignore檔案去Ban掉不需要監控的檔案。
git -m commit "(commit name)"為一個段落提交一個紀錄點，雙引號內的commit名稱需要多練習唷！很多時候commit一多而名稱嚇得不清楚的話後面維護會很麻煩。

以上為正常流程最常使用的一套指令，再來介紹版本控制最大的魅力，當開發到一半發現專案做亂掉了怎麼辦？

git reset HEAD^可以把所有檔案回到上一次commit的狀態，所以特別建議新手每做一點小修改就下一個commit，讓自己多掌握自己作品的控管。
git checkout .這是蠻特別的用法，效果會跟上面一樣，小細節上就先不談。

但如果像上述說的下了一堆commit，但我有一個想拿掉的功能已經下了數次commit該怎麼恢復？(意思就是重回一次以上的commit點)

git log查看所有commit記錄，這時候commit名稱下得清不清楚的好處就在這裡顯現囉！查看完之後可以按q離開。

git reset HEAD~(number)查完想回到的第幾個commit之後數字是回到前幾次版本。
例如git reset HEAD~2是回到前兩次，git reset HEAD~3則回到前三次，以此類推。

reset絕對要小心使用！

在我們開發專案中，其實最好保持master(主支)的乾淨，所以要做任何新的功能最好開新的branch(分支)開發。

git branch列出目前有多哪些branch(只在本機端的)
git branch -a列出所有branch(包括遠端的)
git branch (branch name)產生新的branch
git checkout (brach name)切換到指令brach，這時可以開發新功能囉！
git branch -d (brach name)刪除指定branch
git branch -D (brach name)強制刪除指定branch

如果做到一半必須先去別的分支做其他事情又不想亂下commit的話我們可以用git的暫存(stash)功能。

git stash把從最後一個commit到剛剛的東西暫存到暫存區裡，這時的專案狀態又會回到最後一次commit那邊
git stash list列出所有暫存區(stash)的資料
git stash pop取出最新的一筆並移除在暫存區(stash)的資料
git stash apply取出最新的一筆暫存資料但是暫存資料不移除
git stash clear把暫存區(stash)的東西都清掉

Github提供的遠端平台，可以讓大家使用Git共同開發一個專案，稍微熟悉的話對新手算是加分哦！先介紹自己管理自己的專案。

git remote add origin git@github.com:username/(repository name).git指定遠端的地址，使用Github創造新專案(repository
)的時候就有清楚的引導囉！
git push在設定完地址和下完commit的時候即可使用這個指令上傳到剛剛設定的Github專案上，要注意的是版本狀態必須是最新的，也就是說是下完commit之後才能上傳，一個檔案都不能有修改過。
git status查詢有哪些檔案是修改過的，可以用這個指令查詢因為修改過而不能git push的檔案。

再來我們有可能是去下載一個檔案來做開發。

git pullpush是上推檔案到遠端的話pull就是從遠端下拉檔案的意思囉，可以把別人的專案更新到最新狀態。
git merge (branch name)在別的分支開發玩的功能要合併到比較主要的分支就下這個指令，要注意如果有衝突(conflict)的話Git會提示你，請小心解決，個人會比較推薦使用Github上的功能更有可讀性。

Git和Github是個博大精深的世界，要熟悉真的要自己找機會去熟悉，參考方向和資料來源如下：

Tsung’s Blog
外國人詢問branch的問題

在學習使用React的路上我相信八成以上的教學都會建議使用ES6的語法，分享一下剛剛學到的arrow function和var的轉變。

ES5的var為什麼轉換為ES6寫法不同？要如何修改？

以下是一段簡單的ES5語法的function

1
2
3
4
5

var App = function() {
	return (
		//somecode...
	);
};

製作變數var的指令在以前最原始的JavaScript有一個潛規則，如果此變數會跟著之後程式碼計算而變動則命名原則為很簡單的小寫，例如：

1
2
3

var numbers = 10;
numbers = 10 + 2; //此時numbers被計算為12了
//這裡的命名方式很簡單就為小寫

如果變數為之後都不會再變動則命名全部為大寫：

1
2
3

var MESSAGE = "Hello World!";
console.log(MESSAGE + "Kurt!");//此時輸出Hello World!Kurt!
//這裡的名命方式為全部大寫

當然這是沒有硬性規定的，不照著這麼做程式照樣也可以跑，但程式碼是要給大家容易維護的，所以這種潛規則命名方式就讓別人很清楚這個變數不能隨意修改。

今天ES6的開發覺得這個規則非常人性化也非常實用，於是他自訂了另一種指令把這個規則發揚光大。
let numbers = 10;可變變數的指令var改為let
const MESSAGE = "Hello World!";不可變變數指令var改為const

把今天的範例修改後如下：

1
2
3
4
5

const App = function() {
	return (
		//somecode...
	);
};

Arrow function

ES6一直想把程式碼改得越來越讓人易讀，也就是語意化，所以ES6有一種叫Arrow function的用法。

使用時機為一個物件(function)裡面的東西再也不會修改的時候，此時的宣告也必須使用const，以一開始的範例修改後如下：

1
2
3

const App = () => (
		//somecode...
	);

這樣子是不是一眼就可以知道這個物件是在做什麼事情了呢？
會稱為Arrow function的緣故就是因為=>這個符號很像是箭頭(Arrow)囉！

一開始去正法寶藏上課的時候老師用的寫code程式是mac內建的Vim，結果不知不覺就用了兩個月左右了，後來朋友介紹的sublime text真的還是比較適合我這個新手啊！ＸＤ

不過還是還介紹一下我常用的指令吧！

Vim啊Vim指令

前情提要：Vim所有的操作都是純粹鍵盤哦！

i:Insert mode 可以開始打字
c+方向鍵:刪除字元後進入 Insert mode
C:刪除一整行後進入 Insert mode
s:刪除字元後進入 Insert mode
S:刪除一整行後進入Insert mode
v:VISUAL mode 可以選取字元
V:選取一整行後進入 VISUAL mode
所以我們可以先選取一堆字元之後再按x或者c讓被選取的字元作動
所有模式可以按esc退出

w:前往下一個字串開頭 包含符號
W:前往下一個符號
b:後往下一個字串開頭 包含符號
B:後往下一個符號

u:回復上一動(undo)
.:重複上一個動作(上一個動作是貼上此時按這顆鍵也會是貼上)
y:複製
Y:複製一整行
x:剪下
X:剪下一整行
p:貼上(先按數字鍵後再按p可以多次貼上，ex:3p會貼上三次)

$:到此行最後一個字元
0:到此行第一個字元
如果先按v再按0會把該字元到行頭全選

gg:回到檔案最初字元
G:前往檔案最後一個字
在Insert mode 按下Tab會打四個弄格

最實用的一個是用Vim去複製別人的code時常排版會亂掉，此時有個完全貼上模式：
跳出所有模式後輸入:set paste再control + C就可以了
取消模式為輸入set nopaste就可以取消囉！

最後修改好檔案後
:w存擋
:q離開
可以連在一起:wq存擋後離開
在Vim修改後沒存擋是不會給你下指令:q離開的，此時下:!q可以強制離開檔案。

其實還有超級多的指令和外掛可以用，但我最常用的就是這些，說實在的Vim用的很猛的話其實蠻潮的我覺得，至少會是真心佩服。XD

最近照著教學做了一個類似小蜜蜂那種Shooting game的遊戲，其中當然需要一個主要迴圈不斷的重複啟動達到畫面一直刷新的效果，當然有很多種做法可以達到無限迴圈，但我來分享一下教學上使用秒數做出來的無限迴圈吧！

new data().getTime()的配合

首先先瞭解一下new data()，顧名思是就是列出自身電腦為基礎的切確年月日時間，以下面簡單程式碼為例：

1
2

var d = new Date();
console.log(d);  //顯示 Mon Oct 15 2016 12:53:53 GMT+0800 (CST)

那getTime是做什麼的呢?
getTime可以算出當前物件時間距離1970 年 1 月 1 日午夜的毫秒數，所以new data().getTime就可以得出現在以自身電腦為基礎的時間距離1970 年 1 月 1 日午夜所差別的毫秒數，簡單的範例可以參考W3school的這篇。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function loop () {
	if (new Date().getTime() - lastLoopRun > 40) {
		function1();
		function2();
		function3();
		functioni();

		lastLoopRun = new Date().getTime();
	}
  //這樣看起來雖然因下面setTime讓loop每2毫秒就重啟一次，但其實if裡面所有的function是約40毫秒
  //才會達成條件而全部刷新一遍！

	setTimeout('loop();', 2); //每兩毫秒又啟動自己這個迴圈形成無限迴圈
}

loop(); //別忘了要下指令去第一次強制啟動function loop()

無限迴圈的實作方法一定還有很多種，但這種也是簡單的方式之一。

終於到最後一堂課了，這堂課的主題是用其中一款測試套件 should ，為什麼要使用測試工具呢？

• 人很粗心，總會犯錯。
• 方便修改程式，知道哪個環節出錯。
• 可以早點發現程式上的結構瑕疵。
• 利用測試訂出程式 spec。

那廢話不多說就下 $ npm install should --save 吧！

簡單的製作一個map.js檔案，裡面有一個使用map的function：

1
2
3
4
5
6
7
8
9
10

export default function map(arr, cb) {
  const length = arr.length;
  const newArr = [];
  let index = 0;
  while (index < length) {
    newArr.push(cb(arr[index], index));
    index++;
  }
  return newArr;
}

在同一個目錄裡創造一個資料夾裡面也創一個map.js的檔案用來測試：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import should from 'should';  //載入套件should(使用ES6語法)
import {map} from './../';    //載入上一層的map.js

describe('map', () => {  //第一個字串為敘述測試的東西，第二個function就是要如何進行測試。

  it('should have new reference', () => {

    const arr = ['apple', 'orange', 'banana'];
    const mappedArr = map(arr, (elem) => {
      return elem;
    });
    const res = (mappedArr === arr);
    res.should.equal(false);
  });

  //用法其實就跟if/else很相像，取名也很白話要讓測試者很清楚知道哪裡出錯。
  //有趣的是should have new reference的文字字串會接在map的文字字串後面，使用起來很像電腦再跟自己溝通。

  it('should have elem argument', () => {

    const arr = ['apple', 'orange', 'banana'];
    const elems = [];
    const mappedArr = map(arr, (elem, index) => {
      elems.push(elem);
      return elem;
    });

    elems.should.deepEqual(['apple', 'orange', 'banana']);
  });

  it('should have index argument', () => {

    const arr = ['apple', 'orange', 'banana'];
    const indices = [];
    const mappedArr = map(arr, (elem, index) => {
      indices.push(index);
      return elem;
    });

    indices.should.deepEqual([0, 1, 2]);
  });

  it('should use my callback function', () => {

    const arr = ['apple', 'orange', 'banana'];
    const mappedArr = map(arr, (elem) => ({fruit: elem}));

    mappedArr.should.deepEqual([
      {fruit: 'apple'},
      {fruit: 'orange'},
      {fruit: 'banana'}
    ]);
  });
});

課程總結

最後一堂課也結束了，一夥人去吳留手串燒店聚餐，這兩個月學習對我來說真的強度有點過大，不過我還是很感謝老師帶領我接觸了寫程式一整套流程所有可能會碰到的東西。

這一趟奇幻旅程對我來說很難用文字表達，從一開只會打幾個指令和程式碼，陸續碰到了Node.js,React框架,甚至還教我們如何製作爬蟲等等，兩個月這樣子真的是賺翻了，還想要繼續在編成的世界繼續冒險下去呀！

Github有一個免費建立靜態網站的功能，可以使簡單的作品上線，只能呈現簡單的HTML,CSS,JavaScript，其餘的功能幾乎是不行的唷！

教學

1
2
3
4
5
6
7
8

git init //初始化local git repository
git remote add origin [repository name] //local和remote做聯結
git pull origin gh-pages //把github上的東西抓下來
rm 不要的東西 //刪除我們不要的東東，也就是github預先幫我們產生的html和css檔
git add .
git commit -a
git branch gh-pages 新增一個local端的分支，叫gh-pages
git push origin gh-pages push上去github

產生出來的靜態網頁網址為：[github name].github.io/[repository name]
註：靜態網頁呈現的東西都是gh-pages這個分支的哦！！

參考網站：https://noootown.wordpress.com/2015/07/19/github-frontend/

重複性高的事情總是有些聰明的人可以把它變得簡單又自動化，像JS只又要重複性的動作通常就會提出來做一個重複使用的物件，其實只要是在電腦上的重複性動作幾乎都可以做到這樣的事情，即使是人為行為！

發掘重複行為

今天上課的主題蠻有趣的，有些人會喜歡去論壇收尋帥哥美女的圖片，試想我們重複的行為有什麼？

• 點網址進去
• 看看圖片內容
• 下載圖片
• 點另外一個網址

這次的專案其實算是超過我的程度太多了，XD所以跟大家分享一些重點就好，以下是老師使用ES6的語法～

1.載入網址：

1

const regexpUrl = new RegExp(`(https?:)*//[^/\\s]+/\\S+\\.(${imageTypes.join('|')}|js)`, 'gi');

2.查看圖片內容的方法可以下載一個叫 image-size 的套件去過濾不符合相片的圖片大小。

3.下載位置路徑可以用 mkdirp這組套件，程式碼如下：

1
2
3
4
5
6
7
8
9

import mkdirp from 'mkdirp';

export default function(path) {
  return new Promise((resolve, reject) => {
    mkdirp(path, (err) => {
      err ? reject(err) : resolve();
    });
  });
}

還有太多東西還不是很熟悉，但我不得不說爬蟲真的是很方便的東西，譬如說我們不是下載圖片，而是在ＦＢ取消所有與前任的追蹤等等XD，而且也會突然認識到許多套件，這個世界有太多聰明的人呀！

通常資料的處理和邏輯都是在後端實行，但這時我們還要找硬體創造一個資料庫，只是想做一個小功能的話我們不用這麼大費周章，今天的課程就是介紹express這個套件，實作一個簡易的會員註冊和登入系統。

##express環境
關於express的資訊可以直接參考他在Github上的網站，其實在專案資料夾裡下$ npm install express –save後新增一個index.js的檔案，在裡面輸入官方給的基本啟動Code如下：

1
2
3
4
5
6
7
8

var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

新增好後輸入$ node index.js就可以啟動了！

只是現在是最陽春的啟動方式所以畫面似乎什麼都沒發生，但只要沒出現error的話現在可以開啟網頁前往localhost:3000查看有沒有顯示Hello World了！

因為此堂課是用ES6裡jsx的語法，所以在安裝完可以使用jsx的環境之後再分享怎麼讓我們的啟動提示訊息不要這麼陽春。

jsx環境

想要使用jsx語法只需要安裝三個套件，分別如下：

• babel-preset-es2015
• babel-preset-stage-0
• babel-register

只需要輸入一條指令就可以一次安裝：
$ npm install babel-preset-es2015 babel-preset-stage-0 babel-register –save

安裝好以後還要在根目錄建立一個檔案名稱為：.babelrc
裡面輸入程式碼：

1
2
3

{
  "presets": ["es2015", "babel-preset-stage-0"]
}

我們可以使用jsx的語法囉！再來我們把啟動伺服器的提示訊息改得更人性化一點吧。

把剛剛的index.js檔案內的程式碼改為如下：

1
2
3
4
5
6
7
8
9
10
11
12

import express from "express";

const port = process.env.PORT || 3000;
const app =  express();

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(port, () => {
  console.log('Example app listening on port %s', port);
});

現在執行$ node index.js的話會跳錯誤訊息說他不認識import這個東西，import其實就是jsx的語法，但我們剛剛不是安裝過了嗎？

其實是因為我們安裝了套件但是沒有跟檔案說要使用它，就好像一個樵夫買了斧頭要去砍材但是卻連斧頭都沒帶出門，這聽起來挺糟糕的，所以我們在根目錄多創一個檔案叫entry.js當作入口，輸入以下程式碼：

1
2

require('babel-register');
require('./index');

以後要開啟伺服器就從這裡開啟，在根目錄輸入$ node entry.js 應該就會看到Terminal裡面會有一行提示囉！

做第一個最基本的API去寫入和讀取檔案

我想要製作簡單的登入，註冊，登出等等頁面都很容易，重點是我們如何在註冊會員的時候把帳號密碼新增到一個檔案裡面，登入此會員帳號密碼的時候自動判斷是否通過，那途中有其他小工具可以加密密碼的防護機制就先不多作介紹。

這是註冊會員主要的核心功能程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const {username, password} = req.body;
//指定這個物件裡的東西要從別的地方獲取
const json = fs.readFileSync('passwd.txt', 'utf8');
//設定不可變的變數json去讀passwd.txt這隻檔案

let data = JSON.parse(json);  //let就是jsx裡的var

 if (username in data) {
    return res.send(`username ${username} already exists`);
  }
  //檢查有無重複使用者名稱

  if (username && password) {
    data[username] = {username, password: hashedPassword};
    const content = JSON.stringify(data);
    fs.writeFileSync('passwd.txt', content, {encoding: 'utf8'});
  //到這裡已經把使用者註冊的帳號密碼寫進passwd.txt檔案裡面了

    return res.send('Register Successfully.');
  }
  //顯示註冊成功

這是登入會員主要的核心功能程式碼：

1
2
3
4
5
6
7
8
9

const {username, password} = req.body;
const json = fs.readFileSync('passwd.txt', 'utf8') || '';
const data = JSON.parse(json);
//用Json.parse的方法剖析變數data裡的東西
const row = data[username];

if (row && bcrypt.compareSync(password, row.password)) {
  return res.send(`Login Successfully. Hello ! ${username}`);
}

express有很多新語法可以參考下面兩個官方網站：
官方原文說明
官方中文說明

最後心得是資料接來接去的腦袋邏輯真的要超級清楚啊！！！

這兩堂課是學習Facebook開發的『框架』，只能說天啊，被搞的覺得自己很像低能兒，超級挫折啊！！！！！！！！XD

什麼是框架

網路上對於框架的解說十分豐富，但總的來說就是讓一個團隊有一個寫程式的架構，除了把一些底層的東西打包好更好使用之外也可以讓專案更好管理和維護。

你可以想像一群建築工人他們每個人會蓋的房子是千變萬化的，如果沒有一個藍圖和規則蓋房子的話不但沒有效率之外房子的格局很有可能是千變萬化而且彼此的東西是格格不入難以融入的。

沒有藍圖而去蓋一棟摩天大樓這像話嗎？XD

React的條件與語法

首先要學習React這個框架除了前端三大語言(HTML,css,JavaScript)要有基礎的熟悉度之外還需要對於node和npm有一定的認識。

node和npm是相輔相成的，這兩個像是前端界的套件管理工具，你可以想像當要蓋房子的時候不可能全部的工具都自己做，手推車、吊具、甚至是一些蓋房子的技術等等，一些東西是可以去引進別人已經做好而且完善的工具和套件，而React就是電腦本身完全不懂而別人製作出來的套件之一，只是功能龐大的成為了一個框架。

在語法上面越來愈多高層語言希望程式越來越語意化，讓Programmer越來越好跟我們的電腦溝通，我們在React的官方網站可以找到官方相當的推薦jsx這種語法，搭配上ES6的語法可以讓整個程式很容易給人閱讀和維護。

React的環境

承如上個主題有提到React也是node可以安裝的套件，那我們如何建立React的環境呢？

如果真的想要看一下React怎麼運作的話可以使用官方釋出的create-react-app專案樣板產生器，可以直接看裡面的東西體驗React的魅力，使用方法請輸入下列指令：

• sudo npm install -g create-react-app
• create-react-app 專案名稱
• cd 專案名稱
• npm start
  執行完之後應該會自行開啟一個網頁顯示範例

但這對node和專案管理要有一定熟悉度的人來說會比較實在，不然對於我這種菜鳥反而會產生超級多的疑點導致於腦袋爆炸。XD

除了官方網站的範例之外網路上也有釋出很多React的教程，有免費的React101或者一些需要付費有影片的電子教材，其實我本人蠻不推React101的，對於新手來說真的很不友善，對於我來說有影片跟著一步一步做並且有解說才是最實在的！這是我和朋友購買的線上電子教材，也是叫React101。

React核心–Component、import、export

這兩堂老師所教導的React讓我覺得這個框架可以把功能切成非常多的細項，甚至可以不斷使用，非常符合物件導向的精神。

在Component裡面我們甚至可以把html的東西寫在Component裡面，這樣可以讓html和javascript的互動更加的靈活並且效能更好。

老師曾說React入門門檻其實反而比較低，因為他是非常囉唆的框架，
每一個功能都需要環環相扣好，如果某個功能沒有用到甚至React還會出現警告，而且每一個Component做好做export之後在要使用這個Component的檔案一定要import進去。

對我來說React給我的感覺就像是製作一塊拼圖，每一個拼圖的凸點一定要有一個凹口去接應他，如此繁雜的防呆機制雖然很麻煩，但大大的降低了新手程式爆炸的風險。

import和export就是屬於ES6的jsx語法，可以參考網路上別人提供的jsx簡易教學來初步認識jsx語法。