สอน React เบื้องต้น จนใช้ได้จริง #01

Рет қаралды 139,745

Күн бұрын

Пікірлер: 110

@Zinglecode 4 жыл бұрын

1. เรื่องของ States ตอนเวลา 1:02:10 เป็นต้นไป ผมลืมเลื่อนให้ดูการ import useState ตรงบรรทัดที่ 1 นะครับขออภัย คำสั่งคือข้างล่างนี้ import { useState } from 'react'; 2. สามารถดูคลิป React ep. ต่อไปได้ จาก Playlist อันนี้นะครับ kzbin.info/aero/PL_xSQKvnccpn-C2fZNJtCykO24yqFWkDn 3. ตัวอย่างโค้ดโปรเจ็คนะครับ โฟลเดอร์รูปภาพอยู่ที่ public/images สามารถโหลดมาใช้กันได้ github.com/potchangelo/react-just-tattoo

@TeerapongSongsantivorakul 3 жыл бұрын

ถ้าใส่ !!ข้างหน้าstate มันจะหมายความว่ายังไงครับยัง งงๆอยู่ช่วงเวลา 1:06:19

@Zinglecode 3 жыл бұрын

มันคือการแปลงชนิดข้อมูลอะไรก็ตาม ให้กลายเป็น boolean ครับ อย่างเช่น - !!'สวัสดี' => จะได้ค่าเป็น true เพราะมีข้อความ พอแปลงเป็น boolean เลยเท่ากับว่ามีค่า เลยได้เป็นถูกต้อง - !!'' => จะได้ค่าเป็น false เพราะข้อความว่างเปล่าคือไม่มีค่า ในโลกของ boolean เขาไม่ให้ค่ามัน แปลว่าไม่ถูกต้อง

@bassofficial2133 3 жыл бұрын

การเล่นเสียงสูงต่ำในคลิปทำให้คลิปไม่น่าเบื่อ ชอบมากครับ

@ptk6909 2 жыл бұрын

ไม่ผิดหวังพี่เลยครับ ดีใจเลยมาดูช่องนี้ ไม่น่าไปดูเเหล่งอื่นให้เสียเวลาเลย55555+ ไม่ง่วงด้วย energy คนสอนเเข็งเเกร่งมากกกกกกก ขอบคุณครับ

@ศรณ์สร้างเว็บ Жыл бұрын

สอนดีมากครับ ไม่ง่วงเลย แต่ค่อนข้างมีบางส่วนที่ตามไม่ทันบ้าง ต้องไปเล่นเอง โดยเฉพาะช่วง States ต้องคอยทำความเข้าใจเองเพิ่มเติม แต่โดยรวมแล้ว เป็นประโยชน์มากๆครับ ขอบคุณนะครับ

@annann3503 Жыл бұрын

มีประโยชน์มาก ลองทำตามได้ทุกขั้นตอน ติดตามตลอดปัยยย

@Ceo-ru2fi 11 ай бұрын

ปัจจุบันยังใช้ได้มั้ยครับ

@WANGYED Жыл бұрын

ขอบคุณมากครับ เข้าใจมากเลย มีช่วงเบลอๆตามไม่ทันก็วนกลับมาดูได้ ขอบคุณอีกครั้งครับ

@cypdev 2 жыл бұрын

ดีมากครับ กลับมาดูอีกรอบ ทบทวน ตอนนี้กำลังลองทำโปรเจ็คเล็กๆเลยมาศึกษาเพิ่ม

@narkornchaiwong9114 3 жыл бұрын

อยากให้สอนจนถึงการสร้างจากการใช้ Template ให้เป็น WebSite สวยๆ ผ่าน API ครับผมติดตามครับผม สู้ๆ ครับ สอนดีมากเยี่ยมมาก ๆ ครับ

@uttapans 4 жыл бұрын

สอนดีมากครับ 555555 ฟิวการสอนดีมาก เพลินดีครับ ชอบๆ

@GOTTYGIBSON 4 жыл бұрын

