全文共2003字，預計學習時長
9分鐘
圖源：unsplash
編輯 搜圖或許你一直在從頭開始構建React應用程序，這當然無可厚非。但當你遇見了今天要介紹的這些庫，一定會感嘆相見恨晚！
React最令人喜愛的地方是，沒有固定的方法來構建應用程序。開發人員可以自由選擇要使用的庫和要遵循的模式，你可以隨意去實現自己天馬行空的想法。
在這裡所創建的大多數應用程序，無論是用於工作還是個人項目，都是從相同的庫開始的。
利用React社區，你不必再耗時另起爐灶，可以花更多的時間為用戶提供價值。
所以千萬不要錯過呀~
1. Formik
面對現實吧，幾乎所有的網絡應用程序都有表單，這是一件很棘手的事情。
對於用戶來說，沒有什麼比表單不能正常工作，或在錯誤驗證後重置，再次輸入所有信息更讓人沮喪的了。表單正確，是網絡應用程序中讓用戶擁有良好體驗的關鍵。
圖源：unsplash
那就意味著：
· 表單字段應具有客戶端驗證。
· 字段在用戶“觸摸”或表單提交之前不應顯示錯誤。
· 無效提交時，表單狀態不應為“丟失”或“重置”。
· 提交後，表單應該進行異步（服務器端）驗證。
自己編寫一個處理所有這些事情的組件是相當複雜的。需要跟蹤所有表單值，以及所有表單字段的“觸摸”狀態，甚至包括 “錯誤”。
此外，還需要構建表單提交的邏輯。這些都需要足夠通用，以便在整個應用程序中重用。沒有人想在登錄表單、註冊表單、地址表單等等中一遍遍重複它。
所以，使用React社區的一個流行庫，是比自己構建更好的選擇。
Formik是JaredPalmer開發的一個庫，在這裡，表單編寫變得輕而易舉。
2. 測試庫
測試省了很多時間。當筆者創建一個複雜的特性或組件時，總是在設計、產品和開發之間“遊蕩”。設計師可能會要求進行視覺或UX更改，產品部門可能要求更改UX。筆者只得不斷地反覆、重構和更新組件。
通過確保組件或特性的正確測試，可以確保這種重構不會允許迴歸潛入代碼庫。它節省了大量的人工測試時間，這給了人們更多信心。
圖源：unsplash
涉及到測試React應用程序時，有一個黃金標準:testing-library/react，也稱為react-testing-library。它已經內置在create-react-app中，所以入門就變得很簡單啦。
使用testing-library，可以從用戶的角度測試組件。
什麼意思？下面用一個實際的例子來說明。
在這個示例中，筆者為一個簡單的註冊表單編寫了一個測試。它要求用戶提供姓名、電子郵件和密碼。這些都是必填字段，如果省略了任何一項，那麼表單應該在提交時顯示一個錯誤。
<code>import {render, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SignupForm } from "./Form";describe("SignupForm",() => {
it("should show an error whenpassword is omitted", () => {
const rendered =render(<signupform>);
const nameInput =rendered.queryByLabelText("Name");
userEvent.type(nameInput, "JohnSmith");
const emailInput =rendered.queryByLabelText("Email");
userEventtype(emailInput, "[email protected]");
const submitButton =rendered.queryByText("Submit");
userEvent.click(submitButton);
expect(
rendered.queryByText("Pleaseinput your password")
).toBeInTheDocument();
});
});/<code>如你所見，首先使用react-testing-library呈現註冊表單。
之後輸入姓名與郵箱。
之後點擊提交。
最後，出現了“請輸入您的密碼”。
這個測試中的一切都基於用戶如何與表單交互。可以重構表單以使用不同的輸入，將其拆分成多個react組件，所有這些都不會破壞測試。
3. CSS-Modules和Classnames
圖源：unsplash
當筆者開始一個新的React項目時，通常會選擇CSS-Modules。create-react-app中內置了支持，很容易上手。
當然，可以通過遵循BEM來避免依賴，但是需要學習如何使用BEM。CSS-Modules提供了可預測的、範圍有限的、清晰的CSS。
筆者喜歡將classnames和CSS-Modules一起使用。先看下面這段代碼：
<code>constclassName = 'button ' + props.hasError ? 'error' : '';return (
<button>
);/<code>
有了classnames，可以進行簡化，然後變成這樣：
<code>constButton = props => (
<button> className={classnames("button", { error: props.hasError })}
{...props}
/>
);/<button>/<code>
甚至可以將它與CSS-Modules相結合：
<code>importstyles from './Button.module.css';const Button = props => (
<button> className={classnames(styles.button,{ [styles.error]: props.hasError })}
{...props}
/>
);/<button>/<code>
有作用域，易於編寫CSS，就問你香不香！
4. Downshift
也許你會問，為什麼要使用外部庫來創建像下拉列表或選擇輸入這樣簡單的東西呢？
構建一個基於鼠標單擊打開或關閉的組件確實非常簡單。但與許多前端任務一樣，困難的不僅僅是構建組件。
創建一個大量依賴屏幕閱讀器的互聯網用戶可訪問和可用的下拉列表不簡單，讓它在keyboardusers中正常工作並非易事。
這就是筆者喜歡使用downshift的原因。它具有這樣的可訪問性，並可自行選擇其他的功能與形式。
圖源：unsplash
當筆者開始一個新的React應用程序時，總會安裝這些庫，省時省力，豈不美哉？
Formik能更快編寫漂亮的表單。
測試庫 有助於編寫耐用的集成測試，為應用程序提供信心。
CSS Modules 和 classnames 用於編寫有作用域的CSS。
Downshift 可以創建可訪問的組合框和選擇輸入，而無需覆蓋默認樣式。
這樣的神器，你值得擁有！
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章
