JSON.stringify() And JSON.parse()
...
2020 年 6 月
有興趣想買的課
...
上傳圖片
純html＋JavaScript的圖片上傳功能很簡單，可以看這篇 How To Display Uploaded Image In Html Using Javascript ? 可是假設又有「拖曳上傳」需求的話，這篇就沒辦法滿足，所以用套件先擋擋...
react-select 小教學
react-select import React, { Component } from 'react' import Select from 'react-select' const options = [ { value: 'chocolate', label: 'Chocolate' }, ...
stackoverflow && github 問問題扣比句子貼上
Same problem here. Same here....
手工皂心得
正宗敘利亞 Najel 月桂油12% 阿勒坡手工古皂 180g (±10g) 姆，覺得洗了身體油油的不太好沖...
peerDependencies, devDependencies, dependencies
dependencies 跑這個程式需要的套件 devDependencies 開發的時候需要的套件，例如Jest之類的測試工具，但是執行的時候不需要（例如babel） peerDependencies 告訴安裝這個套件的人，需要自己安裝什麼套件 --save-dev 存到devDependenci...
安裝套件
npm install git+https://git….....
npm 套件製作
6/16的時候開始研究怎麼做npm套件，爬了一些文章，發現網路很多文章沒有交代很多 細節，需要爬很多文章才知道怎麼做。 在babel編譯的過程中也蠻多問題的 如果使用create-react-app的話，babel的config這樣設定就好 "babel": { "presets": [ [ "re...
How to clean npm cache
Just paste it: npm cache clean -- force...
How to Update npm Packages to their Latest Version
delete the package key/value in package.json reinstall it !...
webstorm React snippets
為了開發方便還是記一下好了！...
flex 必讀文章
A Complete Guide to Flexbox | CSS-Tricks A Visual Guide to CSS3 Flexbox Properties ― Scotch.io Flexy Boxes — CSS flexbox playground and code generatio...
react 視覺化工具
https://github.com/react-component/spider...
promise
promise是一個根據你給的callback function回傳的物件 ．callback在目前的promise沒跑完前，絕對不會執行 ．在then()裡的callback，不管promise有沒有成功，絕對會執行 參考文章： Using Promises...
react 不錯用的咚咚
react-spring/react-spring...
slick react jest
在react裡使用slick.js雖然簡單又方便，可是加入Jest snapshot test就錯誤百出了，亂試了一下解決方法。第一個錯誤解決了之後又有其它的錯誤。 第一個錯誤可以從issue看到有人也有一樣問題 Testing with Jest causes error #472 Jest te...
Jest手把手教學
首先開啟一個資料夾，乃做做Jest的測試。 mkdir jest-try 開啟好資料夾，在裡面開新專案 npm init -y 接下來就可以安裝Jest yarn add --dev jest 安裝好之後要幹麻？寫一個JavaScript檔案囉！ 開一個檔案叫 double.js function ...
storybook
利用storybook可以更直觀的知道元件在各種UI互動狀態下應該怎麼呈現！ 下面的那些就是stories啦！ 下面這三個就是它的test cases title（螢光筆劃線的地方）不能重複 title在這裡定義(export default是寫metadata的地方) Task.stories.j...