了解 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
...