ขอบคุณสำหรับความรู้นะครับ สอนดีมากเลยอธิบายยกตัวอย่างให้เห็นภาพง่ายมากขึ้นเลยครับ

@sontayabootnamruk9022 3 жыл бұрын

ขอบคุณครับพี่ ที่เสียสละเวลาทำคลิปดีๆสอน

@MayYongSung 3 жыл бұрын

สอนดีมากครับไม่น่าเบื่อเลย ชอบมาก ฟาร์มดัน CSS เยี่ยมเลยครับ สุดยอด

@simpleman7171 3 жыл бұрын

ขอบคุณสำหรับความรู้นะครับ ทำต่อไปเรื่อยๆนะครับ

@pv_xuou 3 жыл бұрын

เจ๋งมากครับ เข้าใจง่าย + มีฮาบ้างบางจังหวะ 👍🏻

@naiyokza 3 жыл бұрын

เข้าใจง่ายดีครับ ขอบคุณครับ

@shishakids2363 4 жыл бұрын

ทำคลิปดีมากค่ะเสียงก็น่าฟัง ชื่นชมเลย

@kyoroz3416 2 жыл бұрын

ชอบความเสี่ยวของช่องนี้

@สมบูรณ์พูนยอด-ช7ถ 2 жыл бұрын

สุดยอดแห่งการสอนครับ ไม่ง่วง ตื่นเต้นตลอดเวลาเลยอะ ชอบๆ แนวนี้ครับ

@New-dj9rz 2 жыл бұрын

ขอบคุณสำหรับความรู้ครับ ฟังเพลินมาก ๆ เลย

@konkinglook3750 Жыл бұрын

สอนดี สอนละเอียดมากครับ ติดตามเลยครับ

@maicue32 3 жыл бұрын

บอกเลยว่า ชอบมากๆครับสอนไม่เบื่อเลย ดูสนุกดี

@akhazamalolifeinsweden1603 3 жыл бұрын

แบบนี้ต้องกด ติดตามแล้วค่ะ

@thanawatpoonbangyung4266 Жыл бұрын

สอนเข้าใจมากๆเลยครับ

@ideakik10 3 жыл бұрын

ฟังไปขำ ไป ชอบมากเลยค่ะ สนุก ไม่เบื่อเลย

@jarawinpromsawat 3 жыл бұрын

สักหน่อยมั้ยหละ555555

@ideakik10 3 жыл бұрын

@@jarawinpromsawat 555

@ชัชวาลย์ศรีมนตรี Жыл бұрын

ขอบคุณสำหรับวิทยาทานครับ

@richboy1541 2 жыл бұрын

เหมือนผมกำลังดูแแคสเกมอยู่เลยครับ เป็นการเรียนที่สนุกมากๆ

@CoppermyMine 11 ай бұрын

ชอบ ดีดจังเลยคับ555555555555555 ดีๆ เรียนสนุกดี

@sunitisukontaprapun8200 3 ай бұрын

เยี่ยมเบย

@TGPCluB 2 жыл бұрын

เป็นการสอนที่สนุกดีอะ

@lovechess0073 Жыл бұрын

ขอบคุณที่ให้ความรู้ครับ

@akekakong78 Жыл бұрын

มือหัดใหม่ครับ ขอบคุณมากๆจ้า

@monyourbae 4 жыл бұрын

มาละจ้า

@sako4822 2 жыл бұрын

สุดยอดมาก ขอบคุณมากครับอาจารย์

@SatitSomsangium 3 жыл бұрын

ดีจัดๆ

@karintecharattanayuenyong6490 6 ай бұрын

เป็นการสอนที่ไม่เครียดเลยขอบคุณคับ สู้ ๆ

@armchannarong8879 2 жыл бұрын

สอนสนุกมากครับ เสียงบางช่วงคล้ายๆโงกุนเลยครับ 555

@korawitwassanarungruengsuk1094 Жыл бұрын

สุดยอดมากครับ

@poowit.k 4 жыл бұрын

สอนดีครับ การพูดดี ไม่ชวนหลับ

@TKhvan 4 жыл бұрын

ติดตามตลอดครับ

