อยากฝึกสกิลเขียน React แบบเริ่มต้นจนทำเป็น ต้องนี่ !! 🔥
.
🌈 รวมคลิปสอนดี ๆ จากช่องชื่อดัง ไว้กว่า 8 คลิป ไม่ใช่แค่ได้เขียน React อย่างเดียว แต่ได้ทำโปรเจกต์จริง ๆ ไปพร้อมกัน บอกเลยว่าเป็นไวแน่นอนจ้า
.
👉 บอกเลยว่ามือใหม่หัดเขียน React ห้ามพลาด !! มาเลือกโปรเจกต์ที่ชอบ แล้วไปทำตามกันโลดดด !!
.
.
✨ Recipe App Using React
.
คลิปสอน React ดี ๆ จากช่อง Dev Ed แบบรวบรัด 50 นาทีทำเป็นแน่นอน !!
.
🖥️ Link : https://www.youtube.com/watch?v=U9T6YkEDkMo
.
.
✨ React Tutorial: Build an E-commerce Site
.
คลิปสอนสร้างเว็บ E-commerce ด้วย React and Netlify จาก freeCodeCamp ตั้งแต่ติดตั้งจนทำเป็น ดูกันยาวไปเลย 6 ชั่วโมง จุกๆ !!
.
🖥️ Link : https://www.youtube.com/watch?v=wPQ1-33teR4
.
.
✨ React Budget Calculator
.
รวมตึง 2 ชั่วโมง กับสอนสร้างโปรแกรมคำนวณด้วย React จากช่อง Coding Addict ดูจบทำเป็นแน่นอน
.
🖥️ Link : https://www.youtube.com/watch?v=f6HYLHrYpGs
.
.
✨ React Project Playlist (30 videos)
.
รวมเพลยลิสต์สอน React สำหรับมือใหม่ ไว้ถึง 30 วิดีโอ เลือกดูและเลือกเรียนกันได้ตามใจชอบเลยจ้า
.
🖥️ Link : https://www.youtube.com/watch?v=FiGmAI5e91M
.
.
✨ COVID-19 Tracker Application
.
สอนสร้างแอปสำหรับ COVID-19 Tracker ด้วย React Hooks, Material UI, และแสดงผลด้วย Charts js ความยาว 1 ชั่วโมง ใครอยากทำโปรเจกต์เกี่ยวกับ COVID-19 บอกเลยว่าห้ามพลาดอันนี้ !!
.
🖥️ Link : https://www.youtube.com/watch?v=khJlrj3Y6Ls
.
.
✨ React Portfolio Website
.
ใครอยากสร้าง Portfolio เจ๋ง ๆ ไว้สะสมผลงานต้องทางนี้ !! เพราะเขาสอนสร้าง Portfolio ด้วย React ตั้งแต่เริ่มต้นติดตั้งโปรแกรมจนได้หน้าเว็บแบบละเอียดยิบเลยจ้า
.
🖥️ Link : https://www.youtube.com/watch?v=7WwtzsSHdpI
.
.
✨ React E-Commerce Appv
.
อยากสร้างเว็บ E-Commerce ต้องห้ามพลาด กับคลิปสอนสร้างเว็บ E-Commerce จากช่อง Lama Dev จุดเด่นคือ UI สวย และน่าใช้มาก ใครอยากฝึกสร้างเว็บสวย ๆ ต้องคลิปนี้เลยจ้า
.
🖥️ Link : https://www.youtube.com/watch?v=c1xTDSIXit8
.
.
✨ Movies App
.
มาสร้างเว็บดูหนังแบบ Netflix หรือ Disney+ ง่าย ๆ ด้วย React กันเถอะ กับคลิปสอนสร้างเว็บดูหนังจากช่อง Florin Pop แบบรวบตึง 40 นาทีทำเป็นเลย ใครอยากฝึกเขียน React แบบไว ๆ ต้องคลิปนี้ !
.
🖥️ Link : https://www.youtube.com/watch?v=sZ0bZGfg_m4
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ น้า หากชอบ อย่าลืม!! กดไลก์ กดแชร์ เพื่อเป็นกำลังใจให้พวกเราด้วยนะ ❤️
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#react #Youtube #BorntoDev

อยากเริ่มเขียนเว็บด้วย 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 นานไปทำไม เพราะเขามี GitHub Repo เจ๋ง ๆ ให้เรา Clone แล้ว !!
.
🌈 สวัสดีเพื่อน ๆ วันนี้แอดไปเจอของดี ของเด็ด มาแจกเพื่อน ๆ กันอีกแล้วจ้า กับ GitHub Repository ที่เขาได้รวบรวมวิธีการสร้างเว็บแบบ Twitter ด้วย React.js
.
👉 บอกเลยว่า Clone มารอบเดียวคือได้เว็บหน้าตาสวย ๆ แบบ Twitter แบบไม่ต้องนั่งบิวต์นานเลยล่ะ ซึ่งเขาใช้ Material UI และ React Flip Move ในการทำ หากใครอยากลองดู Demo ก่อน สามารถกดเข้าไปดูได้ในลิงค์ด้านล่างเลยจ้า !!
.
🖥️ Demo : https://twitter-clone-1bd6b.web.app/
.
💥 หากใครสนใจ ไป Clone โปรเจกต์ได้ในลิงค์นี้เลย
https://github.com/MertCankaya/Twitter-Clone
.
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะคร้าบบบบบบบบบ 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน