สอน React เบื้องต้น จนใช้ได้จริง #01
Vložit
- čas přidán 23. 07. 2024
- สนับสนุน Zinglecode ให้สามารถผลิตและพัฒนาเนื้อหาให้ดียิ่งขึ้นต่อไป ด้วยการสมัครเป็นสมาชิกรายเดือน (CZcams Membership) ได้ที่นี่
/ @zinglecode
ติดต่องานเขียนเว็บ เขียนแอพ โฆษณา หรือสอบถามรายละเอียดคอร์สเรียนได้ที่
Facebook : / zinglecode
Line : lin.ee/yG1XX6D
Email : zinglecode@gmail.com
สอน React เบื้องต้น โดยใน Part 01 นี้จะเป็นการทำความรู้จักกับคำสั่งและสิ่งสำคัญของ React แล้วเราจะค่อยๆเอาสิ่งสำคัญเหล่านั้น มาสร้างเป็นผลงานจริงแบบค่อยเป็นค่อยไป
ใครสงสัยเรื่องติดตั้ง React โปรดดู Node.js part 1-4 ก่อน
• สอน Node.js
วาร์ปหัวข้อ
0:00 Greeting (ทักทาย)
1:37 What is ? (มันคืออะไร ทำไมต้องใช้มัน)
4:03 Install (ติดตั้งโปรเจ็ค React)
8:56 JSX (JavaScript x HTML)
15:56 CSS (เว็บที่ดีคือเว็บที่สวย)
23:27 Static files (ไฟล์นิ่งๆอย่างรูปภาพ)
29:04 Components (เลโก้ชิ้นเล็ก)
46:35 Props (รอยสักที่ไม่เหมือนกัน)
1:01:14 States (รอยสักที่ถูกเลือก)
1:13:12 Events (เหตุการณ์ครั้งนั้น)
1:29:24 Form inputs (ฟอร์มเที่ยวบินไปกลับ)
1:46:54 Build & Deploy (พ่อครับแม่ครับผมทำได้แล้ว)
1. เรื่องของ States ตอนเวลา 1:02:10 เป็นต้นไป ผมลืมเลื่อนให้ดูการ import useState ตรงบรรทัดที่ 1 นะครับขออภัย คำสั่งคือข้างล่างนี้
import { useState } from 'react';
2. สามารถดูคลิป React ep. ต่อไปได้ จาก Playlist อันนี้นะครับ
czcams.com/play/PL_xSQKvnccpn-C2fZNJtCykO24yqFWkDn.html
3. ตัวอย่างโค้ดโปรเจ็คนะครับ โฟลเดอร์รูปภาพอยู่ที่ public/images สามารถโหลดมาใช้กันได้
github.com/potchangelo/react-just-tattoo
ถ้าใส่ !!ข้างหน้าstate มันจะหมายความว่ายังไงครับยัง งงๆอยู่ช่วงเวลา 1:06:19
มันคือการแปลงชนิดข้อมูลอะไรก็ตาม ให้กลายเป็น boolean ครับ อย่างเช่น
- !!'สวัสดี' => จะได้ค่าเป็น true เพราะมีข้อความ พอแปลงเป็น boolean เลยเท่ากับว่ามีค่า เลยได้เป็นถูกต้อง
- !!'' => จะได้ค่าเป็น false เพราะข้อความว่างเปล่าคือไม่มีค่า ในโลกของ boolean เขาไม่ให้ค่ามัน แปลว่าไม่ถูกต้อง
สอนดีมากๆครับ ขอบคุณมากนะครับ
บอกเลยว่า ชอบมากๆครับสอนไม่เบื่อเลย ดูสนุกดี
สอนดีมากครับ 555555 ฟิวการสอนดีมาก เพลินดีครับ ชอบๆ
สอนดีมากครับไม่น่าเบื่อเลย ชอบมาก ฟาร์มดัน CSS เยี่ยมเลยครับ สุดยอด
เจ๋งมากครับ เข้าใจง่าย + มีฮาบ้างบางจังหวะ 👍🏻
สุดยอดแห่งการสอนครับ ไม่ง่วง ตื่นเต้นตลอดเวลาเลยอะ ชอบๆ แนวนี้ครับ
ชอบอ่ะ ลีลาคำบรรยายได้ความรู้ด้วย เยี่ยมๆ ขอตามๆ
ขอบคุณสำหรับความรู้ครับ ฟังเพลินมาก ๆ เลย
ทำคลิปดีมากค่ะเสียงก็น่าฟัง ชื่นชมเลย
ไม่ผิดหวังพี่เลยครับ ดีใจเลยมาดูช่องนี้ ไม่น่าไปดูเเหล่งอื่นให้เสียเวลาเลย55555+ ไม่ง่วงด้วย energy คนสอนเเข็งเเกร่งมากกกกกกก ขอบคุณครับ
สอนดี สอนละเอียดมากครับ ติดตามเลยครับ
เข้าใจง่ายดีครับ ขอบคุณครับ
การเล่นเสียงสูงต่ำในคลิปทำให้คลิปไม่น่าเบื่อ ชอบมากครับ
สอนดีมากๆ ขอบคุณมากๆๆๆเลยนะคะ
ดีมากครับ กลับมาดูอีกรอบ ทบทวน ตอนนี้กำลังลองทำโปรเจ็คเล็กๆเลยมาศึกษาเพิ่ม
ขอบคุณครับพี่ ที่เสียสละเวลาทำคลิปดีๆสอน
ขอบคุณสำหรับความรู้นะครับ สอนดีมากเลยอธิบายยกตัวอย่างให้เห็นภาพง่ายมากขึ้นเลยครับ
สุดยอดมาก ขอบคุณมากครับอาจารย์
แบบนี้ต้องกด ติดตามแล้วค่ะ
อยากให้สอนจนถึงการสร้างจากการใช้ Template ให้เป็น WebSite สวยๆ ผ่าน API ครับผมติดตามครับผม สู้ๆ ครับ สอนดีมากเยี่ยมมาก ๆ ครับ
ขอบคุณมากครับ เข้าใจมากเลย มีช่วงเบลอๆตามไม่ทันก็วนกลับมาดูได้ ขอบคุณอีกครั้งครับ
สอนเข้าใจมากๆเลยครับ
ขอบคุณที่ให้ความรู้ครับ
สอนดีมากครับ ไม่ง่วงเลย แต่ค่อนข้างมีบางส่วนที่ตามไม่ทันบ้าง ต้องไปเล่นเอง โดยเฉพาะช่วง States ต้องคอยทำความเข้าใจเองเพิ่มเติม แต่โดยรวมแล้ว เป็นประโยชน์มากๆครับ ขอบคุณนะครับ
ขอบคุณสำหรับความรู้นะครับ ทำต่อไปเรื่อยๆนะครับ
ชอบความเสี่ยวของช่องนี้
เหมือนผมกำลังดูแแคสเกมอยู่เลยครับ เป็นการเรียนที่สนุกมากๆ
ติดตามตลอดครับ
ขอบคุณสำหรับวิทยาทานครับ
มือหัดใหม่ครับ ขอบคุณมากๆจ้า
เป็นการสอนที่สนุกดีอะ
ดีจัดๆ
ขอบคุณครับ
สุดยอดมากครับ
สอนเก่งมากครับ
รอชม react + redux + next หรือเทคนิคขั้นสูงนะครับ
ใช้คำสั่ง code . (จุด) ถ้าอยู่หน้า terminal มันจะเปิด vs code ใน path นั้นๆ ให้
มาละจ้า
สอนดีมาก
ขอบคุณมากครับ
ชอบ ดีดจังเลยคับ555555555555555 ดีๆ เรียนสนุกดี
สอนดีครับ การพูดดี ไม่ชวนหลับ
Fc จากบ้านผมเองครับ
เป็นการสอนที่ไม่เครียดเลยขอบคุณคับ สู้ ๆ
มีประโยชน์มาก ลองทำตามได้ทุกขั้นตอน ติดตามตลอดปัยยย
ปัจจุบันยังใช้ได้มั้ยครับ
ขอเรื่อง react-hook ได้ไหมครับ ขอบคุณครับ
fc จาก ส ป ป ลาว ครับ
สอนดีมากกก ไม่ง่วงเลย 😆
สอนสนุกมากครับ เสียงบางช่วงคล้ายๆโงกุนเลยครับ 555
ฟังไปขำ ไป ชอบมากเลยค่ะ สนุก ไม่เบื่อเลย
สักหน่อยมั้ยหละ555555
@@jarawinpromsawat 555
Content คุณภาพ
สอน react + redux + firebase หน่อยครับ ผมหาอยู่ครับ
คุ ณ ภ า พ ค รั บ
beginner friendly มากๆครับ
so good
ถ้าภาพที่โหลดมาขนาดไม่เท่ากันทำยังไงได้บ้างคับเพราะตอนปอปอัปขนาดมันมั่วหมดเลย
สนุกครับ 55555
ผมที่เคยเป็น ความถึก555 ขอบคุณครับ
tNice tutorialng ♂️. And I haven't used soft soft 9 since 09. So sorry bud✌ peace from Germany...
สอนดีกว่าครูในมหาลัย ต้องไหว้พี่เป็นครูแทนละครับ >
สวัสดีปีใหม่ครับ สู้ความเวิ้งว้างอันไกลโพ้น ครับผม...ผมจะเลี้ยงเบียร สักขวด
ชนแก้วแบบ Bluetooth ก่อนนะครับ กลัวโควิด
แอด..สักเต็มหลังเลยใช่มั้ย
มีแพลนจะทำคอร์ส Flutter บ้างไหมคะ
ตอนนี้ยังไม่มีเลยครับ
redux ใช่กับ function component ได้ไหมครับ
ใช้ได้สบายๆเลยครับ หลายๆโปรเจ็คที่แอดมินทำก็ใช้ Functional component + Redux ทำครับ
react ถ้าไม่ใช้ nodejs จะใช้งานได้มั้ยครับ เหมือน vuejs ที่แค่ include ไฟล์ vue.js ก็ใช้งานร่วมกับ html css ธรรมดาได้แล้ว
ใช้ได้ครับ ลองดูที่ Document ของเว็บ React ได้เลย มันมีวิธี include ไฟล์ JS ของ React อยู่ครับ
กราบขอบพระคุณสำหรับความรู้ดีๆและขอบคุณที่เสียสละเวลา 2 ชั่วโมงเพื่อส่งต่อความรู้ครับ
สมมุติว่าเราจะใช้คอมเราเองเพือรัน เวปไซต์ คื่อให้ใช้งานเวปเองภายใน LAN ก็ไมต้อง deploy ใช่ไหมครับ
ต้องแปลจาก developement เป็น build ไหมครับ
แล้วทุกครั้งที่เปิดคอมใหม่ ต้องสั่งคำสั่ง node run dev กับ npm start เอง เหรอครับ
ใช่ครับ ไม่จำเป็นต้อง Deploy ไปที่อื่น แค่สั่ง build หรือ start ในเครื่องตัวเองก็ใช้งานได้ละครับ
ส่วนเรื่องเปิดคอมใหม่แล้วต้องมารันคำสั่งใหม่ สามารถแก้ปัญหาได้ด้วยสิ่งที่มีชื่อว่า pm2 ครับ มันเป็นตัวช่วยให้สามารถ Run / Restart process ได้ตลอดเวลา ยังไงลองศึกษาเพิ่มเติมดูนะครับ
สอนดีกว่าครูอีกครับ
ขอนอกเรื่องหน่อยนะครับ เสียงคุณเหมือนนักพากย์การ์ตูนเลยครับ5555 ตอน 25:23 เสียงเหมือนคุโด้ ชินอิจิเลย
โมริ รัน นี่ชั้นเองไงหละ !
ดู EP นี้มาได้ครึ่งทางเริ่มสงสัยว่า React มีความสัมพันธ์อย่างไรกับ Nodejs เพราะจะเริ่ม project ก็
ต้องใช้ npm start เหมือนกัน มีไฟล์ package.json เหมือนกัน(ถึงภายในจะต่างกัน) รบกวนอธิบาย
หน่อยครับ
ขออธิบายเป็นลำดับนี้นะครับผม
1. Node.js เป็น Runtime ที่ทำให้เราเขียนโค้ดภาษา JavaScript เพื่อทำงานกับระบบไฟล์และเซิร์ฟเวอร์ได้ครับ (ถ้าอยากดูรายละเอียดเพิ่มเติม สามารถดูได้จากคลิปสอน Node.js ที่ผมทำไว้ในแชนแนลนะครับ)
2. React เป็น Library ที่ช่วยให้เราเขียนเว็บที่มีการปรับเปลี่ยน UI ตามข้อมูล/สถานการณ์ต่างๆ ได้อย่างสะดวกและมีประสิทธิภาพครับ
3. ดังนั้น create-react-app ที่เห็นในคลิป ตัวนี้จะช่วยสร้างโปรเจ็คที่ใช้ React เขียนเว็บ ขึ้นมาให้เราครับ เราจะได้ไม่ต้องมานั่งตั้งค่าทีละอย่างเพื่อใช้ React ด้วยตัวเอง
4. ดังนั้น Node.js จะทำหน้าที่เป็นตัวจัดการไฟล์และเซิร์ฟเวอร์ ให้กับโปรเจ็ค React ที่สร้างขึ้นมาครับ หน้าที่หลักของ Node.js ก็จะมีประมาณนี้
- Node.js จะทำให้เปิดเซิร์ฟเวอร์เพื่อรันโปรเจ็ค React บน localhost ได้
- Node.js จะคอยจับตาดูการเปลี่ยนแปลงของไฟล์ในโปรเจ็ค React และจะอัพเดทผลลัพธ์หน้าเว็บใหม่แบบอัตโนมัติ เมื่อมีการบันทึกไฟล์
- Node.js จะทำหน้าที่ Build (หรือเรียก Compile ก็ได้) ไฟล์ที่เราเขียนมาทั้งหมด ออกไปเป็นไฟล์ HTML CSS JS ครับ เพื่อให้เราเอาไฟล์พวกนี้ไปอัพโหลดขึ้น Hosting เพื่อแสดงผลเป็นเว็บจริง (ดูได้จากตอนท้ายคลิป)
@@Zinglecode ขอบคุณมากครับ ผมเรียน Node.js ทั้ง4epที่อาจารย์สอนมาแล้วแต่ก็ยังไม่เข้าใจมาก
เดี๋ยวอาจต้องกลับไปทบทวน Node.js เสียหน่อย
สามารถทบทวนได้เรื่อยๆเลยครับ เพราะว่าเรื่องพวกนี้มันต้องเรียน + ต้องฝึกบ่อยๆถึงจะคล่อง ผมเองตอนเริ่มหัดใช้ Node.js ก็ฝึกทำความเข้าใจ + จดเนื้อหาลงสมุด อยู่หลายรอบครับ (อีกประมาณ 1 สัปดาห์ จะเดินทางกลับบ้าน ไปทำเนื้อหา Node.js ต่อนะครับ)
@@Zinglecode ดีมากเลยครับ เพราะดูเหมือน
เนื้อหามันค่อนข้างน้อยไปหน่อย (แค่4epผมยัง
บอกว่าเข้าใจน้อย 555.. ถ้ามากกว่านี้คงงงเป็น
ไก่ตาแตกแน่) ดีเลยครับกำลังรอให้มาต่อเนื้อหาNode.js แต่ผมคงจะขอวนเวียนอยู่กับ React ทั้งครอส นี่สัก1-2 รอบแล้วจึงจะกลับไป
เรียน Node.js นะครับ
29:05 Components
finish
ผมติดอะไรรึป่าวครับ ผมแม่งสร้าง project react ไม่ได้ตั้งแต่5:53 จบคลิปไปอย่างรวดเร็ว 55555
ขอสอบถามหน่อยครับพี่ react เราโหลดมาแล้ว ถ้าเราจะทำ ptroject อื่นต้อง ลบไฟล์ออกหรือ โหลดมาอีกที่ได้ครับ
ถ้าจะทำ Project อื่น สร้างใหม่ได้เลยครับ ใช้ create-react-app สร้างได้เลย ขอแค่ชื่อไม่ซ้ำกับโปรเจ็คเก่า
ขอบคุณครับพี่
มันดีกว่า Vue js ไหมครับ(หางานง่าย ใช้ง่ายกว่ากันยังไง) ตอนนี้เป็นช่วงหัวเลี้ยวหัวต่อเลยครับ ใกล้จะอ่าน Html css จบแล้วครับ 555
ขึ้นอยู่กับความถนัดส่วนบุคคลครับ บางคนชอบ React บางคนชอบ Vue.js ซึ่งทั้งคู่มีอะไรให้ใช้ได้เหมือนกันนะครับ
แนะนำให้ลองเอา React กับ Vue.js มาเขียนเว็บเดียวกัน (เว็บง่ายๆก็ได้) เทียบกันดูครับ จะได้ตัดสินใจง่ายขึ้น
ดีกว่าเยอะเลยครับ react เขียนได้ทั้งเว็บ และ แอพพิเคชั่น
@@username-ee5be ขอบคุณมากครับผม
@Supot SaeEa ไม่ยากครับ
ผมโคตร งง เรื่อง States Props เลยครับ เปิดฟังมา 2-3 ช่องก็ไม่เข้าใจ จนมาเจอช่องนี้เข้าใจง่ายมาก แต่ก็ต้องฝึกลงมือทำบ่อยๆ ไม่งั้นปิดคลิปนอนไป 2 คืนก็ลืมและ -*-
ถูกต้องครับ ฟังอย่างเดียวจะไม่เข้าใจทั้งหมด ต้องลงมือทำด้วย
ถ้าเข้าใจ props, state เบื้องต้นแล้ว สามารถศึกษาคลิป Ep. ต่อไปของ React ได้ครับ เพื่อให้เข้าใจการทำงานกับ props, state หลากหลายรูปแบบมากขึ้น
15:11 จบคลิปภายใน 15 นาที 555+
ตรง 34:26 ผมขึ้น Error ครับ
แคปหน้าโค้ดที่ Error ส่งมาให้ดูได้เลยครับ
เป็นการสอนReactที่เข้าใจง่ายมากแถมกระชับไม่น่าเบื่อค่ะ ยอมรับเลยค่ะว่าอธิบายพาทของcssแค่สั้นๆแต่เราจากที่ไม่ค่อยเข้าใจcssเท่าไหร่ตอนนี้เข้าใจจากคลิปนี้เลยค่ะ
ขอบคุณมากครับ
ถ้าอยากเปลี่ยนiconของหัวเว็บที่เราdeployขึ้นไปจากiconของreactเป็นรูปiconอื่นทำได้อย่างไรครับ
ให้เปลี่ยนไฟล์ favicon.ico ที่อยู่ในโฟลเดอร์ public เป็นไฟล์รูปภาพของเราครับ จะใช้เป็นไฟล์ .png หรือ .ico ก็ได้ครับ
@@Zinglecode ขอบคุณมากครับ
แก้ที่ไฟล์ index.html
ขอบคุณมากครับ