💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น 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 - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
「react fetch」的推薦目錄:
- 關於react fetch 在 BorntoDev Facebook 的最讚貼文
- 關於react fetch 在 BorntoDev Facebook 的精選貼文
- 關於react fetch 在 React hook for conveniently use Fetch API - GitHub 的評價
- 關於react fetch 在 React Fetch not working for one link but works for another 的評價
- 關於react fetch 在 鐵人賽:ES6 原生Fetch 遠端資料方法 的評價
- 關於react fetch 在 Data Fetching Patterns for a Better User Experience - InfoQ 的評價
react fetch 在 BorntoDev Facebook 的精選貼文
🔥 รวบตึงการเขียน React เริ่มตั้งแต่ต้น ครบ จบ ใน 2 ชั่วโมง !
.
🦋 สำหรับใครที่กำลังอยากจะเริ่มต้นกับ ReactJs แต่ยังมึน ๆ งง ๆ หรือมีเวลาศึกษาไม่มาก แอดแนะนำคลิปนี้เลย !
.
📚 เพราะเขาเริ่มสอนตั้งแต่พื้นฐานว่า ReactJs คืออะไร ไปจนถึงการสร้างส่วนต่าง ๆ ใน React App ! แต่ก็ไม่ต้องกลัวจะตามไม่ทัน เพราะเขาค่อย ๆ อธิบายพร้อมกับเขียนโค้ดให้ดูด้วย... ซึ่งทั้งหมดที่ว่ามานี้ ครบ จบภายใน 2 ชั่วโมง !!!
.
✨ สำหรับหัวข้อในคลิปก็จะมีประมาณนี้ ! (อ้างอิงจาก Timestamp)
.
✅ Intro & Slides
✅ Create a React app
✅ Files & folders
✅ App component & JSX
✅ Expressions in JSX
✅ Creating a component
✅ Component Props
✅ PropTypes
✅ Styling
✅ Button Component
✅ Events
✅ Tasks Component
✅ Create a list with .map()
✅ State & useState Hook
✅ Global state
✅ Task Component
✅ Icons with react-icons
✅ Delete task & prop drilling
✅ Optional message if no tasks
✅ Toggle reminder & conditional styling
✅ Add Task Form
✅ Form input state (controlled components)
✅ Add task submit
✅ showAddTask state
✅ Button toggle
✅ Build for production
✅ JSON Server
✅ useEffect Hook & Fetch tasks from server
✅ Delete task from server
✅ Add task to server
✅ Toggle reminder on server
✅ Routing, footer & about
.
💥 บอกเลยว่าถึงจะใช้เวลาไม่เยอะ แต่จัดเต็มสุด ๆ ใครที่สนใจ สามารถเข้าไปดูได้เลยจ้าาา >>> https://www.youtube.com/watch?v=w7ejDZ8SWv8
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
react fetch 在 鐵人賽:ES6 原生Fetch 遠端資料方法 的推薦與評價
Fetch 在使用時看似與jQuery $.ajax 挺相近的,所以在使用上也相對容易 ... 太多,但最近想學看看React.js,如果說一直不敢寫的話,那麼就無法進步。 ... <看更多>
react fetch 在 React hook for conveniently use Fetch API - GitHub 的推薦與評價
React hook for conveniently use Fetch API. Contribute to ilyalesik/react-fetch-hook development by creating an account on GitHub. ... <看更多>