avatar
文章
63
標籤
98
分類
20

首頁
時間軸
標籤
分類
友鏈
Bucky's f2e bucket
首頁
時間軸
標籤
分類
友鏈

Bucky's f2e bucket

了解 Redux 並實作一個範例
發表於2022-03-10|好用函式庫介紹
在開發網站時,有時狀態可能會傳來傳去,不好掌控狀態流,就可能會有 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
發表於2022-03-03|React 學習系列
標題有點引戰,但是如果想要跨元件處理狀態,並且狀態非常複雜的話,那麼 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 處理跨元件狀態
發表於2022-03-02|React 學習系列
寫了這麼久 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 建置桌面程式
發表於2022-02-24|Electron
這次公司打算把專案製作的網頁打包成桌面程式,之前就已經知道有 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 安裝插件 ...
全域環境與全域物件
發表於2022-02-24|JavaScript 的怪奇物語
這一篇文章會提到全域環境與全域物件在瀏覽器中的執行。 全域環境 首先來執行個 JavaScript 檔案看看: 1 等等,這是空的耶!沒寫任何東西也能執行嗎? 首先在執行 JavaScript 時,會先創造全域執行環境,所謂的全域代表可以在任何地方取用它。 而全域環境會創造 2 樣東西: 全域物件 特殊變數 - this 全域物件 我們試著打開瀏覽器開發者工具的 console,雖然看起來沒東西 但是輸入 this 看看,可以發現明明沒有輸入任何程式碼,卻出現了 Window 這個物件 而這個 window 物件,就是瀏覽器裡這個頁面的全域物件。 this 代表的是這個分頁,如果開另一份分頁,會有另一個全域物件。 每一個視窗都會有自己的執行環境,和自己的全域物件。 來看以下的範例,建立一個變數,並給它一個值: 1var a = "hello" 這時候再打開 console ,輸入 window 看看。可以看到裡面多了一個物件,名稱是 a,值是 “hello”。 由於創造變數時,變數不是在函式中,所以變數會和全域物件連結,這時的 a 就是全域物件。 ...
JS notice: 名稱/值配對與物件
發表於2022-02-24|JavaScript 的怪奇物語
這篇會稍微了解物件在 JavaScript 中的判別。 名稱/值配對 首先,名稱/值的配對,代表一個名稱會對應到唯一的值,例如: 1year = 2020 嗯,就這樣而已,不用想的太複雜。 物件 物件在 JavaScript 中也是名稱與值的配對組合,例如: 123{ dcHero: "Batman"} 而這個名稱或值甚至可以是多種名稱/值的配對,例如: 12345678var dcHero = { name: 'Batman', skill: ['有錢', '有高級裝備', '潛行'], location: { place: '高譚市', base: '韋恩豪宅' }} 就算是這樣多層的關係,也可以看得出名稱/值的關係,不用想的太複雜。
React Search Photo Demo
發表於2021-07-11|開發筆記
本次練習要在 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 來掌管元件作用
發表於2021-06-14|React 學習系列
可以取代 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 篇
發表於2021-06-03|Tailwind 試玩
最近幾年火速竄紅的 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 的邏輯判斷與流程控制
發表於2021-05-16|從零開始寫 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 ...
12…7
avatar
Bucky Chu
巴奇的前端桶
文章
63
標籤
98
分類
20
Follow Me
公告
本網站更新至 hexo 5.4.0
最新文章
了解 Redux 並實作一個範例
了解 Redux 並實作一個範例2022-03-10
除了 useState,你可以選擇更好管理狀態的 useReducer
除了 useState,你可以選擇更好管理狀態的 useReducer2022-03-03
使用 useContext 處理跨元件狀態
使用 useContext 處理跨元件狀態2022-03-02
使用 Electron 搭配 React 建置桌面程式
使用 Electron 搭配 React 建置桌面程式2022-02-24
全域環境與全域物件
全域環境與全域物件2022-02-24
分類
  • ES6 好用語法2
  • Electron1
  • Gulp 前端自動化工具開發2
  • Hexo1
  • JS 基礎回顧6
  • JavaScript 作品實戰班 - 學習心得1
  • JavaScript 的怪奇物語6
  • React 學習系列16
標籤
City Weather App DOM ES6 JavaScript JavaScript 作品實戰班 Vuex actions api arrow function build class cli codewar component creat-react-app create react app css delete post destructuring assignment electron fizz buzz form function getters gulp hello world hexo hoisting hook if else import install javascript jsx logical operators map mixin mutations next node.js
歸檔
  • 三月 20223
  • 二月 20223
  • 七月 20211
  • 六月 20212
  • 五月 20213
  • 三月 20211
  • 二月 20211
  • 一月 20211
網站資訊
文章數目 :
63
本站訪客數 :
本站總訪問量 :
最後更新時間 :
©2020 - 2022 By Bucky Chu
框架 Hexo|主題 Butterfly