อยากเริ่มเขียนเว็บด้วย 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
「axios npm」的推薦目錄:
- 關於axios npm 在 BorntoDev Facebook 的精選貼文
- 關於axios npm 在 axios/axios: Promise based HTTP client for the browser ... 的評價
- 關於axios npm 在 Working with npm: Axios - YouTube 的評價
- 關於axios npm 在 how do i install axios latest version using npm? [duplicate] 的評價
- 關於axios npm 在 React redux github 的評價
- 關於axios npm 在 Node js ecommerce github 的評價
axios npm 在 Working with npm: Axios - YouTube 的推薦與評價
We'll explore how to install npm packages on your Wix website, ... Learn more about how to use Axios in your Velo site and why you might ... ... <看更多>
axios npm 在 axios/axios: Promise based HTTP client for the browser ... 的推薦與評價
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js. ... <看更多>