大家好! 我是毛毛 目前從事的行業是跟前端八竿子打不著邊的👨‍🍳廚師， 因為疫情的關係， 多了許多的時間可以好好投資自己， 今年五月 ( 2021/ 5 ) 開始學習前端相關技能， 期許能在今年成功轉行，看來年前轉職有困難... 關於這裡 會紀錄我學習前端技術的筆記， 嘗試將自己的學習過程記錄下來，

關於這裡 這裡將會記錄有關 Javascript 的學習筆記，與參加 六角學院 Javascript 必修篇 - 前端修練全攻略 每日任務紀錄 參考資料 Javascript 必修篇 - 前端修練全攻略 *[六角學院]: 佛心教學公司

tags: MongoDB date: 2021/9/4 MongoDB 前言 在製作自己的專案時，想讓專案更加完整，於是就開始想，既然前端畫面邏輯都自己開發了，現在網路上資源又那麼豐富，未來也有可能朝全端發展，何不自己架設後端 API，給自己串接，還能了解整個網頁的運作邏輯，於是開始自學了後端框架 Express 和資料庫 MongoDB，這裡將會記錄學習 MongoDB 的學習筆記。 介紹 資料庫 關聯式資料庫（RDBMS）資料具有關聯性

hackmd-github-sync-badge 如果想看 HackMD 筆記請點這裡↑ 💬 前言 JSDC JSDC 2021 開發者年會 參與心得 👨‍💻 iT 鐵人賽

tags: React date: 2021/7/26 ⚛️ React - 基礎 React - 基礎環境引入 Babel<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> 瀏覽器不認識 ES6，依靠 Babel 把 ES6 轉成 ES5 瀏覽器不認識 jsx，依靠 Babel 把 jsx 轉成 js 可以更流暢的編碼

tags: React date: 2021/7/26 ⚛️ React - 組件 與 模組 模組 什麼是模組? 向外提供特定功能的 JS 程序，一般就是一個 JS 文件。 為什麼要拆成模組呢? 隨著業務邏輯增加，代碼越來越多且複雜。 最終結果是更能重複利用 JS，簡化 JS 編寫，提高 JS 的效率。 模組化

tags: React date: 2021/8/8 ⚛️ React - 受控組件 與 非受控組件 非受控組件 以表單為範例 環境架設起手式不變 使用類式組件​​​​render(){ ​​​​ return( ​​​​ <form action="https://www.google.com.tw/">

tags: React date: 2021/8/9 ⚛️ React - 高階函數柯里化 什麼是高階函數? 函數只要符合下面其中一點，就是高階函數 如果函數接收的參數是一個函數 如果函數調用的返回值依然是一個函數

tags: React date: 2021/7/26 ⚛️ React - 簡介 React 是什麼 ? React 是一個實作使用者介面的 JavaScript 函式庫，也就是所謂的框架。 誰開發的 ? 由 Facebook 開發，並且開源。

tags: React date: 2021/8/11 ⚛️ React - DOM 的 diffing 算法 虛擬 DOM 中，key 的作用範例 範例程式碼 - 可以再輸入框輸入東西後按按鈕觀看效果 See the Pen by Johnson Mao (@vsfvjiuv-the-typescripter) on CodePen.

tags: React date: 2021/7/31 ⚛️ React - 三大屬性 Props React 起手式 老規矩，先建立一個 HTML，並搭建好環境:::spoiler 還不知道起手式請點我​​​​<!-- 先準備一個 list 容器 --> ​​​​<div id="app"></div> ​​​​<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> ​​​​<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

tags: React date: 2021/8/4 ⚛️ React - 三大屬性 Refs React 起手式 老規矩，先建立一個 HTML，並搭建好環境:::spoiler 還不知道起手式請點我​​​​<div id="container"></div> ​​​​<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> ​​​​<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> ​​​​<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

tags: React date: 2021/7/26 ⚛️ React - 函數式組件 React 起手式 老規矩，先建立一個 HTML，並搭建好環境:::spoiler 還不知道起手式請點我​​​​<div id="container"></div> ​​​​<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> ​​​​<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></s ​​​​<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

tags: React date: 2021/7/26 ⚛️ React - 類式組件 React 起手式 老規矩，先建立一個 HTML，並搭建好環境:::spoiler 還不知道起手式請點我​​​​<div id="container"></div> ​​​​<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> ​​​​<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> ​​​​<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

tags: React date: 2021/8/16 ⚛️ React - PubSubJS 實現兄弟組件之間傳遞資料 為什麼要使用 PubSubJS 套件 React 兄弟組件間想要傳遞資料，必須透過共同的父組件傳遞資料 PubSubJS 解決溝通橋梁的問題，可以直接子組件對話PubSubJS 尤其子組件越多層沒套件會更麻煩，有套件以後維護也更方便 如何使用 PubSubJS 套件

tags: React date: 2021/8/12 ⚛️ React - 框架 React 框架 框架：用來幫助工程師快速創建模板包含了所需要的配置 下載了所有相關的依賴 可以直接運行簡單的效果 React 提供了一個創建 React 框架庫：create-react-app

tags: React date: 2021/8/13 ⚛️ React - 用 Hello 認識框架組件 使用 create-react-app 起手式 如果還不知道怎麼起手式，點我 創建 Hello.js 組件 在src資料夾內新增Hello.js，並使用類式組件​​​​import React from 'react'; ​​​​import './Hello.css';

tags: React date: 2021/8/18 ⚛️ React - Route 路由 與 參數 傳遞 params 參數 首先為路由組件，傳遞 params 參數​​​​// 先初始化 state ​​​​state = { ​​​​ msgArr : [ ​​​​ {id:'01', title:'消息1'}, ​​​​ {id:'02', title:'消息2'},

tags: React date: 2021/8/16 ⚛️ React - Route 基礎路由 為什麼要使用路由？ 使用路由實作 SPA 網頁，可以減少頻寬浪費，提高使用體驗 什麼是 SPA？ 在講 Route 之前，要先介紹一下什麼是 SPA

⚛️ React - 基礎篇 ⚛️ React - 簡介 ⚛️ React - 基礎 ⚛️ React - 組件 與 模組 ⚛️ React - 函數式組件 ⚛️ React - 類式組件 ⚛️ React - 三大屬性 State ⚛️ React - 三大屬性 Props ⚛️ React - 三大屬性 Refs ⚛️ React - 受控組件 與 非受控組件