@korakotsinsamoot9954 3 жыл бұрын

ดู EP นี้มาได้ครึ่งทางเริ่มสงสัยว่า React มีความสัมพันธ์อย่างไรกับ Nodejs เพราะจะเริ่ม project ก็ ต้องใช้ npm start เหมือนกัน มีไฟล์ package.json เหมือนกัน(ถึงภายในจะต่างกัน) รบกวนอธิบาย หน่อยครับ

@Zinglecode 3 жыл бұрын

ขออธิบายเป็นลำดับนี้นะครับผม 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 เพื่อแสดงผลเป็นเว็บจริง (ดูได้จากตอนท้ายคลิป)

@korakotsinsamoot9954 3 жыл бұрын

@@Zinglecode ขอบคุณมากครับ ผมเรียน Node.js ทั้ง4epที่อาจารย์สอนมาแล้วแต่ก็ยังไม่เข้าใจมาก เดี๋ยวอาจต้องกลับไปทบทวน Node.js เสียหน่อย

@Zinglecode 3 жыл бұрын

สามารถทบทวนได้เรื่อยๆเลยครับ เพราะว่าเรื่องพวกนี้มันต้องเรียน + ต้องฝึกบ่อยๆถึงจะคล่อง ผมเองตอนเริ่มหัดใช้ Node.js ก็ฝึกทำความเข้าใจ + จดเนื้อหาลงสมุด อยู่หลายรอบครับ (อีกประมาณ 1 สัปดาห์ จะเดินทางกลับบ้าน ไปทำเนื้อหา Node.js ต่อนะครับ)

@korakotsinsamoot9954 3 жыл бұрын

@@Zinglecode ดีมากเลยครับ เพราะดูเหมือน เนื้อหามันค่อนข้างน้อยไปหน่อย (แค่4epผมยัง บอกว่าเข้าใจน้อย 555.. ถ้ามากกว่านี้คงงงเป็น ไก่ตาแตกแน่) ดีเลยครับกำลังรอให้มาต่อเนื้อหาNode.js แต่ผมคงจะขอวนเวียนอยู่กับ React ทั้งครอส นี่สัก1-2 รอบแล้วจึงจะกลับไป เรียน Node.js นะครับ

@CrazyAnix28 3 жыл бұрын

สอนเก่งมากครับ

@meep9206 4 жыл бұрын

Fc จากบ้านผมเองครับ

@meaw77771 3 жыл бұрын

ขอบคุณมากครับ

@shupachok 4 жыл бұрын

ขอบคุณครับ

@paxitxayphimphinith4455 4 жыл бұрын

fc จาก ส ป ป ลาว ครับ

@rutchaneekornkawilo7849 2 жыл бұрын

สอนดีมากกก ไม่ง่วงเลย 😆

@srsonline6143 3 жыл бұрын

สอนดีมาก

@poowit.k 4 жыл бұрын

รอชม react + redux + next หรือเทคนิคขั้นสูงนะครับ

@kajonpongpoopamonkaipob6153 4 жыл бұрын

ใช้คำสั่ง code . (จุด) ถ้าอยู่หน้า terminal มันจะเปิด vs code ใน path นั้นๆ ให้

@weapn5122 Жыл бұрын

beginner friendly มากๆครับ

@TheGreanScript 4 жыл бұрын

Content คุณภาพ

@youth-chi59ag 4 жыл бұрын

สวัสดีปีใหม่ครับ สู้ความเวิ้งว้างอันไกลโพ้น ครับผม...ผมจะเลี้ยงเบียร สักขวด

@Zinglecode 4 жыл бұрын

ชนแก้วแบบ Bluetooth ก่อนนะครับ กลัวโควิด

@saharat8761 4 жыл бұрын

คุ ณ ภ า พ ค รั บ

@พี่เท็นน้องอิง 2 жыл бұрын

tNice tutorialng ♂️. And I haven't used soft soft 9 since 09. So sorry bud✌ peace from Germany...

@TeddyBear-jr5hi 3 жыл бұрын

