React.js 全攻略班推薦給想要精進自我的前端工程師
作為一名前端工程師，由於在日常工作中經常使用 React.js，而且也非常地喜愛這個前端框架。所以，為了更加了解 React.js，並且能更精進自我，我決定選擇了「React.js 全攻略 - 入門到進階」這門課程，由五倍紅寶石舉辦，並由奶綠茶老師教導。
為什麼選擇這門課？為什麼選擇上這門課？首先是因為我本身對 React.js的興趣，希望在這門課中學到更多的知識。其次，五倍紅寶石在業界十分著名，師資團隊一字排開都是業界的大神，也都擁有豐富的教學經驗，因此我對這門課非常感興趣，也覺得可以為我的職涯帶來幫助。
這門課帶給我什麼幫助在這門課中，我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習，老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分，在幽默風趣的奶綠茶老師講解後，也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js，也知道了一些程式碼底層如何運作，對於 React.js 有非常深刻的了解。
除此之外，奶綠茶老師也教導我們一些在開發實戰的經驗與技巧，還有如何讓 React 能夠 ...
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表
前言本文將涵蓋測試列表、測試列表內容、以及測試 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 進行測試的方法
什麼是測試？以及為什麼需要？好的，什麼是測試？
測試的目的主要是想驗證我們所開發出來的東西是否按照預期的功能運作。
測試也是確保軟體品質的重要步驟，在撰寫完程式碼之後對其進行檢查，以確保功能是正確的。而測試也可以讓開發者在過程中確定自己的開發是否正確，既可以增加開發者的信心，也可以讓開發者在開發過程中更加清楚自己的開發方向。
當然我們可以透過手動測試來驗證，但是這樣的話會花費大量的時間，而且也不夠精準，因此我們需要一個自動化的測試工具，來幫助我們測試。
因為測試因為目的的不同，所以也有不同的種類，例如有分成 Unit Test、Integration Test、End-to-End Test 等等。當然還有其他的種類，但主要是以這三種為最常見，也最為流行的種類。
Jest 和 React Testing LibraryJestJest 是一個由 Meta 所維護的 JavaScript 單元測試框架，由於提供了基於 JavaScript 的測試環境，適合讓開發 JavaScript 的程式進行測試，例如三大前端框架 React、Vue、Angular 都可以使用。它具有自動化測試、快速 ...
Rust x React
終於到最後一天了，看到這篇文章覺得很有趣，所以今天我們來玩一下 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
今天是我們一起學習 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
我們今天要來做 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
昨天我們用已經用 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
今天開始我們將會開始使用 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
昨天我們新增了一個檔案，專門來做執行緒池的部分，但還沒完成，所以今天就接著繼續完成。
建立執行緒池的儲存空間首先我們要建立一個儲存執行緒的空間，這個空間會儲存所有的執行緒，然後我們可以從這個空間取出執行緒來使用。
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 ...
來用 Rust 建立一個伺服器吧！Part III
在開始建立多執行緒伺服器之前，我們先來模擬一下單一執行緒伺服器會遇到的問題。
模擬請求問題直接上 code 吧！
123456789101112131415161718use std::thread; // 引入 thread 模組use std::time::Duration; // 引入 Duration 模組// 省略...fn handle_connection(mut stream: TcpStream) { // 省略... let delay = b"GET /delay HTTP/1.1\r\n"; let (status_line, path) = if buffer.starts_with(get) { ("HTTP/1.1 200 OK", Path::new("./src/HTML/hello.html")) } else if buffer.starts_with(delay) { thread::sleep( ...
