用 Cargo 管理專案好棒棒
昨天我們自己新增了一個副檔名為 rs 的檔案，然後在終端機執行 rustc 來編譯出結果。雖然這樣的作法沒什麼問題，但是只適合用在簡單的情況下。如果是一個龐大而且複雜的案例的話，顯然是沒辦法很有效地管理我們的專案，於是 Rust 也幫我們設想好，並且提供了 Cargo。
什麼是 CargoCargo 可以做到套件管理、建構系統、跑測試，甚至是產生文件，Cargo 的角色就像是 JavaScript 的 NPM，或是 Python 的 Pip。
由於安裝 Rust 的時候，已經順便安裝了 Cargo，如果想確認有沒有安裝完成的話，可以在終端機輸入：
$ cargo –version
或是
$ cargo -V
正常顯示出版本號的話，就代表你的 Cargo 已經安裝好了。
建立專案既然已經有了 Cargo，那麼接下來就來用 Cargo 來建立一個專案。例如要建立一個名稱為 hello_world 專案的話請在終端機輸入：
1$ cargo new hello_world
可以看到 Cargo 幫我們建立了一個 hello_world 專案，並且產生下圖中的檔案以及目錄。
可以看到 Ca ...
先從意料中的 Hello World 開始
今天就先從最基本的 Hello World 開始我們的 Rust，但第一步要先安裝環境，那麼就開始吧！
安裝基本上在安裝過程中沒有太多的難度，也不用繁複的設定，就可以在各個系統中順利安裝。
由於我是使用 Mac 來安裝，所以只需要開啟終端機，並輸入：
1$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
這裡是使用 rustup 這個版本管理工具來進行安裝，接著會如下圖中，問你要怎麼安裝，如果沒有什麼特殊需求的話，我們只需要輸入 1 用預設的就好。
沒什麼意外的話，就會跟你說安裝已完成，但他還提示我們需要設定環境變數，一樣照著他指示的做，在終端機輸入：
1$ source "$HOME/.cargo/env"
如果上述的過程中都沒遇到問題的話，那就來檢查是否安裝成功，輸入：
1$ rustc -V
或是：
1$ rustc --version
如果成功安裝的話，就會顯示安裝的版本，截至目前最新的版本是 1.63.0
如果是其他系統的使用者的話，進入到 Ru ...
開始學 Rust 的前言
學習的動機我是一個前端工程師，但一直想找個程式語言來學一下後端。雖然說 JavaScript 發展到現在，也已經有 Node.js 可以來做後端的工作，甚至也有很多框架可以選擇。但都寫了這麼久的 JavaScript，雖然還不到膩，但還是想要學點新東西。
所以就看了很多文章，聽取很多大大的建議，老闆也時不時的推坑，介紹 Rust 有多猛就有多猛，看得我覺得 Rust 好像很神，所以就決定這次鐵人賽要以學好 Rust 為主要目標，希望能夠以一個程式小白的角度，儘量不去跟其他語言做比較，寫出我自己所理解的 Rust，然後這 30 天就快快樂樂的體會 Rust 帶給我的樂趣吧！
什麼是 Rust？既然已經決定要開始學 Rust，總是要先了解一下學 Rust 可以幹嘛。
所以，什麼是 Rust？
Rust 是由 Graydon Hoare 所設計，起初這只是他自己的一個 Side Project，後來他進入了 Mozilla，也就是 FireFox 的公司。然後 Mozilla 開始贊助並主導開發，並且也試著把 FireFox 的 C + + 的程式碼部分，取代為成安全性較高的 Rust。 ...
了解 Redux 並實作一個範例
在開發網站時，有時狀態可能會傳來傳去，不好掌控狀態流，就可能會有 bug，這不是開發者樂見的，還好我們有 Redux 可以幫忙處理這個問題。
什麼是 ReduxRedux 是一個管理狀態的 JavaScript library，一般會跟 React 搭配使用。但其實可以運用在原生的 JavaScript，甚至在其他 JavaScript 框架也能使用。
Redux 核心概念可以參照下圖所示 ⬇️
Redux 的概念是所有 state 是來自建立的 store 統一管理，而 state 是唯讀，能夠確保不會隨意變更。
當某一個元件想要改變 state 時，必須要透過 dispatch 去發送 action。
Reducer 是一個 pure function，會帶入 state 和 action，並且回傳一個新的 state，藉由這樣的動作去變異 store 中管理的 state。
實作範例這篇會透過原生的 JavaScript 來實作一個加減點擊案例。
從 Redux 取出 creatStore，並建立一個 store 變數123const { createStore & ...
除了 useState，你可以選擇更好管理狀態的 useReducer
標題有點引戰，但是如果想要跨元件處理狀態，並且狀態非常複雜的話，那麼 useState 可能就不是那麼好管理，也許可以試試看 useReducer。
使用情境之前有寫過 useState 的介紹文章，裡面的範例是一個點擊器，可以透過點擊不同按鈕去反應結果，這篇就來使用 useReducer 來做出一樣的成果。
初始設置首先將會分成 3 個元件，分別是加按鈕、減按鈕，還有計算結果，這邊計算結果是用 input 欄位，可以讓使用者自行輸入。
1234567891011121314151617181920// 減const MinusCount = () => { return <button type="button">-</button>;};export default MinusCount;// 加const PlusCount = () => { return <button type="button">+</button>;};exp ...
使用 useContext 處理跨元件狀態
寫了這麼久 React，發現我的筆記都沒整理過，趁最近比較不忙來清理一下筆記 XD這次要分享的是跨元件處理狀態的 hook – useContext。
使用情境一般寫 React 時，如果需要將元件的狀態傳遞的話，如果是簡單的父子元件傳遞，可以用 props 來傳。但如果是很多層的情況，或是同層的子組件要互傳狀態的話，可能用 props 就不是這麼適合。當然也可以使用一些狀態管理的套件，例如：Redux（之後會找時間分享）。不過，其實 React 內建就有 useContext 這個 hook，這邊就來示範一下作法：
使用的情境是分別有兩個元件，有一個輸入框 - A，跟一個顯示輸入的文字 - B，如果 A 改變輸入的文字，那麼 B 就會即時顯示該文字。
初始設置以下是原始的程式碼，可以看到分別有 InputText.js 跟 ShowText.js 兩個元件放在 App.js 中
12345678910111213141516171819202122232425262728293031323334353637// App.jsimport InputText from ' ...
使用 Electron 搭配 React 建置桌面程式
這次公司打算把專案製作的網頁打包成桌面程式，之前就已經知道有 Electron 這個工具可以用，剛好趁這個機會來紀錄一下過程。
什麼是 ElectronElectron 原本是 GitHub 開發的一個開源框架，使用 Node.js (後段) 與 Chromium (前端)，可以讓開發者透過 JavaScript、HTML 和 CSS 就可以來製作跨平台的桌面 GUI 應用程式，現在開發者常用的 Visual Studio Code 就是使用 Electron 建置的。
簡介本次計畫是要將我之前練習的作品，打包成桌面程式。
專案初始如果是新專案的話，可以使用 Create React App 來建立專案，並且要加上 TypeScript。
1$ yarn create react-app my-app --template typescript
如果是像我這次要做的，在原有專案加上 TypeScript，就執行以下：
1$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
安裝插件 ...
全域環境與全域物件
這一篇文章會提到全域環境與全域物件在瀏覽器中的執行。
全域環境
首先來執行個 JavaScript 檔案看看：
1
等等，這是空的耶！沒寫任何東西也能執行嗎？
首先在執行 JavaScript 時，會先創造全域執行環境，所謂的全域代表可以在任何地方取用它。
而全域環境會創造 2 樣東西：
全域物件
特殊變數 - this
全域物件
我們試著打開瀏覽器開發者工具的 console，雖然看起來沒東西
但是輸入 this 看看，可以發現明明沒有輸入任何程式碼，卻出現了 Window 這個物件
而這個 window 物件，就是瀏覽器裡這個頁面的全域物件。
this 代表的是這個分頁，如果開另一份分頁，會有另一個全域物件。
每一個視窗都會有自己的執行環境，和自己的全域物件。
來看以下的範例，建立一個變數，並給它一個值：
1var a = "hello"
這時候再打開 console ，輸入 window 看看。可以看到裡面多了一個物件，名稱是 a，值是 “hello”。
由於創造變數時，變數不是在函式中，所以變數會和全域物件連結，這時的 a 就是全域物件。
...
JS notice： 名稱/值配對與物件
這篇會稍微了解物件在 JavaScript 中的判別。
名稱/值配對
首先，名稱/值的配對，代表一個名稱會對應到唯一的值，例如：
1year = 2020
嗯，就這樣而已，不用想的太複雜。
物件
物件在 JavaScript 中也是名稱與值的配對組合，例如：
123{ dcHero: "Batman"}
而這個名稱或值甚至可以是多種名稱/值的配對，例如：
12345678var dcHero = { name: 'Batman', skill: ['有錢', '有高級裝備', '潛行'], location: { place: '高譚市', base: '韋恩豪宅' }}
就算是這樣多層的關係，也可以看得出名稱/值的關係，不用想的太複雜。
React Search Photo Demo
本次練習要在 Vite 上使用 React，並實作一個搜尋表單，輸入文字並透過 Unsplash API 來搜尋並顯示圖片。
前置作業使用 Vite 建立專案，並使用 Semantic UI 的 CDN 來做基本的美化：
Vite 建立專案 react-form-demo
123$ yarn create @vitejs/app react-form-demo --template react$ cd react-form-demo$ yarn
在 index.html 貼上 Semantic UI CDN Link
1https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
完成基本介面
12345678910111213// App.jsximport React from 'react'import SearchBar from './components/SearchBar'function App() { retur ...