ขอนอกเรื่องหน่อยนะครับ เสียงคุณเหมือนนักพากย์การ์ตูนเลยครับ5555 ตอน 25:23 เสียงเหมือนคุโด้ ชินอิจิเลย

@Zinglecode 3 жыл бұрын

โมริ รัน นี่ชั้นเองไงหละ !

@jumbo999614 Жыл бұрын

สมมุติว่าเราจะใช้คอมเราเองเพือรัน เวปไซต์ คื่อให้ใช้งานเวปเองภายใน LAN ก็ไมต้อง deploy ใช่ไหมครับ ต้องแปลจาก developement เป็น build ไหมครับ แล้วทุกครั้งที่เปิดคอมใหม่ ต้องสั่งคำสั่ง node run dev กับ npm start เอง เหรอครับ

@Zinglecode Жыл бұрын

ใช่ครับ ไม่จำเป็นต้อง Deploy ไปที่อื่น แค่สั่ง build หรือ start ในเครื่องตัวเองก็ใช้งานได้ละครับ ส่วนเรื่องเปิดคอมใหม่แล้วต้องมารันคำสั่งใหม่ สามารถแก้ปัญหาได้ด้วยสิ่งที่มีชื่อว่า pm2 ครับ มันเป็นตัวช่วยให้สามารถ Run / Restart process ได้ตลอดเวลา ยังไงลองศึกษาเพิ่มเติมดูนะครับ

@nitsarut 4 жыл бұрын

ขอเรื่อง react-hook ได้ไหมครับ ขอบคุณครับ

@checker4174 Жыл бұрын

มีแพลนจะทำคอร์ส Flutter บ้างไหมคะ

@Zinglecode Жыл бұрын

ตอนนี้ยังไม่มีเลยครับ

@iamsnaack 2 жыл бұрын

so good

@watz3842 3 жыл бұрын

redux ใช่กับ function component ได้ไหมครับ

@Zinglecode 3 жыл бұрын

ใช้ได้สบายๆเลยครับ หลายๆโปรเจ็คที่แอดมินทำก็ใช้ Functional component + Redux ทำครับ

@ลุงยุทธ์ยันกัญชา 3 жыл бұрын

react ถ้าไม่ใช้ nodejs จะใช้งานได้มั้ยครับ เหมือน vuejs ที่แค่ include ไฟล์ vue.js ก็ใช้งานร่วมกับ html css ธรรมดาได้แล้ว

@Zinglecode 3 жыл бұрын

ใช้ได้ครับ ลองดูที่ Document ของเว็บ React ได้เลย มันมีวิธี include ไฟล์ JS ของ React อยู่ครับ

@arminiproject6652 3 жыл бұрын

ขอสอบถามหน่อยครับพี่ react เราโหลดมาแล้ว ถ้าเราจะทำ ptroject อื่นต้อง ลบไฟล์ออกหรือ โหลดมาอีกที่ได้ครับ

@Zinglecode 3 жыл бұрын

ถ้าจะทำ Project อื่น สร้างใหม่ได้เลยครับ ใช้ create-react-app สร้างได้เลย ขอแค่ชื่อไม่ซ้ำกับโปรเจ็คเก่า

@arminiproject6652 3 жыл бұрын

ขอบคุณครับพี่

@IfIKnow. 3 жыл бұрын

กราบขอบพระคุณสำหรับความรู้ดีๆและขอบคุณที่เสียสละเวลา 2 ชั่วโมงเพื่อส่งต่อความรู้ครับ

@kajonpongpoopamonkaipob6153 4 жыл бұрын

สอน react + redux + firebase หน่อยครับ ผมหาอยู่ครับ

@korakotsinsamoot9954 3 жыл бұрын

ถ้าอยากเปลี่ยนiconของหัวเว็บที่เราdeployขึ้นไปจากiconของreactเป็นรูปiconอื่นทำได้อย่างไรครับ

@Zinglecode 3 жыл бұрын

ให้เปลี่ยนไฟล์ favicon.ico ที่อยู่ในโฟลเดอร์ public เป็นไฟล์รูปภาพของเราครับ จะใช้เป็นไฟล์ .png หรือ .ico ก็ได้ครับ

