avatar
文章
97
標籤
105
分類
23

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

Bucky's f2e bucket

React Native x Expo x TypeScript 實作計算機
發表於2023-02-24|React Native
讓我們來用 React Native 和 Expo,還有 TypeScript 來寫一個計算機手機 App 吧! 什麼是 React Native?React Native 是一個用於構建移動應用程序的 JavaScript 框架。可以讓開發者使用 ReactJS 為 iOS 和 Android 平台創建手機 App。 React Native 提供了一套預構建的組件,可以用來構建應用程序的用戶界面,使得創建移動應用程序變得快速而簡單。 什麼是 Expo?Expo 是一套用於構建和部署 React Native 應用程序的工具和服務。它為開發者提供了一個平台,可以在各種設備和平台上輕鬆設置、運行和測試他們的 React Native 應用。 Expo 還提供了一系列的 library 和 API,可用於為應用程序添加功能,如照相、推送通知等。 建立專案首先來建立專案,如果這個專案取名為 calculator,那麼就執行以下指令: 1npx create-expo-app calculator --template 因為我們要使用 TypeScript,所以我們要選擇 blank (T ...
React.js 全攻略班推薦給想要精進自我的前端工程師
發表於2023-02-15|React 學習系列
作為一名前端工程師,由於在日常工作中經常使用 React.js,而且也非常地喜愛這個前端框架。所以,為了更加了解 React.js,並且能更精進自我,我決定選擇了「React.js 全攻略 - 入門到進階」這門課程,由五倍紅寶石舉辦,並由奶綠茶老師教導。 為什麼選擇這門課?為什麼選擇上這門課?首先是因為我本身對 React.js的興趣,希望在這門課中學到更多的知識。其次,五倍紅寶石在業界十分著名,師資團隊一字排開都是業界的大神,也都擁有豐富的教學經驗,因此我對這門課非常感興趣,也覺得可以為我的職涯帶來幫助。 這門課帶給我什麼幫助在這門課中,我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習,老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分,在幽默風趣的奶綠茶老師講解後,也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js,也知道了一些程式碼底層如何運作,對於 React.js 有非常深刻的了解。 除此之外,奶綠茶老師也教導我們一些在開發實戰的經驗與技巧,還有如何讓 React 能夠 ...
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表
發表於2023-02-11|React 測試
前言本文將涵蓋測試列表、測試列表內容、以及測試 App 元件。我們依然會使用 Jest + React Testing Library 來實現測試。 測試列表接下來接續上一篇未完成的測試,我們來測試一個列表的元件,這個元件會接收一個陣列,並且將陣列中的每個元素渲染成一個列表項目。 如果不想翻到上一篇文章,可以直接看這個 Demo。 那麼首先在測試之前,要先來看一下這個元件預期會怎麼呈現。 預期會透過 props 傳來一個 users 這個陣列,並且將陣列中的每個元素渲染成一個列表項目。 必須要確保是否正確呈現列表項目,所以我們可以這麼寫測試: 1234567891011121314import { render, screen, within } from '@testing-library/react'import List from "./List"test('it renders a list of users', () => { const users = [ { ...
使用 Jest 和 React Testing Library 進行測試的方法
發表於2023-02-09|React 測試
什麼是測試?以及為什麼需要?好的,什麼是測試? 測試的目的主要是想驗證我們所開發出來的東西是否按照預期的功能運作。 測試也是確保軟體品質的重要步驟,在撰寫完程式碼之後對其進行檢查,以確保功能是正確的。而測試也可以讓開發者在過程中確定自己的開發是否正確,既可以增加開發者的信心,也可以讓開發者在開發過程中更加清楚自己的開發方向。 當然我們可以透過手動測試來驗證,但是這樣的話會花費大量的時間,而且也不夠精準,因此我們需要一個自動化的測試工具,來幫助我們測試。 因為測試因為目的的不同,所以也有不同的種類,例如有分成 Unit Test、Integration Test、End-to-End Test 等等。當然還有其他的種類,但主要是以這三種為最常見,也最為流行的種類。 Jest 和 React Testing LibraryJestJest 是一個由 Meta 所維護的 JavaScript 單元測試框架,由於提供了基於 JavaScript 的測試環境,適合讓開發 JavaScript 的程式進行測試,例如三大前端框架 React、Vue、Angular 都可以使用。它具有自動化測試、快速 ...
Rust x React
發表於2022-10-15|30 天快快樂樂學 Rust
終於到最後一天了,看到這篇文章覺得很有趣,所以今天我們來玩一下 Rust 跟 React 的結合吧! 開始專案首先我們先建立一個新的專案,這邊我們使用 create-react-app 來建立一個新的專案,並且使用 yarn 來安裝相依套件。 123$ yarn create react-app rust-react$ cd rust-react$ yarn 建立 Rust接下來我們在專案中建立一個 Rust 的 library: 1$ cargo new wasm-lib --lib 然後會在專案中看到一個 wasm-lib 的資料夾,裡面會有一個 src 資料夾,裡面會有一個 lib.rs 的檔案,這個檔案就是我們的 Rust library。 因為我們預計想要做一個可以點擊加減的按鈕,然後回傳計算結果,所以我們可以在 lib.rs 中加入: 12345678pub fn calculator(a: i32, b: i32) -> i32 { a + b}#[test]fn cal_test() { assert_eq!(1 + ...
用 Rust 來寫前端 - Yew
發表於2022-10-14|30 天快快樂樂學 Rust
今天是我們一起學習 Rust 的第 29 天了,前面我們玩了很多後端的東西,今天我們來玩一下前端的東西吧! WebAssembly在開始之前,想先介紹一下 WebAssembly,它是一種可以在瀏覽器中執行的程式語言,它可以讓我們在瀏覽器中執行非常複雜的程式,而且它的執行速度也非常快,所以我們可以在瀏覽器中執行一些比較複雜的運算,而不會影響到瀏覽器的體驗。 YewYew 是一個可以讓我們在 Rust 中使用 WebAssembly 的框架,它可以讓我們在 Rust 中撰寫前端的程式,並且可以編譯成 WebAssembly,讓我們在瀏覽器中執行。 安裝 Yew那麼我們要如何使用 Yew 來開發前端的程式呢?按照官網的指示,我們要先安裝以下的東西: WebAssembly1$ rustup target add wasm32-unknown-unknown Trunk1$ cargo install trunk 開新專案1$ cargo new yew-demo 然後在 Cargo.toml 中加入以下的內容: 12[dependencies]yew = "0.19&quo ...
來玩 Rust 的框架吧! - Rocket - Part III
發表於2022-10-13|30 天快快樂樂學 Rust
我們今天要來做 Auth,一個基本的身分驗證功能,不想要讓任何人都可以隨便使用我們的 API。 安裝套件因為我們驗證的處理會使用到 base64 編碼,所以首先我們先在 Cargo.toml 加入 base64 這個 crate。 12[dependencies]base64 = "0.13" 由於目前 main.rs 中的 code 有點多,所以我們另外開一個檔案來處理。直接在 src 資料夾下新增一個 auth.rs 檔案,並且在 main.rs 中加入 mod auth;。 在 auth.rs 中我們先來定義一個 BasicAuth 的 struct,並且在裡面定義一個使用者名稱和密碼的欄位。 1234pub struct BasicAuth { username: String, password: String,} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455use ...
來玩 Rust 的框架吧! - Rocket - Part II
發表於2022-10-12|30 天快快樂樂學 Rust
昨天我們用已經用 Rocket 建立了一個 server,並且可以接收回傳 JSON,今天就來了解一下怎麼使用 Rocket 建立一個 RESTful API。 RESTful API我們會建立一個簡單的 Restful API 的範例,分別會用到 GET、POST、PUT、DELETE 這四個 HTTP method,接下來我們就來看看怎麼實作。 分別建立以下的函式,這邊使用 #[get]、#[post]、#[put]、#[delete] 來指定 HTTP method: 123456789101112131415161718192021222324#[get("/demo")]fn get_demo() -> Value { json!([{ "id": 1, "name": "Bucky" }, { "id": 2, "name": "Tom" }])}#[get(&qu ...
來玩 Rust 的框架吧! - Rocket - Part I
發表於2022-10-11|30 天快快樂樂學 Rust
今天開始我們將會開始使用 Rust 的 Web 框架 – Rocket,來建立一個簡單的 Web Server。 Rocket 是什麼?簡單介紹一下 Rocket,Rocket 是一個基於 Rust 語言的一個 Web 框架,截止目前為止在 GitHub 上一共有 18.6k 的星星數。 Rocket 的設計靈感來自於 Ruby on Rails、Flask等知名的 Web 框架,並且在設計上有著類似的特性,並以 3 個核心概念來設計: 安全、正確,還有重視開發者體驗。 所有的請求都會由 Rocket 來處理型別。 不強制使用 Rocket 的函式庫,可以讓開發者自由選擇。 然後個人覺得 Rocket 的文件寫的非常的完整,算是蠻適合新手入門的一個框架。 從 Hello World 開始那麼我們就從一個簡單的 Hello World 開始,首先我們先建立一個 binary-based 的新專案: 1$ cargo new --bin rocket-server 安裝 Rocket在 Rust 安裝套件非常容易,只要在 Cargo.toml 裡面 [dependencies] 的下方 ...
來用 Rust 建立一個伺服器吧!Part IV
發表於2022-10-10|30 天快快樂樂學 Rust
昨天我們新增了一個檔案,專門來做執行緒池的部分,但還沒完成,所以今天就接著繼續完成。 建立執行緒池的儲存空間首先我們要建立一個儲存執行緒的空間,這個空間會儲存所有的執行緒,然後我們可以從這個空間取出執行緒來使用。 12345678910111213141516171819202122use std::thread::JoinHandle;pub struct ThreadPool { threads: Vec<JoinHandle<()>>,}impl ThreadPool { pub fn new(size: usize) -> ThreadPool { assert!(size > 0); let mut threads = Vec::with_capacity(size); for _ in 0..size { // 產生執行緒並儲存至向量 } ThreadPool { t ...
12…10
avatar
Bucky Chu
巴奇的前端桶
文章
97
標籤
105
分類
23
Follow Me
公告
本網站更新至 hexo 5.4.0
最新文章
React Native x Expo x TypeScript 實作計算機
React Native x Expo x TypeScript 實作計算機2023-02-24
React.js 全攻略班推薦給想要精進自我的前端工程師
React.js 全攻略班推薦給想要精進自我的前端工程師2023-02-15
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表2023-02-11
使用 Jest 和 React Testing Library 進行測試的方法
使用 Jest 和 React Testing Library 進行測試的方法2023-02-09
Rust x React
Rust x React2022-10-15
分類
  • 30 天快快樂樂學 Rust30
  • ES6 好用語法2
  • Electron1
  • Gulp 前端自動化工具開發2
  • Hexo1
  • JS 基礎回顧6
  • JavaScript 作品實戰班 - 學習心得1
  • JavaScript 的怪奇物語6
標籤
City Weather App DOM ES6 JavaScript JavaScript 作品實戰班 React Vuex actions api arrow function build class cli codewar component creat-react-app create react app css delete post destructuring assignment electron expo fizz buzz form function getters gulp hello world hexo hoisting hook if else import install javascript jest jsx logical operators map mixin
歸檔
  • 二月 20234
  • 十月 202215
  • 九月 202215
  • 三月 20223
  • 二月 20223
  • 七月 20211
  • 六月 20212
  • 五月 20213
網站資訊
文章數目 :
97
本站訪客數 :
本站總訪問量 :
最後更新時間 :
©2020 - 2023 By Bucky Chu
框架 Hexo|主題 Butterfly