💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有11部Youtube影片,追蹤數超過4萬的網紅吳老師教學部落格,也在其Youtube影片中提到,從PHP雲端資料庫到APP開發之4(數學函數與陣列) 完整影音連結: https://www.youtube.com/playlist?list=PLvOVUPrqive7BMsbb2NyocW6Yjag55AlA 教學論壇(之後課程會放論壇上課學員請自行加入): https://groups....
「html foreach」的推薦目錄:
- 關於html foreach 在 BorntoDev Facebook 的最佳貼文
- 關於html foreach 在 吳老師教學部落格 Youtube 的最佳解答
- 關於html foreach 在 吳老師教學部落格 Youtube 的最佳解答
- 關於html foreach 在 吳老師教學部落格 Youtube 的最佳解答
- 關於html foreach 在 PHP simple foreach loop with HTML [closed] - Stack Overflow 的評價
- 關於html foreach 在 JS - for 迴圈與forEach 有什麼不同| 卡斯伯Blog - 前端,沒有極限 的評價
- 關於html foreach 在 PHP 快速導覽- foreach 迴圈 - 程式語言教學誌FB, YouTube ... 的評價
- 關於html foreach 在 use of forEach on HTMLCollections and arrays. · GitHub 的評價
- 關於html foreach 在 PHP foreach loop populates html table with assoc array 的評價
- 關於html foreach 在 Invalid argument supplied for foreach() in /var/www/html/app ... 的評價
html foreach 在 吳老師教學部落格 Youtube 的最佳解答
從PHP雲端資料庫到APP開發之4(數學函數與陣列)
完整影音連結:
https://www.youtube.com/playlist?list=PLvOVUPrqive7BMsbb2NyocW6Yjag55AlA
教學論壇(之後課程會放論壇上課學員請自行加入):
https://groups.google.com/forum/#!forum/labor_phpapp2015
PHP與雲端資料庫教學懶人包(2015)
http://terry55wu.blogspot.tw/p/blog-page_18.html
這是PHP雲端資料庫第一次上課,主要是了解學生的程度和學習需求,並且打造PHP與-MySQL環境並下載XAMPP
安裝的懶人包 [下載],還真的蠻簡單的,只需要下載並接壓縮到D碟,
不要有中文資料夾名稱,並執行setup_xampp安裝,
啟動Apache與MySQL即完成開發環境設定,並查出自己的IP位址,
這樣就可以打造開發環境,也可以當成雲端伺服器來使用,
家裡有光纖的建議申請固定IP就可以來架雲端了。
01_如何存取PHP雲端資源與兩題練習題(圓面積與樂透彩)
02_範例5_1計算面積說明
03_如何利用亂數函數產生樂透彩號碼
04_如何將用文字函數個位數補零
05_如何建立陣列與FOREACH敘述
06_將九九乘法表改為FOREACH敘述與陣列重要函數
07_如何用陣列函數產生沒有重複的樂透彩號碼
08_如何改為函數array_rand簡化流程
參考書目
Dreamweaver CS6 X PHP超強互動網站特訓班(附影音教學、獨家擴充程式、範例、試用版)
作者: 鄧文淵/總監製,文淵閣工作室/編著
挑戰PHP5/MySQL程式設計樂活學
作者: 文淵閣工作室 (著)
PHP 5實力養成暨評量(附光碟)
作者: 財團法人中華民國電腦技能基金會
php教學例子,php mvc教學,php ajax教學,資料庫,大數據,開放資料,XAMPP,Dreamweaver CS6,雲端資料
庫,php mysql教學,html教學,php教學影片,php教學範例,php 安裝

