0%

要從哪裡開始學,或許先看看 React 的組件結構比較容易懂?

在開始學習 React 的時候,或許先從觀察開始,看看應有的組件檔案裡,需要有什麼塊狀結構,就像學 HTML ㄧ樣,也會有<html><head><body>
除了我們認識的 HTML、CSS 和 JavaScript 外,React 也有屬於自己的語言標記,但嚴格說起來不能說是語言,而應該說是語法糖,什麼是語法糖?算是介於 HTML 和 JavaScript 之間的一種標籤語法,主要是要讓 JSX 來描述使用者界面的外觀,如官網JSX – React的介紹。

Read more »

有完善的開發環境,開發起來才順手之起手式

ReactJS 部署開發環境

安裝開發套件懶人法

可先安裝create-react-app套件在 global 環境中,使用終端機指令:sudo npm install -g create-react-app,可以先試試把sudo拿掉,看是否有權限安裝,不行再加。

安裝了這個套件,在要開新專案時使用,會自動佈署所需要的檔案與套件,整個檔案約 296MB。先以cd前往要安裝的位置。
create-react-app [專案檔案夾名稱ex.test]即會在所在的路徑增加一個名為 [專案檔案夾名稱 ex.test] 的 test 檔案夾。

Read more »

人總是在某種方式的評估下,才能清楚地知道自己的能耐。

法國有不少人力派遣公司,因為法國聘人程序繁瑣,徵人又需投入大量資源人力,所以越來越多公司採用人力派遣所派遣過來的工程師,來開發公司的專案。

此測驗是法國某大人力派遣公司,對應徵者所做的線上測驗,進入測驗網頁後,須依規定的時間作答,時間到會自動前往下一題,無法回頭修改答案。

以下是本人測驗之後,重新再花時間整理出來的,包含整理時「自己認為」的正確答案,如對答案有意見,歡迎提示給予修正建議,感謝先。

Read more »

有開頭總是好事,沒開頭就什麼事也不會發生。

這個練習是在畫面上顯示好幾個鍵盤上面的鍵,讓使用者在按下鍵盤,依鍵盤不同而發出不同的聲響,原本的練習是以英文字母為發音鍵,但自己愛好自然就把它們換成了數字鍵,並搭配各種不同動物的叫聲也頗有趣的。

如果依照「功能」和「畫面」來拆解這個練習,那麼也表示「功能的部分」需要用 DOM 和 JavaScript 來操控,而「畫面」部分則需要先用 HTML + CSS 來刻好,以 JS 來等待觸發事件,來播放音效與變換元件(鍵)的狀態。

Read more »

當我們每天早上醒來,都是一切的開始。

原始出處:Javascript30.com
原始檔案:[github]

這是個很有名的免費線上課程,由 Wes Bos 推出的 30 個以原生 JavaScript 寫出來的挑戰,這 30 道題目也有 Wes Bos 所提供的免費教學影片可看,可說是佛心來的。而網路上也有許多前輩,挑戰之後將心得分享出來,我們可以在原始檔案[github]上的 README 上看到列表,其中有好幾位來自台灣的前輩,因此增加了中文的分享筆記,是英文不夠好的救星啊!而這一兩年這 30 題也成為許多人入手學習 JS 必做的練習,在框架盛行的年代,能夠以原生的 JavaScript 來寫練習真的是越來越珍貴。

Read more »

Array 34

一顆小螺絲釘立大功 ,一粒屎壞一鍋粥猜兩個迭代函式。

在 ECMAScript 5 的迭代方法中有兩個好用的迭代方法,這兩個方法主要拿來檢查陣列裡的元素值是否符我們給的條件:some()every。而這兩個方法的回傳值皆為布林值。

如果用字面上來解釋,就很容易分辨兩個的不同:
some() -> some 某一個:有一個元素符合條件就回傳true
every() -> every 每一個:要全部符合條件才會回傳true

Read more »

參加讀書會是個可以讓自己和一群喜歡同一個技術領域的夥伴一起學習的方法,透過讀書會,去了解與深入書中所要表達的內容。
目前進行與參與的讀書會有「Javascript 大全」和「Javascript 忍者」兩本數,雖然「Javascript 大全」不包含很重要的 ES6 部分,但是能夠更全面了解 JS 的演變與歷史,將來在看不同版本的程式碼時,應該可以較為清楚的理解。而「Javascript 忍者」這本是許多前輩推崇的一本好書,雖然以目前的階段來說頗硬,但多了解 JS 深度也是將來會去面對的,將來也勢必會再重讀這一本書,所以就提早了解概況吧。

Read more »

Array 33

媽媽說,蘋果要挑大顆又漂亮來拜,神明才會保佑我們。

map()filter()常常被稱為最好用的兩個陣列方法,之所以好用,有一個原因是我們可以任意要求對每個元素所做的事,無論是運算或是篩選,不只這樣,這兩個陣列都是會回傳回來一個新的陣列,且不會更動到原來的陣列,處理陣列時,可以拿這兩位兄弟做很多事情哩!

Read more »

Day 32

如果日行一善可以持續,那鐵人應該也可以。

上一篇我們講解了陣列方法的 forEach(),知道它可以做迭代這件事,但在 ECMAScript 5 的陣列方法中大部分的方法都是以迭代為基礎,map()也是。

map()算是陣列方法中最實用的方法之一,我們可以用map()來轉換陣列內的元素,轉換成什麼可由我們決定,以我們想要的方式轉換後,map()會幫我們這些轉換結果,放入另一個新的陣列,回傳回來。

Read more »

Day 31

別一張張的發傳單,宣傳什麼折扣吧!NewsLetters 鍵按寄出一次搞定,像迭代一樣。

前幾篇我們聊到了 ECMAScript 5 的陣列方法,聊到這些方法都有迭代(iterating)的特色,也就是把我們想要執行的函式,從頭到尾逐一(iterates through)的把陣列裡的元素帶進去這個函式處理一遍,forEach()便是我們會常用的方法之一。

Read more »