原创 React Router Config(React 集中配置式路由)

React Router Config 簡介 React Router Config 是 React Router 的一個輔助工具,主要幫你做集中配置式路由 什麼是配置式路由呢,如下 import App from '../App

原创 mobx-react-lite 基於 React Hook API 輕量級狀態管理

Hook 簡介 官方原話:Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。 隨着 Hook API 的發佈,使得函數式組件生態也逐漸豐富起

原创 Create React App文檔說明(二)

絕對路徑導入 可以對工程做一些配置使其支持 絕對路徑 導入,其結果跟在 webpack 中配置路徑別名效果相同 具體配置如下: 在工程下創建 jsconfig.json 文件(若是基於 TypeScript 開發,則是 tsc

原创 Create React App文檔說明(一)

可用的腳本 npm run eject 不可逆操作,將配置從項目依賴中移除,從而將配置項直接暴露給用戶,便於自定義配置的修改,然而官方並不推薦這樣做,很可能會導致一些部署問題的出現。 瀏覽器支持情況 默認支持所有現代瀏覽器,如果需要支

原创 Egg項目引入github第三方登錄

引言 近期在做開源項目登錄的時候除了使用賬密登錄以外,還想引入基於OAuth 協議的 Github第三方登錄,於是便有了下文的記錄。 不瞭解OAuth協議的看阮老師的這篇文章 理解OAuth 2.0 Egg中使用 Passport 鑑

原创 Egg項目做請求字段驗證-egg-validate-plus

開篇 近期在倒騰Github上一個已經開源的項目,其技術棧爲egg+sequelize+mysql+react,最重要的是還有配套視頻,是一個很好的全棧練習,下面也給大家分享一下。 Instagram 開源項目 ts版 作者:zho

原创 創建React16.6,Mobx5 和 Typescript3 初始工程

Getting started with MOBX 5 and TypeScript 3, React 16.6 原文爲一篇英文文章,整篇幾乎不用翻譯即可看懂,這裏只做簡要註解,轉載信息見文末。 When looking aro

原创 Promise中then的鏈式回調

看題! new Promise((resolve, reject) => { reject(1); // 確定promise狀態爲rejected }).then((fullfilled) =>

原创 VS Code:文藝範與實力的完美結合

主題搭配字體設置 提升效率除了高效的工具,當然還有主題外觀,話說長得好看,誰不想多看會,同樣也爲了緩解審美疲勞,自己小小的欺騙一下自己,也是提高工作效率的一種方式。 One Dark Pro 主題 Panda Theme 以上兩款

原创 EventEmitter事件通信(發佈訂閱)

基於框架(angular,react,vue等)開發的項目都有合適的狀態管理庫,一般也很少使用eventEmitter,那麼一些傳統的或者遺留的基於 jQuery + template 的項目如何處理通信問題呢? 解決方案: 發佈訂

原创 JavaScript 複雜判斷的更優雅寫法

前提 我們編寫js代碼時經常遇到複雜邏輯判斷的情況,通常大家可以用if/else或者switch來實現多個條件判斷,但這樣會有個問題,隨着邏輯複雜度的增加,代碼中的if/else/switch會變得越來越臃腫,越來越看不懂,那麼如何更

原创 玩轉Vue組件通信--終極版

引言 簡要總結於 掘金小冊->Vue組件精講 作者:Aresn iView作者 組件通信不管是在業務組件開發還是UI組件開發基本都是不可避免的,實際項目開發中一般會選擇引入vuex,這裏關於vuex不做過多介紹,不瞭解的可直接去

原创 回顧2018,生活與代碼已無法分離

引言 時隔多日,纔想起來補一遍關於2018年的生活與技術的文章,一方面是爲了直觀的看到自己的成長,另一方面,防止在19年底因自己的碌碌無爲而一味地安慰自己,也算是做了個對比。 此篇爲生活與技術的碎碎念,多爲描述生活、項目、還有一些苦逼

原创 使用 React.Suspense 替換 react-loadable

引言 當前大部分 React 應用需要使用 code splitting 的時候,都選擇使用優秀的 react-loadable 來處理檢測代碼段是否已加載。然而,隨着React v16.6 的發佈,我們有一個非常難得的機會 ,可

原创 [email protected] 配置 less 與 antd

[email protected] 在1.x版本中配置less見 1.x版本配置less [email protected] 升級2.x的版本後,有兩種配置less的方式 react-app-rewired (一個對 c