html foreach 在 吳老師教學部落格 Youtube 的最佳解答
從PHP雲端資料庫到APP開發之4(數學函數與陣列)
完整影音連結:
https://www.youtube.com/playlist?list=PLvOVUPrqive7BMsbb2NyocW6Yjag55AlA
教學論壇(之後課程會放論壇上課學員請自行加入):
https://groups.google.com/forum/#!forum/labor_phpapp2015
PHP與雲端資料庫教學懶人包(2015)
http://terry55wu.blogspot.tw/p/blog-page_18.html
這是PHP雲端資料庫第一次上課,主要是了解學生的程度和學習需求,並且打造PHP與-MySQL環境並下載XAMPP
安裝的懶人包 [下載],還真的蠻簡單的,只需要下載並接壓縮到D碟,
不要有中文資料夾名稱,並執行setup_xampp安裝,
啟動Apache與MySQL即完成開發環境設定,並查出自己的IP位址,
這樣就可以打造開發環境,也可以當成雲端伺服器來使用,
家裡有光纖的建議申請固定IP就可以來架雲端了。
01_如何存取PHP雲端資源與兩題練習題(圓面積與樂透彩)
02_範例5_1計算面積說明
03_如何利用亂數函數產生樂透彩號碼
04_如何將用文字函數個位數補零
05_如何建立陣列與FOREACH敘述
06_將九九乘法表改為FOREACH敘述與陣列重要函數
07_如何用陣列函數產生沒有重複的樂透彩號碼
08_如何改為函數array_rand簡化流程
參考書目
Dreamweaver CS6 X PHP超強互動網站特訓班(附影音教學、獨家擴充程式、範例、試用版)
作者: 鄧文淵/總監製,文淵閣工作室/編著
挑戰PHP5/MySQL程式設計樂活學
作者: 文淵閣工作室 (著)
PHP 5實力養成暨評量(附光碟)
作者: 財團法人中華民國電腦技能基金會
php教學例子,php mvc教學,php ajax教學,資料庫,大數據,開放資料,XAMPP,Dreamweaver CS6,雲端資料
庫,php mysql教學,html教學,php教學影片,php教學範例,php 安裝

html foreach 在 吳老師教學部落格 Youtube 的最佳解答
從PHP雲端資料庫到APP開發之4(數學函數與陣列)
完整影音連結:
https://www.youtube.com/playlist?list=PLvOVUPrqive7BMsbb2NyocW6Yjag55AlA
教學論壇(之後課程會放論壇上課學員請自行加入):
https://groups.google.com/forum/#!forum/labor_phpapp2015
PHP與雲端資料庫教學懶人包(2015)
http://terry55wu.blogspot.tw/p/blog-page_18.html
這是PHP雲端資料庫第一次上課,主要是了解學生的程度和學習需求,並且打造PHP與-MySQL環境並下載XAMPP
安裝的懶人包 [下載],還真的蠻簡單的,只需要下載並接壓縮到D碟,
不要有中文資料夾名稱,並執行setup_xampp安裝,
啟動Apache與MySQL即完成開發環境設定,並查出自己的IP位址,
這樣就可以打造開發環境,也可以當成雲端伺服器來使用,
家裡有光纖的建議申請固定IP就可以來架雲端了。
01_如何存取PHP雲端資源與兩題練習題(圓面積與樂透彩)
02_範例5_1計算面積說明
03_如何利用亂數函數產生樂透彩號碼
04_如何將用文字函數個位數補零
05_如何建立陣列與FOREACH敘述
06_將九九乘法表改為FOREACH敘述與陣列重要函數
07_如何用陣列函數產生沒有重複的樂透彩號碼
08_如何改為函數array_rand簡化流程
參考書目
Dreamweaver CS6 X PHP超強互動網站特訓班(附影音教學、獨家擴充程式、範例、試用版)
作者: 鄧文淵/總監製,文淵閣工作室/編著
挑戰PHP5/MySQL程式設計樂活學
作者: 文淵閣工作室 (著)
PHP 5實力養成暨評量(附光碟)
作者: 財團法人中華民國電腦技能基金會
php教學例子,php mvc教學,php ajax教學,資料庫,大數據,開放資料,XAMPP,Dreamweaver CS6,雲端資料
庫,php mysql教學,html教學,php教學影片,php教學範例,php 安裝

html foreach 在 JS - for 迴圈與forEach 有什麼不同| 卡斯伯Blog - 前端,沒有極限 的推薦與評價
相對來說 forEach 使用 callback function 就不容易踩到這個雷,不過for loop 依然可以使用ES6 的 let, const 來解決作用域的問題。 目前主流的文字編輯器 ... ... <看更多>
html foreach 在 PHP 快速導覽- foreach 迴圈 - 程式語言教學誌FB, YouTube ... 的推薦與評價
與網頁標記語言HTML, CSS 的教學部落格 ... PHP 快速導覽- foreach 迴圈. 迴圈(loop) 是用來進行進行重複性的工作,關鍵字(keyword) foreach 與as 構成PHP 中迴圈的 ... ... <看更多>
html foreach 在 PHP simple foreach loop with HTML [closed] - Stack Overflow 的推薦與評價
... <看更多>
相關內容