July 2020 – Page 2 – 庭喵的出包星球

TypeScript學習

因為到處的React教學幾乎都夾雜TypeScript，所以決定還是趕快來學一下，不然要看教學也看不懂🤣
以下列出一些覺得還不錯的教學文章。
microsoft/TypeScript-React-Starter
Getting started with React and TypeScript

Using React Functional Components with Hooks in TypeScript
教怎麼寫functional component，還有hooks
React with TypeScript: Best Practices
React with TypeScript: Components as Function Declarations vs. Function Expressions
React Children with TypeScript
React with Typescript

React TypeScript Cheatsheets | React TypeScript Cheatsheets
typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript

TypeScript for React developers in 2020
電子書：
TypeScript Deep Dive

useEffect – compare object

https://twitter.com/dan_abramov/status/1104414469629898754

目前專案常見問題：stackoverflow

有空多了解一下

Why Is `Export Default Const` invalid?

`export const` vs. `export default` in ES6

react.js PropTypes

導入這樣導：

import PropTypes from 'prop-types'; // ES6

設定這樣設：

CuteLuna.propTypes = {
  order: PropTypes.arrayOf(PropTypes.string),
};

各種類型：

// array of string
order: PropTypes.arrayOf(PropTypes.string),

MyComponent.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      code: PropTypes.string,
      id: PropTypes.number,
    })
  ),
};

參考文章：
https://www.npmjs.com/package/prop-types

寫程式的心得

寫專案就像一堆小小的程式的集合。每個程式幾乎都可以拆開來變成一個小部份，一個小部份就像MDN看到的那樣，有時候會覺得寫一個小部份可以做到，但整合成一個大部份就覺得複雜亂亂。可能可以先想好每塊部份要怎麼寫，然後畫個流程圖，就會好寫很多。（流程圖是寫扣的流程圖）

不過以前的專案大多都是舊有專案要增加新功能，所以還變得要再花時間去讀懂別人寫的程式。

最好寫到一點就看一下console有沒有什麼錯誤訊息，這樣以後要追BUG比較好偵錯，比較知道剛剛改了什麼造成什麼錯誤。

敏捷開發筆記

敏捷其實不是代表快，它只是讓自己可以早點發現作品符不符合需求。
敏捷開發其實也可以當成一個自我管理的方法。
TASK想到什麼就加上去，不是一定只要做只有planning的時候開的需求。
你沒有去溝通的話，溝通是不會發生的。通常客戶把需求告訴PM後，PM如果吸收了百分之八十％算強了，他再傳給主管，主管再傳給組長，組長再傳給工程師，其中就會有很多遺漏資訊了，所以最好還是工程師直接去和客戶確認需求。
end to end 團隊指的是，這團隊可以做到全端後端都包。
有統計指出軟體業的離職率是20%。
SCRUM是敏捷的一個方法，大約有80%人用，其它是用什麼KANBAN。
AGILE短周期就上線，代表持續的跟客戶確認需求，一個很大的專案拆分成很多細項來做，不像以前都是做到完才上線，Agile是產品做好的地方就先賺錢（例如建築，蓋好的地方先擺攤或開店，沒蓋好的地方繼續蓋）
敏捷追求的是透明化，例如貼很多紙條的看板…
PO決定每次的Sprint要做什麼，產品不賺錢是PO要扛責任。
PO說了待辦清單之後，團隊每天的Standup meeting決定今天要做什麼，撕便利貼貼來貼去的概念（類似在櫻桃時那樣）

https://lunamiou.atlassian.net/

reorder list

export const langMapDataA = {
  sports: "Sports",
  casino: "Casino",
  esports: "E-Sports",
};

const reCraftArray = Object.keys(viewLang).map((key) => ({
  key: key,
  value: viewLang[key],
}));

const [list, setList] = useState(reCraftArray);

React.useEffect(() => {
  const reOrderSort = list.reduce((a, c) => {
    return a.concat(c.key);
  }, []);
  setProp((props) => (props.order = reOrderSort));
}, [list]);

// 每次list有變化都再變成陣列一次，然後再傳給元件

Array.prototype.slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

slice就像：我要刪除前面的二個！ animals.slice(2)
（實際上是index為2保留，之後的也保留。刪掉０、１）
我要刪除前面的二個，第四個以後的也都刪掉 animals.slice(2, 4)
（實際上是index為2的保留，保留到四的以前…不包含四，記起來比較麻煩。）
只刪除一個的情況：
我要刪除第二個，只刪除一個(第二個參數變成要刪幾個)
months.splice(2, 1);

Month: July 2020

React工具書