了解 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 ...
使用 useEffect 來掌管元件作用
可以取代 Class Component 的神兵利器之一，無疑是 useState 還有本篇介紹的 useEffect。
useEffect 基本運作的機制在 Class Component 中，有著生命週期的 API，生命週期代表著一個元件從誕生到結束，在 Vue 也有相似的概念，每個階段有不同的 API 可以操作。
為了測試 useEffect 如何在元件中運作，下方寫了一個範例：
12345678910111213141516171819import React, { useState, useEffect } from 'react'export default function App() { console.log('first'); const [msg, setMsg] = useState('default'); useEffect(() => { console.log('useEffect'); }); ret ...
Tailwind 安裝 React 篇
最近幾年火速竄紅的 CSS 框架 Tailwind 也是蠻多前端工程師開始使用，於是就有了本篇跟風仔的安裝篇XD
環境版本介紹本篇使用的是 Create-React-App 來建立環境，並且將會透過 NPM 來安裝 Tailwind。
React 版本：17.0.2
Node.js 版本：14.16 （官方建議版本12.13或以上）
Tailwind 版本：2.1.4
安裝流程
請在終端機輸入： $ npx create-react-app 專案名稱，安裝完後再 $ cd 進入專案資料夾中。
接著就要開始安裝 Tailwind 了，請輸入：
$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
這時候碰到一個問題，我的終端機跳出一個訊息：no matches found: postcss@^7
上網查了一下解法，如果跟我一樣遇到這個問題的話，請輸入：
$ npm install -D tailwindcss@npm:@tailwindcss/postc ...
Ruby 的邏輯判斷與流程控制
本篇文章將會提到 Ruby 該如何使用判斷式。
If在 JavaScript 中，如果要做判斷式的話，會這樣做：
123456let num = 10;if (num !== 5) { console.log('false');}// 結果會印出 false
而在 Ruby 中，也是差不多的作法：
123456num = 10if num != 5 puts 'false'end# 結果會印出 false
不過 Ruby 倒是提供了不一樣的寫法：
if not這個用法感覺起來比較像英文的寫法，上面的例子如果用 if not 來表示的話，就會是：
123456num = 10if not num == 5 puts 'false'end# 結果會印出 false
if 倒裝句這個寫法就更像英文了，如果寫起來就像是英文的倒裝句一樣，但是這個的用法只限一行的程式碼使用：
1234num = 10puts 'false' if not num == 5# 結果會印出 false
...