@korakotsinsamoot9954 3 жыл бұрын

@@Zinglecode ขอบคุณมากครับ

@backie__8481 2 жыл бұрын

แก้ที่ไฟล์ index.html

@ricetv942 3 жыл бұрын

สนุกครับ 55555

@kittichainiwongsa7983 3 жыл бұрын

ผมที่เคยเป็น ความถึก555 ขอบคุณครับ

@trustz437 Жыл бұрын

แอด..สักเต็มหลังเลยใช่มั้ย

@siriwakornboonsiri7199 3 жыл бұрын

29:05 Components

@ssob3288 3 жыл бұрын

สอนดีกว่าครูในมหาลัย ต้องไหว้พี่เป็นครูแทนละครับ >

@kalimbalover5492 4 жыл бұрын

มันดีกว่า Vue js ไหมครับ(หางานง่าย ใช้ง่ายกว่ากันยังไง) ตอนนี้เป็นช่วงหัวเลี้ยวหัวต่อเลยครับ ใกล้จะอ่าน Html css จบแล้วครับ 555

@Zinglecode 4 жыл бұрын

ขึ้นอยู่กับความถนัดส่วนบุคคลครับ บางคนชอบ React บางคนชอบ Vue.js ซึ่งทั้งคู่มีอะไรให้ใช้ได้เหมือนกันนะครับ แนะนำให้ลองเอา React กับ Vue.js มาเขียนเว็บเดียวกัน (เว็บง่ายๆก็ได้) เทียบกันดูครับ จะได้ตัดสินใจง่ายขึ้น

@username-ee5be 4 жыл бұрын

ดีกว่าเยอะเลยครับ react เขียนได้ทั้งเว็บ และ แอพพิเคชั่น

@kalimbalover5492 4 жыл бұрын

@@username-ee5be ขอบคุณมากครับผม

@username-ee5be 3 жыл бұрын

@Supot SaeEa ไม่ยากครับ

@attimeoneoone8068 4 жыл бұрын

สอนดีกว่าครูอีกครับ

@wittavatsripradit2945 3 жыл бұрын

ตรง 34:26 ผมขึ้น Error ครับ

@Zinglecode 3 жыл бұрын

แคปหน้าโค้ดที่ Error ส่งมาให้ดูได้เลยครับ

@nanazap8348 Жыл бұрын

ผมติดอะไรรึป่าวครับ ผมแม่งสร้าง project react ไม่ได้ตั้งแต่5:53 จบคลิปไปอย่างรวดเร็ว 55555

@folkeboyz 2 жыл бұрын

ผมโคตร งง เรื่อง States Props เลยครับ เปิดฟังมา 2-3 ช่องก็ไม่เข้าใจ จนมาเจอช่องนี้เข้าใจง่ายมาก แต่ก็ต้องฝึกลงมือทำบ่อยๆ ไม่งั้นปิดคลิปนอนไป 2 คืนก็ลืมและ -*-

@Zinglecode 2 жыл бұрын

ถูกต้องครับ ฟังอย่างเดียวจะไม่เข้าใจทั้งหมด ต้องลงมือทำด้วย ถ้าเข้าใจ props, state เบื้องต้นแล้ว สามารถศึกษาคลิป Ep. ต่อไปของ React ได้ครับ เพื่อให้เข้าใจการทำงานกับ props, state หลากหลายรูปแบบมากขึ้น

@lilpux7390 2 жыл бұрын

finish

@ผู้ชายแท้ Жыл бұрын

15:11 จบคลิปภายใน 15 นาที 555+

@phat2540 2 жыл бұрын

เป็นการสอนReactที่เข้าใจง่ายมากแถมกระชับไม่น่าเบื่อค่ะ ยอมรับเลยค่ะว่าอธิบายพาทของcssแค่สั้นๆแต่เราจากที่ไม่ค่อยเข้าใจcssเท่าไหร่ตอนนี้เข้าใจจากคลิปนี้เลยค่ะ