使用 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
...
Ruby 的變數與常數使用
聽說 Ruby 的常數跟別的程式語言不一樣?本篇就來看看 Ruby 的變數與常數該怎麼使用。
變數的宣告與使用Ruby 的變數宣告非常簡單,只要在變數的後面加上等號跟值就宣告成功了,就像這樣:
12my_name = 'Bucky'num = 10
也可以一次宣告多個變數:
1x, y, z = 10, 4, 6
而且字串跟數字的使用也是非常靈活,例如:
123456789101112last_name = 'Bucky'first_name = 'Chu'age = 20girls_name = 'Patty'girls_age = 18puts "My name is #{last_name} #{first_name}, I'm #{age} years old."puts "My age bigest than #{girls_name} #{age - girl ...
Ruby[0] - 從安裝環境到 Hello World
前端玩久了,最近想接觸一下後端看看。但是後端語言這麼多,改選哪種呢?最後我選了 Ruby,她的語法看起來很有趣,而且平常工作上用不到,這樣才有想玩的動力吧XD
Ruby 環境安裝首先從安裝環境開始。可以直接從官網下載,或是使用 RVM 來管理並下載任何版本,本篇文章介紹的是使用後者的方法。
(本篇文章是用 Mac 環境安裝)
什麼是 RVM?RVM 是一種 Ruby 的版本管理套件,它可以讓使用者根據不同需求來安裝不同的版本使用。
相關介紹可以在 RVM 網站可以看到更多。
開始安裝 RVM
在 Terminal 輸入:
1$ \curl -sSL https://get.rvm.io | bash -s stable
接著確認有無安裝成功,輸入:
1$ rvm -v // 有顯示版本就代表安裝成功
開始安裝 Ruby
看看目前有哪些版本提供安裝:
1$ rvm ls known
接著輸入想要安裝的版本,例如 3.0:
1$ rvm install 3.0
確認有無安裝成功:
1$ ruby -v // 有顯示版本就代表安裝成功
Ruby 的 He ...
Vuex 中的 Computed 用法 - Getters
在公司專案中,有多筆資料是從 actions 的回傳結果再透過 mutations 來更改資料狀態。這時候想要透過 computed 來處理這些資料,但是還要再把資料傳入 components 中再做處理,感覺總是沒那麼即時,如果在 Vuex 裡面也可以做 computed 就好了…咦?還真的有嗎!?太方便了吧!
需求我的資料有複數筆陣列,結構如下示範:
123const list_one = ['A001', 'A002', 'A003', 'A004'],const list_two = ['B001', 'B002', 'B003'],const list_three = ['C001', 'C002', 'C003', 'C004', 'C005']
我的需要是將複數筆陣列的資料給合併成一個陣列,然後再去做資料處理。
Getters 的 ...