💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น 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 - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有1部Youtube影片,追蹤數超過7萬的網紅在地上滾的工程師 Nic,也在其Youtube影片中提到,硬核的知識也許不是每個工程師都能夠在職涯發展中完全運用到,但無論是本科系、轉職、自學成為工程師的朋友,都應該要知道,這些紮實的背景知識提早學習起來,在未來的日子裡,只有好沒有壞。 就透過本影片我的真實經驗分享,告訴你這些我在大學時期看似枯燥乏味的理論,其實就是程式設計內功,而日後沉睡已久的內功卻又...
「js array」的推薦目錄:
- 關於js array 在 BorntoDev Facebook 的精選貼文
- 關於js array 在 純靠北工程師 Facebook 的最佳貼文
- 關於js array 在 老闆 來點寇汀吧。 Boss,CODING please. Facebook 的最佳貼文
- 關於js array 在 在地上滾的工程師 Nic Youtube 的最讚貼文
- 關於js array 在 JavaScript 之旅(2):Array.prototype.includes() - Titangene Blog 的評價
- 關於js array 在 【javascript】陣列array 介紹- YouTube 的評價
- 關於js array 在 How to append something to an array? - Stack Overflow 的評價
- 關於js array 在 The Beginner's Guide to JavaScript Array with Examples 的評價
- 關於js array 在 For array test in jest.js - gists · GitHub 的評價
js array 在 純靠北工程師 Facebook 的最佳貼文
#純靠北工程師3xb
----------
91app寫的抽獎網站
把序號寫在JS裡面
抽獎次數寫在cookie裡
Array 第零個都直接注解無用
資料從第一個開始
這...是缺後端嗎
----------
🗳️ [群眾審核] https://kaobei.engineer/cards/review
👉 [GitHub Repo] https://github.com/init-engineer/init.engineer
📢 [匿名發文] https://kaobei.engineer/cards/create
🥙 [全平台留言] https://kaobei.engineer/cards/show/5087
js array 在 老闆 來點寇汀吧。 Boss,CODING please. Facebook 的最佳貼文
200623 Magic Stroke 魔法軌跡
魔法粒子會留下發亮的軌跡,
一樣是shader系列,其實跟上個顯微粒子的code大概只差一點點,
測試把粒子加上一些物理效果,配合p5.js的array做互動
https://www.openprocessing.org/sketch/923304
老闆的 IG 追起來 👉 https://www.instagram.com/bosscodingplease/
【互動藝術程式創作入門】募資順利結束,已經突破 3330%!準備精彩課程範例中 👉 https://hahow.in/cr/creative-coding-1
#dailycodingchallenge #generativeart #creativecoding #p5js #digitalart #creativecodeart #new_media_art #art #graphic #codeart
js array 在 在地上滾的工程師 Nic Youtube 的最讚貼文
硬核的知識也許不是每個工程師都能夠在職涯發展中完全運用到,但無論是本科系、轉職、自學成為工程師的朋友,都應該要知道,這些紮實的背景知識提早學習起來,在未來的日子裡,只有好沒有壞。
就透過本影片我的真實經驗分享,告訴你這些我在大學時期看似枯燥乏味的理論,其實就是程式設計內功,而日後沉睡已久的內功卻又恰巧的在職涯旅途中碰上用處。
章節:
00:00 學這些有用嗎
00:52 我與速成班的距離
04:45 業務增長後的影響
06:36 基本功知識科普
喜歡影片的話!可以幫忙點個喜歡以及分享、訂閱唷!😘
━━━━━━━━━━━━━━━━
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
🌟 任何問題或合作邀約信箱: niclin0226@gmail.com
#資料結構 #演算法 #計算機概論 #前端 #後端 #工程師
js array 在 【javascript】陣列array 介紹- YouTube 的推薦與評價
【零基础 JavaScript 教程】#10 什么是 JavaScript Array ?巧用 JavaScript 数组存储一系列的值(陣列的運用) | Intro to JavaScript Array. ... <看更多>
js array 在 JavaScript 之旅(2):Array.prototype.includes() - Titangene Blog 的推薦與評價
常會有找出陣列中是否包含某元素的需求,過去會使用Array.prototype.indexOf() 來處理,但在ES2016 (ES7) 提供了Array.prototype.includes() 新 ... ... <看更多>