💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น 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 - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有2部Youtube影片,追蹤數超過2萬的網紅奮game王紫楓,也在其Youtube影片中提到,#軟體工程師 👍歡迎訂閱!! 🔔🔔按下小鈴鐺,就可以一有新影片就搶先看! [軟體工程師雜談] 輕鬆搞懂資料結構 |IT鐵人賽: 從零開始搞懂寫程式,資工系4年最重要的學科,資料結構,演算法,物件導向 IT鐵人賽網址:https://ithelp.ithome.com.tw/users/201...
「array map」的推薦目錄:
- 關於array map 在 BorntoDev Facebook 的最讚貼文
- 關於array map 在 BorntoDev Facebook 的最佳貼文
- 關於array map 在 紫楓碎碎唸 Facebook 的精選貼文
- 關於array map 在 奮game王紫楓 Youtube 的精選貼文
- 關於array map 在 魏巍 Youtube 的精選貼文
- 關於array map 在 map Array Method | JavaScript Tutorial - YouTube 的評價
- 關於array map 在 JavaScript Array map() Method: Transforming Array Elements 的評價
- 關於array map 在 Array.prototype.map - JavaScript Guidebook 的評價
- 關於array map 在 Map through a Javascript array of objects and return a new ... 的評價
array map 在 BorntoDev Facebook 的最佳貼文
🔥 ไม่ต้องวน for ให้ยุ่งยาก เพียงแค่คุณเปลี่ยนมาใช้ฟังก์ชัน map() ใน JavaScript ก็สามารถ
Convert array strings เป็น array numbers ง่าย ๆ เพียงแค่ 1 บรรทัดเท่านั้น
.
👉 ได้คำตอบเหมือนกันเป๊ะ ๆ เขียนโค้ดได้สั้นลง แถมประหยัดเวลาอีกด้วย !!
.
หวังว่าทริคดี ๆ แบบนี้จะเป็นประโยชน์กับเพื่อน ๆ นะจ้ะ ใครมีวิธีเจ๋ง ๆ กว่านี้มาแชร์กันได้นะคะ
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
array map 在 紫楓碎碎唸 Facebook 的精選貼文
開始來講資料結構!!
在這裡我們會講
Array, Linked List
Stack
Queue
Set, Map
Tree
Hash
http://l.ovoy.click/datas
array map 在 奮game王紫楓 Youtube 的精選貼文
#軟體工程師
👍歡迎訂閱!! 🔔🔔按下小鈴鐺,就可以一有新影片就搶先看!
[軟體工程師雜談] 輕鬆搞懂資料結構 |IT鐵人賽: 從零開始搞懂寫程式,資工系4年最重要的學科,資料結構,演算法,物件導向
IT鐵人賽網址:https://ithelp.ithome.com.tw/users/20128489/ironman/3093
程式新手學習發問區,問都給問!!: https://www.facebook.com/groups/914880435669061
紫楓FB專頁: https://www.facebook.com/tbpfs2/
紫楓blog: https://tbpfs1.blogspot.com/
斗內專線: https://pse.is/KUYMP
array map 在 JavaScript Array map() Method: Transforming Array Elements 的推薦與評價
Introduction to JavaScript Array map() method. Sometimes, you need to take an array, transform its elements, and include the results in a new array. Typically, ... ... <看更多>
array map 在 Array.prototype.map - JavaScript Guidebook 的推薦與評價
Array.prototype.map() 根据传递的转换函数,更新给定数组中的每个值,并返回一个相同长度的新数组。它接受一个回调函数作为参数,用以执行转换过程。 语法. 语法:. const ... ... <看更多>
array map 在 map Array Method | JavaScript Tutorial - YouTube 的推薦與評價
One good example of using the map function is to double all the numbers inside an array. Or we can use it to calculate the total value of ... ... <看更多>