อยากเริ่มเขียนเว็บด้วย React แบบคนอื่นบ้าง แต่ไม่รู้จะเริ่มต้นยังไงดี ? 😖
.
ไม่ต้องกังวลไป...เพราะวันนี้แอดสรุปมาให้แล้วจ้า กับสิ่งที่ต้องรู้ก่อนจะเริ่มต้นใช้ Library ที่ช่วยในการเขียนเว็บแอปพลิเคชันอย่าง React
.
มีอะไรต้องรู้บ้าง ? หากพร้อมแล้วไปดูกันเลย ~
.
🌟 พื้นฐาน HTML CSS JavaScript
.
ก่อนอื่นเราต้องมาสำรวจตัวเองก่อนว่าเราเข้าใจพื้นฐานพวกนี้แล้วหรือยัง ถ้ายังไม่เข้าใจ ควรจะไปศึกษาให้เข้าใจอย่างถ่องแท้ก่อนนะ ส่วนพื้นฐานที่แอดพูดถึงก็มีดังนี้
.
🔸 HTML เช่น HTML Element, Form, Table, และ Div เป็นต้น
🔸 CSS เช่น Styling, CSS Selectors และ Box Model
🔸 JavaScript เช่น variables, Conditional Statements, Loops, Data Types, และ DOM เป็นต้น
.
✨ NPM
.
รู้จักการใช้งาน NPM ซึ่งเป็นเครื่องมือที่ช่วยในการติดตั้ง อัปเดต กำหนดค่าต่าง ๆ และรันคำสั่งบางอย่างผ่าน Terminal เพื่อใช้งานคำสั่ง และ Library บนโปรเจกต์ React ของเรานั่นเอง
.
อ่านวิธีการใช้งานเพิ่มเติมได้ที่นี่ 👇
Link : https://www.npmjs.com/
.
✨ React Concept
.
เมื่อเราเรียนรู้พื้นฐานและฝึกฝนจนเชี่ยวชาญแล้ว ขั้นตอนต่อมาเราก็จะต้องเรียนรู้และทำความเข้าใจโครงสร้างและการทำงานของ React เช่น
.
🔹 Create React App - เป็นการตั้งค่าสภาพแวดล้อมและเครื่องมือต่าง ๆ ให้เหมาะสมกับการพัฒนาโปรเจกต์บน React เพื่อให้เราสามารถใช้คุณสมบัติของ JavaScript ได้อย่างเต็มประสิทธิภาพนั่นเอง !
.
อ่านวิธีการติดตั้งแบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/create-a-new-react-app.html
.
🔹 JSX - เป็นส่วนเสริมของ JavaScript ที่ทำให้เราสามารถจัดการกับ UI ใน React ได้อย่างง่ายดาย ซึ่งจะมี Syntax คล้าย ๆ กับ HTML
.
สามารถอ่านเรื่อง JSX แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/introducing-jsx.html
.
🔹 Virtual DOM - เป็นตัวที่ช่วยจัดการ Object และ Element ต่าง ๆ บน React เปรียบเสมือนพิมพ์เขียวของ DOM ถ้าหากมีการแก้ไขหรือเปลี่ยนแปลง Object บน React มันก็จะไม่กระทบกับ DOM ทั้งหมด เพราะมันจะเปลี่ยนแปลงเฉพาะ Object ที่มีการอัปเดตเท่านั้น ทำให้การแสดงผลมีความรวดเร็วมากขึ้นนั่นเอง
.
สามารถอ่านเรื่อง Virtual DOM แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-internals.html
.
🔹 Props & State - Props (Properties) เปรียบเสมือนแท็กใน HTML เช่น src, href, หรือ class แต่ความพิเศษของมันก็คือทำให้ React Component สามารถส่งค่าต่าง ๆ ระหว่างกันได้ ส่วน State จะแตกต่างกับ Props เพราะมันจะเป็นการเก็บค่าเพื่อใช้ใน Component นั้น ๆ เท่านั้น
.
สามารถอ่านเรื่อง Props & State แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-state.html
.
🔹 Conditional Rendering - เป็นการแสดงผล Element ต่าง ๆ บน UI แบบมีเงื่อนไขนั่นเอง โดยใช้ตัวดำเนินการใน JavaScript เช่น if...else เป็นต้น
.
สามารถอ่านเรื่อง Conditional Rendering แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/conditional-rendering.html
.
🔹 React Hook - เป็น Functions เจ๋ง ๆ ใน React ซึ่งเป็นฟีเจอร์ใหม่ที่มีใน React v16.7.0-alpha -ข้อดีของมันก็คือทำให้เราสามารถเรียกใช้ State ต่าง ๆ ใน React แบบไม่ต้องเขียน Class ให้เมื่อยมือ! เป็นการเพิ่มคุณสมบัติของ Component ไม่ว่าจะ Test หรือ Refactor ก็ทำได้ง่าย ๆ
.
สามารถอ่านเรื่อง React Hook แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/hooks-intro.html
.
✨ API
.
เรียนรู้โครงสร้าง และวิธีการดึงข้อมูลจาก API โดยต้องเข้าใจการใช้งานฟังก์ชันใน JavaScript เพื่อช่วยในการดึงข้อมูลและนำมาใช้ภายในโปรเจกต์ หรืออาจจะใช้เครื่องมืออย่าง Axios ซึ่งเป็นอีกหนึ่ง Library ยอดนิยมที่ช่วยให้เราดึงข้อมูลจาก API ได้อย่างง่ายดาย !
.
เพื่อน ๆ สามารถอ่านวิธีการใช้งาน Axios ได้ที่นี่ 👇
Link : https://www.npmjs.com/package/axios
.
✨ Server-side Rendering
.
รู้จักการใช้งานเครื่องมือที่ช่วยในการแสดงผลฝั่ง Server เช่น Next.js, After.js, Rogue ซึ่งเหล่า React Dev ส่วนใหญ่จะนิยมใช้เจ้า Next.js เพราะใช้งานง่าย ไม่ต้อง Config อะไรเพิ่มเติมและช่วยให้เราสามารถเขียนเว็บได้สะดวก รวดเร็วมากขึ้นนั่นเอง !
.
✨ Styling UI
.
ใช้แนวคิด CSS มาช่วยให้เราออกแบบ วาง Layout และจัดองค์ประกอบบนหน้าเว็บไซต์ ซึ่งในปัจจุบันก็มีเครื่องมือต่าง ๆ ที่จะช่วยให้เราเขียน CSS ได้ง่ายมากขึ้น ไม่ว่าจะเป็น Material UI และ TailwindCSS นั่นเอง
.
และเมื่อเราได้เรียนรู้ทุกหัวข้อที่แอดกล่าวมาแล้ว เราก็เริ่มต้นทำโปรเจกต์ React กันได้เลย !! ซึ่งทางทีมแอดเคยทำสรุปการใช้งาน React ไว้ให้แล้ว หากสนใจสามารถกดเข้าไปอ่านกันได้เลย ~
📑 Link : https://www.borntodev.com/2020/07/15/react-101/
.
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ ที่กำลังเริ่มต้นเขียน React นะ หากชอบเนื้อหานี้ อย่าลืมกดไลก์ กดแชร์ เพื่อเป็นกำลังใจให้พวกเราด้วยล่ะ 😁
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#React #javascript #ฺBorntoDev
css
🌈 สวัสดีเพื่อน ๆ ทุกคนวันนี้แอดจะพาเพื่อน ๆ มาดูความแตกต่างของ XPath และ CSS Selector กันนน~
.
⚡ ซึ่งทั้งสองเป็นเครื่องมือที่มีประสิทธิภาพที่ใช้ในการเข้าถึง Element ต่าง ๆ ของเว็บและสามารถเข้าถึง DOM ทั้งหมดของเว็บไซต์ได้อย่างรวดเร็วนั่นเอง ไม่มีตัวไหนดีกว่ากันอย่างชัดเจน เพราะแต่ละอันก็มีคุณสมบัติที่ดีของตัวมันเอง
.
ไปดูกันว่าทั้งสองนั้นต่างกันยังไง และมีรูปแบบการเขียนยังไง หากพร้อมแล้วไปดูกันเลยจ้า !!
.
👉 CSS Selector
ใช้สำหรับค้นหาหรือเลือก HTML Element ที่เราต้องการ ซึ่งจะใช้ในการทดสอบ หรือดึงข้อมูลจากหน้าเว็บนั่นเอง
.
📑 ตัวอย่าง
.
ต้องการดึง Element ... จากโค้ดด้านบนมาเป็น CSS Selector จะได้ดังนี้
#close
.
✨ ข้อดีของ CSS Selector
🔹 เร็วกว่า XPath
🔹 เรียนรู้และนำไปใช้ได้ง่ายกว่า
🔹 ใช้ได้กับทุกเบราว์เซอร์
🔹 ค้นหา Element ได้ง่าย
.
👉 XPath
ย่อมาจาก XML Path เป็นตัวช่วยระบุ Element ต่าง ๆ บน XML Document หรือบนหน้าเว็บที่ต้องการดึงข้อมูล หรือทดสอบ
.
📑 ตัวอย่าง
.
ต้องการดึง Element ... จากโค้ดด้านบนมาเป็น XPath จะได้ดังนี้
//*[@id="close"]
.
✨ ข้อดีของ XPath
🔸 ช่วยให้สามารถเข้าถึง HTML DOM ได้อย่างง่ายดาย
🔸 รองรับเบราว์เซอร์รุ่นเก่า ๆ
🔸 มีความยืดหยุ่นกว่า CSS Selector
🔸 หากไม่ทราบชื่อ Element ก็สามารถค้นหาได้ง่าย
.
เป็นยังไงกันบ้างงง ? พอจะเห็นความแตกต่างของทั้งสองแล้วเนอะ และหากใครมีอะไรนอกเหนือจากนี้ คอมเมนต์ไว้ด้านล่างได้เลยน้าาาา และหวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะ 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
css
Funliday-旅遊規劃 身處武漢肺炎疫情最慘重的觀光業中心,雖然大家都不出去旅遊,但我們也趁著這個時間增強自己的核心功能,小編今天來聊一下其中一個功能的技術議題。
Funliday 有個功能是把外部文章直接顯示在 Funliday 的 App 跟 Web 上,但遇到了一些技術性及著作權的問題,相信應該也有朋友遇到過類似的狀況,今天就來分享一下吧。
在 Funliday App 上的顯示還算好處理,直接用 WebView 呈現就好,但在 Funliday Web 上就很難處理,這邊整理一下技術上可以實作的幾種方式。
1. iframe + original url:最暴力的方式,直接用 iframe 嵌入對方網址,但會有一些問題。像是無法讓 Google 大神爬內容、HTTP 網址無法嵌入、如果有設定 x-frame-options 為 SAMEORIGIN 的話就無法嵌入、CSP 的設定也有可能造成無法嵌入
2. iframe + proxy + funliday url:改善了第 1 種方式,直接在 Funliday server 這裡做 proxy,但還是會有無法讓 Google 大神爬內容以及內容網址如果是相對路徑時的導頁問題 (這應該好解決)
3. 寫爬蟲抓內容:比如 A 站就固定抓
,B 站就固定抓 的內容,然後直接顯示在 Funliday Web 上,但畫面可能會亂掉,所以要想辦法把 A 站跟 B 站的 CSS 也拿來用,在 CSS 前面也要想辦法加上 namespace 避免衝突
4. remote render:類似 2+3 的方式,就是把要顯示的網頁用 headless chrome render 完之後,再跟原本的內容一起顯示,但畫面應該是會亂掉。
技術面可以的解法都確認了之後,再來就是適法性的問題了,因為 234 會把對方的資料落地到 Funliday 上,所以可能會有著作權的問題。對科技及法律這塊當然要問有研究的 Ant Yi-Feng Tzeng 啦,請教了 ant 之後也得到了一些結論。
234 都會有著作權法的問題,所以基本上是不可行的,但只要著作權人有同意的話,則不在此限。
---
最後 Funliday Web 的實作方式跟 1234 都無關,而是改用類似預覽頁的方式在 Funliday Web 顯示原連結的 og:title 及 og:image,應該會再加上簡單如「以上內容未經重製與改作,來源均援引來源網頁內容」的聲明。
對於技術這部分也不複雜,在後台上稿時先取得原網頁的 og 資料,跟原本的 234 相比簡單太多了 XD
---
有經過 ant 同意,認為這個問題應該蠻多人都會遇到,所以分享給大家看看啦!
#著作權 #iframe #funliday
社群媒體上有些相關的討論:
🌈 สวัสดีเพื่อน ๆ ทุกคนวันนี้แอดจะพาเพื่อน ๆ มาดูความแตกต่างของ XPath และ CSS Selector กันนน~
.
⚡ ซึ่งทั้งสองเป็นเครื่องมือที่มีประสิทธิภาพที่ใช้ในการเข้าถึง Element ต่าง ๆ ของเว็บและสามารถเข้าถึง DOM ทั้งหมดของเว็บไซต์ได้อย่างรวดเร็วนั่นเอง ไม่มีตัวไหนดีกว่ากันอย่างชัดเจน เพราะแต่ละอันก็มีคุณสมบัติที่ดีของตัวมันเอง
.
ไปดูกันว่าทั้งสองนั้นต่างกันยังไง และมีรูปแบบการเขียนยังไง หากพร้อมแล้วไปดูกันเลยจ้า !!
.
👉 CSS Selector
ใช้สำหรับค้นหาหรือเลือก HTML Element ที่เราต้องการ ซึ่งจะใช้ในการทดสอบ หรือดึงข้อมูลจากหน้าเว็บนั่นเอง
.
📑 ตัวอย่าง
.
ต้องการดึง Element
#close
.
✨ ข้อดีของ CSS Selector
🔹 เร็วกว่า XPath
🔹 เรียนรู้และนำไปใช้ได้ง่ายกว่า
🔹 ใช้ได้กับทุกเบราว์เซอร์
🔹 ค้นหา Element ได้ง่าย
.
👉 XPath
ย่อมาจาก XML Path เป็นตัวช่วยระบุ Element ต่าง ๆ บน XML Document หรือบนหน้าเว็บที่ต้องการดึงข้อมูล หรือทดสอบ
.
📑 ตัวอย่าง
.
ต้องการดึง Element
//*[@id="close"]
.
✨ ข้อดีของ XPath
🔸 ช่วยให้สามารถเข้าถึง HTML DOM ได้อย่างง่ายดาย
🔸 รองรับเบราว์เซอร์รุ่นเก่า ๆ
🔸 มีความยืดหยุ่นกว่า CSS Selector
🔸 หากไม่ทราบชื่อ Element ก็สามารถค้นหาได้ง่าย
.
เป็นยังไงกันบ้างงง ? พอจะเห็นความแตกต่างของทั้งสองแล้วเนอะ และหากใครมีอะไรนอกเหนือจากนี้ คอมเมนต์ไว้ด้านล่างได้เลยน้าาาา และหวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะ 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
css
Funliday-旅遊規劃 身處武漢肺炎疫情最慘重的觀光業中心,雖然大家都不出去旅遊,但我們也趁著這個時間增強自己的核心功能,小編今天來聊一下其中一個功能的技術議題。
Funliday 有個功能是把外部文章直接顯示在 Funliday 的 App 跟 Web 上,但遇到了一些技術性及著作權的問題,相信應該也有朋友遇到過類似的狀況,今天就來分享一下吧。
在 Funliday App 上的顯示還算好處理,直接用 WebView 呈現就好,但在 Funliday Web 上就很難處理,這邊整理一下技術上可以實作的幾種方式。
1. iframe + original url:最暴力的方式,直接用 iframe 嵌入對方網址,但會有一些問題。像是無法讓 Google 大神爬內容、HTTP 網址無法嵌入、如果有設定 x-frame-options 為 SAMEORIGIN 的話就無法嵌入、CSP 的設定也有可能造成無法嵌入
2. iframe + proxy + funliday url:改善了第 1 種方式,直接在 Funliday server 這裡做 proxy,但還是會有無法讓 Google 大神爬內容以及內容網址如果是相對路徑時的導頁問題 (這應該好解決)
3. 寫爬蟲抓內容:比如 A 站就固定抓
,B 站就固定抓 的內容,然後直接顯示在 Funliday Web 上,但畫面可能會亂掉,所以要想辦法把 A 站跟 B 站的 CSS 也拿來用,在 CSS 前面也要想辦法加上 namespace 避免衝突
4. remote render:類似 2+3 的方式,就是把要顯示的網頁用 headless chrome render 完之後,再跟原本的內容一起顯示,但畫面應該是會亂掉。
技術面可以的解法都確認了之後,再來就是適法性的問題了,因為 234 會把對方的資料落地到 Funliday 上,所以可能會有著作權的問題。對科技及法律這塊當然要問有研究的 Ant Yi-Feng Tzeng 啦,請教了 ant 之後也得到了一些結論。
234 都會有著作權法的問題,所以基本上是不可行的,但只要著作權人有同意的話,則不在此限。
---
最後 Funliday Web 的實作方式跟 1234 都無關,而是改用類似預覽頁的方式在 Funliday Web 顯示原連結的 og:title 及 og:image,應該會再加上簡單如「以上內容未經重製與改作,來源均援引來源網頁內容」的聲明。
對於技術這部分也不複雜,在後台上稿時先取得原網頁的 og 資料,跟原本的 234 相比簡單太多了 XD
---
有經過 ant 同意,認為這個問題應該蠻多人都會遇到,所以分享給大家看看啦!
#著作權 #iframe #funliday
社群媒體上有些相關的討論:
Funliday-旅遊規劃 身處武漢肺炎疫情最慘重的觀光業中心,雖然大家都不出去旅遊,但我們也趁著這個時間增強自己的核心功能,小編今天來聊一下其中一個功能的技術議題。
Funliday 有個功能是把外部文章直接顯示在 Funliday 的 App 跟 Web 上,但遇到了一些技術性及著作權的問題,相信應該也有朋友遇到過類似的狀況,今天就來分享一下吧。
在 Funliday App 上的顯示還算好處理,直接用 WebView 呈現就好,但在 Funliday Web 上就很難處理,這邊整理一下技術上可以實作的幾種方式。
1. iframe + original url:最暴力的方式,直接用 iframe 嵌入對方網址,但會有一些問題。像是無法讓 Google 大神爬內容、HTTP 網址無法嵌入、如果有設定 x-frame-options 為 SAMEORIGIN 的話就無法嵌入、CSP 的設定也有可能造成無法嵌入
2. iframe + proxy + funliday url:改善了第 1 種方式,直接在 Funliday server 這裡做 proxy,但還是會有無法讓 Google 大神爬內容以及內容網址如果是相對路徑時的導頁問題 (這應該好解決)
3. 寫爬蟲抓內容:比如 A 站就固定抓
4. remote render:類似 2+3 的方式,就是把要顯示的網頁用 headless chrome render 完之後,再跟原本的內容一起顯示,但畫面應該是會亂掉。
技術面可以的解法都確認了之後,再來就是適法性的問題了,因為 234 會把對方的資料落地到 Funliday 上,所以可能會有著作權的問題。對科技及法律這塊當然要問有研究的 Ant Yi-Feng Tzeng 啦,請教了 ant 之後也得到了一些結論。
234 都會有著作權法的問題,所以基本上是不可行的,但只要著作權人有同意的話,則不在此限。
---
最後 Funliday Web 的實作方式跟 1234 都無關,而是改用類似預覽頁的方式在 Funliday Web 顯示原連結的 og:title 及 og:image,應該會再加上簡單如「以上內容未經重製與改作,來源均援引來源網頁內容」的聲明。
對於技術這部分也不複雜,在後台上稿時先取得原網頁的 og 資料,跟原本的 234 相比簡單太多了 XD
---
有經過 ant 同意,認為這個問題應該蠻多人都會遇到,所以分享給大家看看啦!
#著作權 #iframe #funliday
css
... <看更多>
css
CSS Tutorial — Selectors, Element, Class and ID (3/13)So we just looked at a basic CSS statement and it starts with a selector. ... <看更多>
css
css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly ... ... <看更多>