Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
接續 JS ES6，趁著對 ES6 記憶猶新，跟著程式小白🙆♀一起來簡單認識👀 React JS吧！
📌 Dear Diary📒, 到底什麼是 React JS？ React JS 又能做些什麼呢？
React JS 通常被廣義地稱作為前端的框架＆函式庫（狹義的函式庫），於 2013 年由Facebook 公司中的軟體工程師 Jordan Walke 創造（剛推出時原名：FaxJS），近年來在前端開發工具的地位與 Vue 和 Angular並稱三雄。
根據 React 官方網站 介紹：「React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面。它讓你使用小巧而獨立的 component，來建立複雜的 UI。」以下會更進一步說明 React 的特性和優缺！
📌 Mayday Mayday Mayday📣, React JS 的魅力在哪裡？
這裡我們看到三個官方主打的 React 特點：
1. 宣告式 Declarative
React 能輕易地創造具互動性使用者介面 (UI) 和設計簡易的視圖。同時，當我們宣告資料狀態改變時，它能立即並有效地自動更新和渲染，使除錯和預測更為容易。
2. 元件導向 Component-based
React 透過元件的封裝、組合和獨立運行性來創建更複雜、嚴密的使用者介面。另一方面，由於元件邏輯撰寫於 JS 中，在數據的取得上不需透過 DOM 即可由 APP 獲取。
3. 高度應用 Learn once, write everywhere
使用 React ，開發者不再需要自行編寫已存在的代碼，就能輕鬆開發新功能。React 也能透過事先執行，將 Node 和 React Native 渲染在伺服器和手機 app 上。
🦖 恐龍君名詞小補充：
1/ Component 元件（aka. 樂高）：前面有提及 React 的根本即是元件，因此我們也可以說 React 整體架構為多元件的排列組合。我們可以利用元件拆分使用者介面 (UI)，並將獨立＆可重複使用的程式碼應用在更多思考層面的解決問題之上
2/ State：顧名思義為元件的狀態，當原本儲存的資料數值更動時，我們必須呼叫 setState 函式，React 會即時更新元件的狀態，並重新呼叫 render 函式，最後把更新後的狀態呈現在畫面上。
3/ Props (properties)：為元件之「屬性」；基本上 props 是不更改的 (immutable)。父元件完全決定了 props 的型態、樣式和數值；這樣的資料傳遞方式為單向（綁定）、嚴謹的。
💊 小結：React 中的元件有 state 和 props，不過元件本身僅能改變其狀態 (state)，特性 (props) 的部分由父親繼承下來，無法更改 (read-only)。
📌 React JS 的優點：
1. 虛擬化 DOM ➔ Virtual DOM
以往網頁更新都需要重新載入，但當引入 React 開創的 Virtual DOM 後，React 自建的記憶體中會出現相似於 DOM 的虛擬樹狀層級結構。當資料 (props 或 state) 做改變時，React 會先開啟 Diff 演算機制，逐一比對不同之處後在將改變部分渲染到真實的 DOM 上。這樣一來可以優化 DOM 的操作，也可以使開發者不再受制於效能方面的考量。
2. JSX 語法 Javascript Extensive Syntax
JSX 因應開發者的習慣而生、為 HTML 和 Javascript 的綜合體。既然是讓人能快速上手的語法， JSX 想當然爾不會是瀏覽器能解讀的語言，因此需要 Webpack 和 Babel 的輔助，來將 JSX 轉成純 Javascript 程式碼。
JSX 寫法：將 HTML 置入 JS 中相對簡易、效率高
const element = <h1>Hello, world</h1>;
透過 Babel 轉化成純 Javascript 程式碼樣貌：複雜、冗長
var element = React.createElement( "h1", null, "Hello, world!" );
3. 一切從簡
藉由元件的重組和堆疊，React 使程式碼有千千萬萬種變化，但同時具備好維修、易於管理的特性。維護時單獨拉出有狀況的元件，想做更改時也可以輕易地調整一塊元件（不會交互影響，造成大規模程式碼污染）。由此可見，區區分明的特性使 React 特別具效率和競爭力。另外，props 的階層化資料傳遞（單向）也使 React 的程式碼相對穩定、可信賴。
📌 React JS 的缺點：
1. 過度專一性
因為 React 僅支援 UI 的視覺 (views) 部分，其他需要安裝額外的函式庫當作外掛，才能解決路由 (routing)、狀態處理 (state management)、API 互動的問題。
2. 更新飛速
由Facebook 開發的 React 的版本更新非常迅速、頻繁，導致學習＆前端開發者需要戰戰兢兢如履薄冰才能跟上腳步拔得頭籌，第一手文件取得也相對困難（要中文版就更難嘍～大家必須學好英文呀～）。
不過，身為初學 React 的我們不需要顧慮太多；現階段儘管吸取知識，把基礎打好，才能以不變應萬變👌
📌 React JS 的宣告語法
1. 函式宣告 Function declaration：
function 的基本配備：必 return
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
} 2. 類別宣告 Class declaration：
class 的基本配備：必 extends 後 render （繼承後渲染）
import React from 'react'
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
📌 Buckle up～ 最後來衝一波來用實例告訴你們 React 好在哪！
React JS 現今為前端開發數一數二的函式庫，它被用於創建瀏覽器 App 開發手機應用程式 (利用 React Native)。
1. Facebook：超過 2 億用戶的 FB 是個創造 React 的霸主，其開發和應用包括起初於 FB 上的 React 初步網頁測試到後來「通知」和「自動刷新頁面」功能的出現。註：FB 於 2018 年更發佈了 React Fiber — 為一個重新改寫的 React 函式庫
2. Instagram：應該很難想像偌大一個以圖文分享為主的社群平台的網站竟然能單單藉由 React 獨立完成繁複作業，包含地圖、hashtags 、精準 SEO 等等都是使用 React 的心血結晶。
3. Netflix: 自從 2014 年導入 React 撰寫網頁，Netflix 的串流速度和運轉效率就獲得顯著的提升，也間接影響了 UX (User Experience) 的表現和用戶滿意度。
4. Ubereats：當紅炸子雞又能送脆皮炸雞的 Ubereats 也是 React 的受惠者，利用 React-router 來執行頁面之間的切換，讓外送員和用戶端無縫接軌；當然論下訂、接單、完單的效率 React 貢獻了不少。
5. Airbnb: Airbnb 的性質屬於跨區域統合民宿的住宿網站，需要 React 來達成 API （多平台）整合和網站的高機動性。但是由於政策面的考量，Airbnb 也在 2018 年宣布漸退 React Native。
6. CNN & BBC & The New York Times: 就算是新聞報社廣播網頁平台製作也需要用到 React Native 的協助，以獲得更快速的更新和創造更優質的閱聽人體驗。
🔥下集預告🔥
初步認識 React JS 後，不知道大家對於 React 有什麼想法？ 下集小白🙆♀我將為大家帶來更多 React 入門的相關知識😍 對這篇筆記有興趣的人記得 tune in 下集！
這裡先拜過我的恩師Glove🙇♀
🎏 如果對於 React JS 函式庫有興趣，或是想提升 JS 技能的人，這裡雙手奉上 Glove 的部落格，非常建議和我一樣的小菜雞🐥上去爬個文～
Glove 另外也有在 Udemy 上開設 JS 課程 和 React 課程唷，特別適合唷想快速練功的人😎！（中文教學）🎏
不知道大家有沒有熟悉 W3Schools 了，這次和大家介紹一個叫做 Programming with Mosh 的 YouTube 教學頻道，專門引導新手學習各大前端開發工具（Javascript、React.js、C#、Node.js…市面上看得到的保證都有），每支影片雖然偏長，但是重點講得很清楚，可是勝過太多國內教學（YT上中文的 tutorial 目前還看不到我喜歡的，所以歡迎底下留言告訴我你推哪支 YouTube 教學！）
/* 希望以上心得筆記和資訊有助於大家更了解 React 的運作～ 如果覺得獲益良多歡迎繼續關注我！
有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣
那～我們下禮拜見嘍！👋👋👋 */
參考資料 References:
疫情之下，原本實體活動全都改成線上，活動分享全都在網路上很容易錯過，這邊整理了幾個跟數位教學相關的活動資訊給大家參考，分享順序為活動時間⏰ 1. Google Workspace技術整合術 Google Workspace for Education (原 G Suite 教育版) 能透過 Gmail、Google Drive、Google Calender、Google Meet 和 Classroom 等通訊與協作應用程式創造輕鬆與順暢的學習環境，並促進協同合作以提升數位學習與教學成效，而且還會為學校資料提供雲端安全性防護…
實體的教室變成一格一格的畫面，原本吵雜的下課時間也變成掛斷通話的系統聲。原本在班級中的歸屬感慢慢消失了，久而久之，孩子的對於學習，不再有群體的感覺，只是孤軍一人學習、複習、考試，甚至是畢業典禮都少了一份臨場感。因此，今天要和大家介紹一款現在在教育界還很少被提到的軟體-Gather。 Gather 如果你還不知道Gather，或是直覺的把Gather與虛擬會議室連結在一起，不妨先看看Gather裡的特色： 介面是像素型RPG 每個人自由創建一個角色 上下左右輕易控制角色 走道其他角色旁邊能互相討論 小遊戲battle 光是這五點特色，就足以推派它成為遠距教學的工具，除了打造不同空間的地圖外，最特別的是Gahter打造前所未有的臨場感，人與人之間只有靠近到一定距離，才能聽到彼此說話聲音，而相對應的，離開後聲音就會漸漸聽不到，就連白噪音的設計也是如此，非常的逼真。 不知道老師們會不會因為搭建地圖覺得麻煩，或是看到2D介面怕學生當遊戲在玩而不考慮這款軟體，換個角度思考，藉由不同地區的老師們集思廣益，打造出最適合學生學習的環境，像是不同學科的教室、戶外自然生態區、操場、籃球場等等....都可以更貼近真實校園，而像素的介面正好提高學生的學習意願，老師們擔心學生過於沉迷時，也能用全體廣播放上課鐘聲，或是讓學生們聚集在同一區，鏡頭站起來動一動 (另外推薦Active Arcade -> 趣味運動的APP )，就像早操一樣很真實。 線上教學缺乏臨場感，Gather可以創造了讓大家「一起在一個遊戲世界」的凝聚力。縱使Google Meet、Teams 雖然也可以進行討論，但若要每堂課要穿梭在不同會議間，節奏不流暢，使用Gather可以讓學生更自由地移動，相對應的老師也可以神出鬼沒地到處「旁聽」。 教孩子用科技解決問題，如果老師們也努力著示範給孩子看，創造出獨一無二的學習空間，相信對於孩子學習的歷程中，有莫大收穫。但到底怎麼開始使用？別擔心，這次快樂學程式邀請到Gahter界的大神 阿岳，要來和大家分享Gather的6大應用技巧，限名額唷~…
HTML入門&基本觀念介紹！ 構成一個網頁，最重要的就是他的結構，而HTML就像是他的骨架，而CSS就是像是我們身體上的肌肉一般，而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息，那麼HTML究竟是指哪些語法呢？ 什麼是HTML? HTML全文又稱為HyperText Markup language ，也就是所謂的超文本標記語言，是網頁構成的基本要素，換言之，網頁就是由一堆html所構成，透過瀏覽器，顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說，HTML有以下幾個重點： HTML的基本架構： HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容，透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎？ 答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨，怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處 這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。 如果你覺得爬網站麻煩又費時，不妨直接點擊快樂學程式的網頁前端課程，老師直接手把手帶你入門HTML ！完整的基礎入門課程省下你獨自摸索花費的時間！ 課程上架Udemy ! 準備一個輕鬆的週末，只要一天的時間，帶你建置靜態網頁。從實作中打開靜態網頁的大門，讓你的研究之路不是只有自己，有我們跟你一起努力！課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課！如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。快樂學程式
什麼是HTML? HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理 不管你是小時候從撰寫無名小站為了要修改你的樣式，而開始瞭解HTML和CSS為何物，或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考！ 編寫基本的HTML： 先讓大家看一下一個基本的HTML文件格式為： <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…
PHP是什麼?3分鐘PHP基本介紹！ 大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼? PHP語言的全名是(PHP: Hypertext Preprocessor)，和ASP、JSP等都是動態網頁開發語言，不過，PHP擁有跨平台的能力，無論是在Linux(最適合)、Unix、 Windows都可以執行運作，不像微軟 的ASP只能在Windows平台上執行，而且PHP是免費的，並可結合多種資料庫伺服器，如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。 PHP語言是伺服器端(Server)執行的網頁，不像一般HTML網頁，只要單機下開啟檔案就可以檢視網頁，PHP必須先在伺服器端執行完後，再將結果傳至使用者端(Client)的瀏覽器中檢視結果，所以必須使用網站伺 服器，且伺服器要支援PHP。 如何學好PHP? 要學好PHP，要有目的，要有一個想寫的東西，寫個學校網站，寫個校友系統，寫個簡單的新聞區或相簿...等，都可以，盡可能的和工作和生活結合，利用程式來簡化繁瑣的人工步驟，或者提昇工作效率，有目標，才會有動力，才會有想法。 學PHP不需要背，背不完的，只要懂就好了。像函數就不用背，常用的打久了你就背起來了，不常用的，等到要用時，知道去哪裡找就好。換言之，函數懂越多，功力越高強。 程式碼可以複製貼上，但一定要知道為什麼要這麼寫，不要傻傻的照著打，可以的話，自己打一遍最好，最上乘就是可以說出每一行程式碼的作用和前因後果。或者，故意打錯，看看會怎樣。錯誤訊息看久了，功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache…
Sildenafil citrate oral jelly Combiné avec les données de départs 2, on leur a demandé de type 5 de tadalafil…