:pushpin:useState 存儲狀態，並隨時更新 在應用程式中需要隨著時間改變的資訊，例如：使用者的輸入、點擊次數、當前選擇的選項等等。狀態必須在應用程式中被管理，並且隨著時間改變。 管理輸入框的內容：輸入文字時，管理輸入框的內容。 管理點擊次數：點擊按鈕時，管理點擊次數。 管理當前選擇的選項：多選框或單選框中選擇選項時，管理當前選擇的選項。 管理分頁：在分頁組件中翻頁時，管理當前頁數。 管理模型數據：載入從服務器端獲取的數據時，你可以使用 useState 管理這些數據。

join 將陣列元素連接、合併成一個字串，並回傳此字串。 join() item加上逗號 join('') item直接合併 join(' ') item 加上指定內容合併 const dogs = ['芒狗', '奇異狗', '蘋狗']; console.log(dogs.join());

:pushpin:網格基礎 格線容器 Grid Container 建立網格格式化上下文 管理其直接子元素的間距、大小和對齊 .grid { max-width: 800px; display: grid; } 格線軌道 Grid Track

!(https://i.imgur.com/YUHUr3q.jpg) :pushpin:建立React環境 Step.1 載入React資源, Babel Both React and ReactDOM are available over a CDN. React本身的函式庫 & ReactDOM <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> Quickly Try JSX

學習資源:展開運算子(...) | MDN codepen ES6陣列展開運算子 MDN說明：展開運算子(...) 允許可迭代的陣列或字串展開成０到多個參數(如果是 function 的話)或是０到多個元素(如果是 array 或字組的話)，或如果是物件的話則展開成０到多個 key-value pair。 展開運算子的 ... 後面必定是接一個陣列或物件 把一個陣列展開為個別值...array也常用於Object 不會更改到原陣列

過去的筆記也有提到一部份 2022鐵人賽 | 陣列array const grades = [ [80, 90, 100, 95], [75, 95, 85, 100], [60, 80, 77, 90] ] 當要取其中的值時會使用grades[0][1] 範例一

CSS Reset CSS Tools: Reset CSS reset將所有瀏覽器的自帶樣式重製，因為每個瀏覽器的預設樣式皆不同，保持在不同瀏覽器使用時的一致性而使用Reset。 <link rel="stylesheet" href="css/reset.css"> CSS noemalize Normalize.css normalize保留預設的樣式，不進行太多的重製，例如在h1,h2,h3,h4,h5,h6皆有保留不用再重新賦予 <link rel="stylesheet" href="css/nomalize.css">

學習資源： 圖解：CSS Flex 屬性一點也不難 | 卡斯伯 CSS Flexbox Layout | Treehouse Flex 排版技巧介紹 | 六角 A Complete Guide to Flexbox Flex分為內外容器，能夠讓頁面輕鬆地做出RWD的效果，更有彈性的控制佈局 :::warning

【Day1】什麼是JavaScript 【Day2】變數與資料型別基本介紹 【Day3】var、let、const宣告變數 【Day4】數字number、註解 【Day5】字串string、轉義字符 【Day6】布林、null、undefined 【Day7】算術運算子、比較運算子 【Day8】賦值運算子、邏輯運算子 【Day9】流程敘述-流程圖、if、else、else if 【Day10】流程敘述-switch、三元(條件)運算

今天是第30天來分享我這個轉職路上的前端小白學習JS的資源~ 學習資源 學習心態 完賽心得 學習資源 如果還不確定自己是否喜歡前端，當然就是從一些免費的資源開始看起，這邊提供一些我學習JS基礎時的資源 MDN：JavaScript 初探

打開求職網站，搜尋前端職缺時，除了前端三大元素：HTML、CSS、JavaScript外，也經常看到框架：Angular、React、Vue，那我們知道HTML為標籤語言、CSS為樣式表、JavaScript為程式語言，那框架又是什麼呢？ 本篇介紹： 框架為何 Vue.js、React.js、Angular.js React.js的特色、優勢 先來談談框架(Software Framework) MDN前端框架簡介中提到：框架是個針對軟體構建，提供完整解決方案的函式庫

以上27天的文章簡單帶大家了解JavaScript的冰山一角，也因為主題是興趣初探，因此內容不會有需深入理解的：callback、closure、this……。基本的部分結束，接下來兩篇會做簡單的介紹Node.js與React是什麼？與JavaScript又有什麼關係呢？ Node.js是什麼 套件管理工具 npm 總結 Node.js官方首頁第一句話為 “Node.js is a JavaScript runtime built on the V8 JavaScript engine.”