npm init
,先建立一個 package.json
檔案npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
touch .babelrc
,建立一個隱藏檔.babelrc
,填入以下內容:{
"presets": [
"@babel/preset-env"
]
}
然後即可使用 npx babel-node [JS 檔案]
指令
範例: npx babel-node main.js
更多詳細使用方式可參考 Babel 官網 或 [Webpack][ES6][Babel] 編譯#05. 安裝與設定Webpack, 利用babel loader編譯成ES5程式
此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 136. Introducing Styled-Components 本小節重點: 將 navigation.styles.scss 改為 navigation.styles.jsx 並使用在 navigation.components.jsx 中。 什麼是 styled-components? styled-components 這個第三方套件讓我們可以將原本為 .css 或 .scss 的檔案改為元件的寫法(副檔名為 .js 或 .jsx 的檔案),透過 JS 動態產生 unique 的 class name,元件跟元件就不會發生因人為命名失誤而產生的 CSS class name 碰撞。
Sep 28, 2022此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 88. Setting Up Firebase firebase 官網新增新專案 yarn add firebase 89. Authentication Flow (Firebase 串 Google 登入驗證流程) 腳色:
Sep 28, 2022此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 注意!此章節實作 Redux 方式已過時,現官方推薦使用 Redux toolkit 來建立 Redux!Redux toolkit 在文末介紹。 149.&150. Redux vs Context Redux 與 Context 主要的不同之處有兩點: 元件取得存放在 Context 或 Redux 的資料方式不同 Context
Sep 28, 2022此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 第 2 節: React Key Concepts 本節重點: Don’t touch the DOM. Build websites like lego blocks. Unidirectional data flow ⇒ 容易 debug,源頭的 state 容易除錯 Cross platfoms:
Sep 28, 2022or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up